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
530
実践アクセシビリティ in Angularアプリケーション
shira
November 04, 2020
Tweet
Share
More Decks by shira
See All by shira
通知UIを改善している話
shira
2
2.8k
:is()と:where()の話
shira
0
4.4k
hoverとタッチスクリーンデバイス
shira
2
1.1k
犬顔or猫顔判定アプリを作っている話.pdf
shira
1
170
社内LT大会開催に至るまでの話
shira
4
380
Other Decks in Technology
See All in Technology
「ふりかえりのふりかえり」をふりかえり、実のあるふりかえりにする
naitosatoshi
0
210
ここが嬉しいABAC ここが辛いよABAC #再解説+補足編
masahirokawahara
0
170
強みを伸ばすキャリアデザイン
yug1224
0
200
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs (QCon London)
inesmontani
PRO
0
140
2024-04-06 AMeDAS to Lagoon SORACOM UG 2024-04-06
anysonica
0
120
OpenTelemetry を使ったトレースエグザンプラーの活用 / otel-trace-exemplar
k6s4i53rx
2
630
TransitGatewayの基礎
toru_kubota
0
230
エンタープライズ環境下での Active Directory の運用 TIPS
tamaiyutaro
1
1.4k
【SORACOM UG】(2024年度版) SIMってなんだ? ~セルラー通信がつながる仕組み、解説します~
soracom
PRO
0
210
〜小さく始めて大きく育てる〜データ分析基盤の開発から活用まで
kniino
0
1.9k
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
660
マルチアカウント環境への発見的統制の導入
ch1aki
1
1.3k
Featured
See All Featured
BBQ
matthewcrist
79
8.7k
Unsuck your backbone
ammeep
662
57k
Debugging Ruby Performance
tmm1
69
11k
Bash Introduction
62gerente
604
210k
10 Git Anti Patterns You Should be Aware of
lemiorhan
645
57k
The Cost Of JavaScript in 2023
addyosmani
13
3.8k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Imperfection Machines: The Place of Print at Facebook
scottboms
258
12k
Fireside Chat
paigeccino
19
2.6k
Making Projects Easy
brettharned
107
5.5k
What's in a price? How to price your products and services
michaelherold
237
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
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
できることから取り組もう
少しの改善を 積み重ねて 品質を 上げていこう アクセシビリ ティ に関して知る 実践する テストする 修正する
チーム・組織で 認識を合わせる
ありがとうございました!