実践アクセシビリティ in Angularアプリケーション

Slide 1

Slide 1 text

実践アクセシビリティ in Angularアプリケーション 2020.11.04 Kaori Shirahama @ng-japan OnAir #28

Slide 2

Slide 2 text

自己紹介 • しらはまかおり（@9v9Shira） • フロントエンドエンジニア at 株式会社トレタ • 普段はAngularでWebアプリ作ってる • アクセシビリティやっていきたい

Slide 3

Slide 3 text

自分たちのプロジェクトの現状 • これから改善を入れていく状態 • キャッチアップしつつ、徐々に実践中

Slide 4

Slide 4 text

今日の話 • これから改善していきたい方向け • 熟練者の方はより良い方法などあれば教えてください！

Slide 5

Slide 5 text

今日の話 • 話すこと • 実装、テスト面 • 話さないこと • アクセシビリティとは何か • アクセシビリティはなぜ重要か etc…

Slide 6

Slide 6 text

アクセシビリティ気にしてますか？

Slide 7

Slide 7 text

どんな風に取り組んでますか？

Slide 8

Slide 8 text

取り組みのフロー

Slide 9

Slide 9 text

アクセシビリティに関して知るチーム・組織で認識を合わせる実践するテストする修正する取り組みフロー 1 2 3 4 5

Slide 10

Slide 10 text

アクセシビリティに関して知るチーム・組織で認識を合わせる実践するテストする修正する取り組みフロー 1 2 3 4 5 今日はここの話

Slide 11

Slide 11 text

アクセシビリティに関して知るチーム・組織で認識を合わせる実践するテストする修正する 1 2 3 4 5

Slide 12

Slide 12 text

何に気をつけるべきか？・アクセシビリティの方針を決める・要件定義・コンテンツの設計・ビジュアルデザイン・実装・テスト

Slide 13

Slide 13 text

何に気をつけるべきか？・アクセシビリティの方針を決める・要件定義・コンテンツの設計・ビジュアルデザイン・実装・テストエンジニアが取り組みやすいこのへんのイメトレをしてみた

Slide 14

Slide 14 text

参考：https://angular.jp/guide/accessibility アクセシビリティガイドライン

Slide 15

Slide 15 text

実装で気をつけること • ネイティブ要素を使う • ネイティブ要素が使えない場合、aria属性、role属性を使う • Angular Materialを活用する • ルーティングのフォーカスの制御をする

Slide 16

Slide 16 text

Slide 17

Slide 17 text

ネイティブ要素を使う • メリット • ブラウザがアクセシビリティを担保してくれる • 支援技術でも問題なく使える

Slide 18

Slide 18 text

Slide 19

Slide 19 text

role属性・aria属性を使う • ネイティブ要素が使えない場合、role属性・aria属性を使う • role属性 • コンテンツの役割を明示する • aria属性 • 状態や性質を明示する • キーボード操作は自前実装

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Angular Material を活用する • Angular Material • https://material.angular.io/ • Angular Materialの実装を参考にする • Angular Materialのa11yパッケージを利用する • https://material.angular.io/cdk/a11y/overview • 例）Focus Trap ダイアログ内でフォーカスを循環させたい場合など利用

Slide 22

Slide 22 text

Focus Trap の sample • ng add @angular/material (@angular/cdk だけでもOK) • A11yModuleをインポート (app.module.tsに追加)

Slide 23

Slide 23 text

Slide 24

Slide 24 text

ルーティングのフォーカスを制御する • SPAの場合、リンクをクリックしてもハードリフレッシュは行われない（=フォーカスの位置が変わらない） • 支援技術ユーザーに新しいコンテンツがページに追加されたことが伝わらない • 参考 • https://web.dev/managed-focus/? utm_source=lighthouse&utm_medium=cli • https://web.dev/managed-focus/? utm_source=lighthouse&utm_medium=cli

Slide 25

Slide 25 text

クリックしてもフォーカスの位置が変わらない

Slide 26

Slide 26 text

• RouterサービスのNavigationEndイベントで制御 • フォーカスを当てたい要素に tabindex=-1 を付与（デフォルトでフォーカスが当たらない場合）ルーティングのフォーカスを制御する

Slide 27

Slide 27 text

Slide 28

Slide 28 text

アクセシビリティに関して知るチーム・組織で認識を合わせる実践するテストする修正する 1 2 3 4 5

Slide 29

Slide 29 text

TSLintにルールを追加する • linterのような静的チェックツールを利用する • https://web.dev/accessible-angular-with- codelyzer/ • https://medium.com/ngconf/new-accessibility- rules-in-codelyzer-v5-0-0-85eec1d3e9bb

Slide 30

Slide 30 text

tslint.json

Slide 31

Slide 31 text

TSLintは10こしかルールがない

Slide 32

Slide 32 text

もっと自動チェック増やしたい

Slide 33

Slide 33 text

何でチェックする？

Slide 34

Slide 34 text

axe • オープンソースのアクセシビリティ検証ライブラリー • axeのエンジンはaxe-core • https://github.com/dequelabs/axe-core • Deque Systems社が開発している • https://www.deque.com/axe/ 業界標準！

Slide 35

Slide 35 text

axe • オープンソースのアクセシビリティ検証ライブラリー • axeのエンジンはaxe-core • https://github.com/dequelabs/axe-core • Deque Systems社が開発している • https://www.deque.com/axe/ 業界標準！アクセ！アックスやで

Slide 36

Slide 36 text

axe • ブラウザー拡張 • Chrome • https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/ lhdoppojpmngadmnindnejefpokejbdd • Firefox • https://addons.mozilla.org/ja/ﬁrefox/addon/axe-devtools/ • 日本語で使える • 92ルールチェックしてくれる • https://github.com/dequelabs/axe-core/blob/develop/doc/rule- descriptions.md

Slide 37

Slide 37 text

axe

Slide 38

Slide 38 text

axe

Slide 39

Slide 39 text

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/

Slide 40

Slide 40 text

lighthouseの利用方法 • Chrome dev tools • Chrome 拡張機能 • Node CLI • Nodeモジュールの使用 • lighthouse ci • https://github.com/GoogleChrome/lighthouse-ci

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

lighthouseでチェックできない項目 • 詳細 • https://web.dev/lighthouse-accessibility/#additional-items- to-manually-check • 例 • タブ順序は論理的か • インタラクティブなコントロールはキーボードフォーカス可能か • ユーザーのフォーカスは、ページ追加された新しいコンテンツに向けられるか • etc…

Slide 43

Slide 43 text

手動チェックはどうする？ • 手動チェックをするタイミングは？ • エンジニアが都度チェックする？ • QAのチェック項目に追加する？みんなどうしてるんだろう？

Slide 44

Slide 44 text

axe と lighthouse の比較 • axe • アクセシビリティだけチェックしたい • ブラウザ拡張は日本語で使える • CLI、CIツールなど一部有料 • lighthouseよりチェックのルールが多い • lighthouse • アクセシビリティ以外もチェックしたい • CLI、CIツールが無料

Slide 45

Slide 45 text

アクセシビリティに関して知るチーム・組織で認識を合わせる実践するテストする修正する 1 2 3 4 5

Slide 46

Slide 46 text

TSLintのエラー • 3/10 ルールでエラーがでた • エラー数は全部で65件 • エラーがなかった7ルールは追加 • エラーが出た物に関しては修正方針と工数見積もり • これから修正していくルールを追加してチェックしてみた

Slide 47

Slide 47 text

いっぱいエラーが出た場合どこから修正する？

Slide 48

Slide 48 text

修正フローチェックしてエラーが出たものは全てissueにする知覚不能なエラーを修正する次は操作不能なエラーを修正する

Slide 49

Slide 49 text

まとめ

Slide 50

Slide 50 text

1STEPずつ完璧にして進んでいくのは現実的ではないアクセシビリティに関して知るチーム・組織で認識を合わせる実践するテストする修正する 1 2 3 4 5

Slide 51

Slide 51 text

できることから取り組もう

Slide 52

Slide 52 text

少しの改善を積み重ねて品質を上げていこうアクセシビリティに関して知る実践するテストする修正するチーム・組織で認識を合わせる

Slide 53

Slide 53 text

ありがとうございました！