Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

40cb6070701421da8246dd1f1bc4abcb?s=47 shira
November 04, 2020

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

40cb6070701421da8246dd1f1bc4abcb?s=128

shira

November 04, 2020
Tweet

Transcript

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

  2. 自己紹介 • しらはま かおり(@9v9Shira) • フロントエンド エンジニア at 株式会社トレタ •

    普段はAngularでWebアプリ作ってる • アクセシビリティやっていきたい
  3. 自分たちのプロジェクトの現状 • これから改善を入れていく状態 • キャッチアップしつつ、徐々に実践中

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

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

    アクセシビリティはなぜ重要か etc…
  6. アクセシビリティ 気にしてますか?

  7. どんな風に 取り組んでますか?

  8. 取り組みのフロー

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

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

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

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

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

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

  15. 実装で気をつけること • ネイティブ要素を使う • ネイティブ要素が使えない場合、aria属性、role属性 を使う • Angular Materialを活用する •

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

    ルーティングのフォーカスの制御をする
  17. ネイティブ要素を使う • メリット • ブラウザがアクセシビリティを担保してくれる • 支援技術でも問題なく使える

  18. 実装で気をつけること • ネイティブ要素を使う • ネイティブ要素が使えない場合、aria属性、role属性 を使う • Angular Materialを活用する •

    ルーティングのフォーカスの制御をする
  19. role属性・aria属性を使う • ネイティブ要素が使えない場合、role属性・aria属性を使う • role属性 • コンテンツの役割を明示する • aria属性 •

    状態や性質を明示する • キーボード操作は自前実装
  20. 実装で気をつけること • ネイティブ要素を使う • ネイティブ要素が使えない場合、aria属性、role属性 を使う • Angular Materialを活用する •

    ルーティングのフォーカスの制御をする
  21. Angular Material を活用する • Angular Material • https://material.angular.io/ • Angular

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

    • A11yModuleをインポート (app.module.tsに追加)
  23. 実装で気をつけること • ネイティブ要素を使う • ネイティブ要素が使えない場合、aria属性、role属性 を使う • Angular Materialを活用する •

    ルーティングのフォーカスの制御をする
  24. ルーティングのフォーカスを制御する • SPAの場合、リンクをクリックしてもハードリフレッシュは 行われない(=フォーカスの位置が変わらない) • 支援技術ユーザーに新しいコンテンツがページに追加された ことが伝わらない • 参考 •

    https://web.dev/managed-focus/? utm_source=lighthouse&utm_medium=cli • https://web.dev/managed-focus/? utm_source=lighthouse&utm_medium=cli
  25. クリックしても フォーカスの位置が変わらない

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

  27. 実装で気をつけること • ネイティブ要素を使う • ネイティブ要素が使えない場合、aria属性、role属性 を使う • Angular Materialを活用する •

    ルーティングのフォーカスの制御をする
  28. アクセシビリ ティ に関して知る チーム・組織で 認識を合わせる 実践する テストする 修正する 1 2

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

  30. tslint.json

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

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

  33. 何でチェックする?

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

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

    • https://www.deque.com/axe/ 業界標準! アクセ! アックス やで
  36. 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
  37. axe

  38. axe

  39. 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/
  40. lighthouseの利用方法 • Chrome dev tools • Chrome 拡張機能 • Node

    CLI • Nodeモジュールの使用 • lighthouse ci • https://github.com/GoogleChrome/lighthouse-ci
  41. None
  42. lighthouseでチェックできない項目 • 詳細 • https://web.dev/lighthouse-accessibility/#additional-items- to-manually-check • 例 • タブ順序は論理的か

    • インタラクティブなコントロールはキーボードフォーカス可能か • ユーザーのフォーカスは、ページ追加された新しいコンテンツに 向けられるか • etc…
  43. 手動チェックはどうする? • 手動チェックをするタイミングは? • エンジニアが都度チェックする? • QAのチェック項目に追加する? みんな どうしてるんだろう?

  44. axe と lighthouse の比較 • axe • アクセシビリティだけチェックしたい • ブラウザ拡張は日本語で使える

    • CLI、CIツールなど一部有料 • lighthouseよりチェックのルールが多い • lighthouse • アクセシビリティ以外もチェックしたい • CLI、CIツールが無料
  45. アクセシビリ ティ に関して知る チーム・組織で 認識を合わせる 実践する テストする 修正する 1 2

    3 4 5
  46. TSLintのエラー • 3/10 ルールでエラーがでた • エラー数は全部で65件 • エラーがなかった7ルールは追加 • エラーが出た物に関しては修正方針と工数見積もり

    • これから修正していく ルールを追加して チェックしてみた
  47. いっぱいエラーが出た場合 どこから修正する?

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

  49. まとめ

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

    1 2 3 4 5
  51. できることから取り組もう

  52. 少しの改善を 積み重ねて 品質を 上げていこう アクセシビリ ティ に関して知る 実践する テストする 修正する

    チーム・組織で 認識を合わせる
  53. ありがとうございました!