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
630
実践アクセシビリティ in Angularアプリケーション
shira
November 04, 2020
Tweet
Share
More Decks by shira
See All by shira
開発プロセスとアクセシビリティ
shira
1
92
通知UIを改善している話
shira
2
3.4k
:is()と:where()の話
shira
0
5.2k
hoverとタッチスクリーンデバイス
shira
2
1.3k
犬顔or猫顔判定アプリを作っている話.pdf
shira
1
190
社内LT大会開催に至るまでの話
shira
4
440
Other Decks in Technology
See All in Technology
ゆるSRE #11 LT
okaru
1
570
上長や社内ステークホルダーに対する解像度を上げて、より良い補完関係を築く方法 / How-to-increase-resolution-and-build-better-complementary-relationships-with-your-bosses-and-internal-stakeholders
madoxten
13
7.3k
Ретроспективный взгляд на Vue 3. Даша Сабурова, Vue-разработчик Lamoda Tech
lamodatech
0
1.2k
Grafana MCP serverでなんかし隊 / Try Grafana MCP server
kohbis
0
320
QAはソフトウェアエンジニアリングを学んで実践するのが大事なの
ymty
1
330
Whats_new_in_Podman_and_CRI-O_2025-06
orimanabu
3
170
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
Workflows から Agents へ ~ 生成 AI アプリの成長過程とアプローチ~
belongadmin
2
130
バクラクのモノレポにおける AI Coding のための環境整備と {Roo,Claude} Code活用事例 / AI Coding in Bakuraku's Monorepo: Environment Setup & Case Studies with {Roo, Claude} Code
upamune
9
5.7k
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.4k
脅威をモデリングしてMCPのセキュリティ対策を考えよう
flatt_security
4
1.4k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
17k
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
The Cult of Friendly URLs
andyhume
79
6.4k
The Invisible Side of Design
smashingmag
299
50k
Being A Developer After 40
akosma
90
590k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Navigating Team Friction
lara
186
15k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Gamification - CAS2011
davidbonilla
81
5.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
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
できることから取り組もう
少しの改善を 積み重ねて 品質を 上げていこう アクセシビリ ティ に関して知る 実践する テストする 修正する
チーム・組織で 認識を合わせる
ありがとうございました!