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.4k
:is()と:where()の話
shira
0
5.3k
hoverとタッチスクリーンデバイス
shira
2
1.3k
犬顔or猫顔判定アプリを作っている話.pdf
shira
1
200
社内LT大会開催に至るまでの話
shira
4
450
Other Decks in Technology
See All in Technology
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
1k
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
8
2.3k
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
1k
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
3
2k
Digitization部 紹介資料
sansan33
PRO
1
4.5k
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
240
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
3
460
サービスを止めるな! DDoS攻撃へのスマートな備えと最前線の事例
coconala_engineer
1
180
三視点LLMによる複数観点レビュー
mhlyc
0
230
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
420
How Do I Contact Jetblue Airlines® Reservation Number: Fast Support Guide
thejetblueairhelpsupport
0
150
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
670
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
Embracing the Ebb and Flow
colly
86
4.8k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
How STYLIGHT went responsive
nonsquared
100
5.6k
Git: the NoSQL Database
bkeepers
PRO
430
65k
How GitHub (no longer) Works
holman
314
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
The Language of Interfaces
destraynor
158
25k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Fireside Chat
paigeccino
37
3.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
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
できることから取り組もう
少しの改善を 積み重ねて 品質を 上げていこう アクセシビリ ティ に関して知る 実践する テストする 修正する
チーム・組織で 認識を合わせる
ありがとうございました!