Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
実践アクセシビリティ in Angularアプリケーション
Search
shira
November 04, 2020
Technology
0
640
実践アクセシビリティ in Angularアプリケーション
shira
November 04, 2020
Tweet
Share
More Decks by shira
See All by shira
開発プロセスとアクセシビリティ
shira
1
98
通知UIを改善している話
shira
2
3.5k
:is()と:where()の話
shira
0
5.4k
hoverとタッチスクリーンデバイス
shira
2
1.3k
犬顔or猫顔判定アプリを作っている話.pdf
shira
1
200
社内LT大会開催に至るまでの話
shira
4
450
Other Decks in Technology
See All in Technology
見てわかるテスト駆動開発
recruitengineers
PRO
6
2.2k
TypeScript入門
recruitengineers
PRO
33
11k
制約理論(ToC)入門
recruitengineers
PRO
8
3.5k
小さなチーム 大きな仕事 - 個人開発でAIをフル活用する
himaratsu
0
140
AIとTDDによるNext.js「隙間ツール」開発の実践
makotot
6
790
Understanding Go GC #coefl_go_jp
bengo4com
1
1.1k
現場が抱える様々な問題は “組織設計上” の問題によって生じていることがある / Team-oriented Organization Design 20250827
mtx2s
7
67k
Lessons from CVE-2025-22869: Memory Debugging and OSS Vulnerability Reporting
vvatanabe
2
110
『FailNet~やらかし共有SNS~』エレベーターピッチ
yokomachi
1
190
AI時代に非連続な成長を実現するエンジニアリング戦略
sansantech
PRO
3
840
【Grafana Meetup Japan #6】Grafanaをリバプロ配下で動かすときにやること ~ Grafana Liveってなんだ ~
yoshitake945
0
200
AIエージェントの活用に重要な「MCP (Model Context Protocol)」とは何か
masayamoriofficial
0
230
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
339
57k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
It's Worth the Effort
3n
187
28k
RailsConf 2023
tenderlove
30
1.2k
Speed Design
sergeychernyshev
32
1.1k
The Cult of Friendly URLs
andyhume
79
6.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
11
1.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Music & Morning Musume
bryan
46
6.8k
Typedesign – Prime Four
hannesfritz
42
2.8k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Transcript
実践アクセシビリティ in Angularアプリケーション 2020.11.04 Kaori Shirahama @ng-japan OnAir #28
自己紹介 • しらはま かおり(@9v9Shira) • フロントエンド エンジニア at 株式会社トレタ •
普段はAngularでWebアプリ作ってる • アクセシビリティやっていきたい
自分たちのプロジェクトの現状 • これから改善を入れていく状態 • キャッチアップしつつ、徐々に実践中
今日の話 • これから改善していきたい方向け • 熟練者の方はより良い方法などあれば教えてください!
今日の話 • 話すこと • 実装、テスト面 • 話さないこと • アクセシビリティとは何か •
アクセシビリティはなぜ重要か etc…
アクセシビリティ 気にしてますか?
どんな風に 取り組んでますか?
取り組みのフロー
アクセシビリ ティ に関して知る チーム・組織で 認識を合わせる 実践する テストする 修正する 取り組みフロー 1
2 3 4 5
アクセシビリ ティ に関して知る チーム・組織で 認識を合わせる 実践する テストする 修正する 取り組みフロー 1
2 3 4 5 今日はここの話
アクセシビリ ティ に関して知る チーム・組織で 認識を合わせる 実践する テストする 修正する 1 2
3 4 5
何に気をつけるべきか? ・アクセシビリティの方針を決める ・要件定義 ・コンテンツの設計 ・ビジュアルデザイン ・実装 ・テスト
何に気をつけるべきか? ・アクセシビリティの方針を決める ・要件定義 ・コンテンツの設計 ・ビジュアルデザイン ・実装 ・テスト エンジニアが取り組みやすい このへんのイメトレをしてみた
参考:https://angular.jp/guide/accessibility アクセシビリティガイドライン
実装で気をつけること • ネイティブ要素を使う • ネイティブ要素が使えない場合、aria属性、role属性 を使う • Angular Materialを活用する •
ルーティングのフォーカスの制御をする
実装で気をつけること • ネイティブ要素を使う • ネイティブ要素が使えない場合、aria属性、role属性 を使う • Angular Materialを活用する •
ルーティングのフォーカスの制御をする
ネイティブ要素を使う • メリット • ブラウザがアクセシビリティを担保してくれる • 支援技術でも問題なく使える
実装で気をつけること • ネイティブ要素を使う • ネイティブ要素が使えない場合、aria属性、role属性 を使う • Angular Materialを活用する •
ルーティングのフォーカスの制御をする
role属性・aria属性を使う • ネイティブ要素が使えない場合、role属性・aria属性を使う • role属性 • コンテンツの役割を明示する • aria属性 •
状態や性質を明示する • キーボード操作は自前実装
実装で気をつけること • ネイティブ要素を使う • ネイティブ要素が使えない場合、aria属性、role属性 を使う • Angular Materialを活用する •
ルーティングのフォーカスの制御をする
Angular Material を活用する • Angular Material • https://material.angular.io/ • Angular
Materialの実装を参考にする • Angular Materialのa11yパッケージを利用する • https://material.angular.io/cdk/a11y/overview • 例)Focus Trap ダイアログ内でフォーカスを循環させたい場合など利用
Focus Trap の sample • ng add @angular/material (@angular/cdk だけでもOK)
• A11yModuleをインポート (app.module.tsに追加)
実装で気をつけること • ネイティブ要素を使う • ネイティブ要素が使えない場合、aria属性、role属性 を使う • Angular Materialを活用する •
ルーティングのフォーカスの制御をする
ルーティングのフォーカスを制御する • SPAの場合、リンクをクリックしてもハードリフレッシュは 行われない(=フォーカスの位置が変わらない) • 支援技術ユーザーに新しいコンテンツがページに追加された ことが伝わらない • 参考 •
https://web.dev/managed-focus/? utm_source=lighthouse&utm_medium=cli • https://web.dev/managed-focus/? utm_source=lighthouse&utm_medium=cli
クリックしても フォーカスの位置が変わらない
• RouterサービスのNavigationEndイベントで制御 • フォーカスを当てたい要素に tabindex=-1 を付与 (デフォルトでフォーカスが当たらない場合) ルーティングのフォーカスを制御する
実装で気をつけること • ネイティブ要素を使う • ネイティブ要素が使えない場合、aria属性、role属性 を使う • Angular Materialを活用する •
ルーティングのフォーカスの制御をする
アクセシビリ ティ に関して知る チーム・組織で 認識を合わせる 実践する テストする 修正する 1 2
3 4 5
TSLintにルールを追加する • linterのような静的チェックツールを利用する • https://web.dev/accessible-angular-with- codelyzer/ • https://medium.com/ngconf/new-accessibility- rules-in-codelyzer-v5-0-0-85eec1d3e9bb
tslint.json
TSLintは10こしか ルールがない
もっと自動チェック 増やしたい
何でチェックする?
axe • オープンソースのアクセシビリティ検証ライブラリー • axeのエンジンはaxe-core • https://github.com/dequelabs/axe-core • Deque Systems社が開発している
• https://www.deque.com/axe/ 業界標準!
axe • オープンソースのアクセシビリティ検証ライブラリー • axeのエンジンはaxe-core • https://github.com/dequelabs/axe-core • Deque Systems社が開発している
• https://www.deque.com/axe/ 業界標準! アクセ! アックス やで
axe • ブラウザー拡張 • Chrome • https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/ lhdoppojpmngadmnindnejefpokejbdd • Firefox
• https://addons.mozilla.org/ja/firefox/addon/axe-devtools/ • 日本語で使える • 92ルールチェックしてくれる • https://github.com/dequelabs/axe-core/blob/develop/doc/rule- descriptions.md
axe
axe
lighthouse • lighthouse • https://github.com/GoogleChrome/lighthouse/ • lighthouseでは42ルールのチェックができる • https://web.dev/lighthouse-accessibility/ •
https://web.dev/accessibility-scoring/ • アクセシビリティ監査のエンジンはaxe-core • https://www.deque.com/blog/google-selects- deques-axe-chrome-devtools/
lighthouseの利用方法 • Chrome dev tools • Chrome 拡張機能 • Node
CLI • Nodeモジュールの使用 • lighthouse ci • https://github.com/GoogleChrome/lighthouse-ci
None
lighthouseでチェックできない項目 • 詳細 • https://web.dev/lighthouse-accessibility/#additional-items- to-manually-check • 例 • タブ順序は論理的か
• インタラクティブなコントロールはキーボードフォーカス可能か • ユーザーのフォーカスは、ページ追加された新しいコンテンツに 向けられるか • etc…
手動チェックはどうする? • 手動チェックをするタイミングは? • エンジニアが都度チェックする? • QAのチェック項目に追加する? みんな どうしてるんだろう?
axe と lighthouse の比較 • axe • アクセシビリティだけチェックしたい • ブラウザ拡張は日本語で使える
• CLI、CIツールなど一部有料 • lighthouseよりチェックのルールが多い • lighthouse • アクセシビリティ以外もチェックしたい • CLI、CIツールが無料
アクセシビリ ティ に関して知る チーム・組織で 認識を合わせる 実践する テストする 修正する 1 2
3 4 5
TSLintのエラー • 3/10 ルールでエラーがでた • エラー数は全部で65件 • エラーがなかった7ルールは追加 • エラーが出た物に関しては修正方針と工数見積もり
• これから修正していく ルールを追加して チェックしてみた
いっぱいエラーが出た場合 どこから修正する?
修正フロー チェックしてエラーが出たものは全てissueにする 知覚不能なエラーを修正する 次は操作不能なエラーを修正する
まとめ
1STEPずつ完璧にして進んでいくのは 現実的ではない アクセシビリ ティ に関して知る チーム・組織で 認識を合わせる 実践する テストする 修正する
1 2 3 4 5
できることから取り組もう
少しの改善を 積み重ねて 品質を 上げていこう アクセシビリ ティ に関して知る 実践する テストする 修正する
チーム・組織で 認識を合わせる
ありがとうございました!