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
600
実践アクセシビリティ in Angularアプリケーション
shira
November 04, 2020
Tweet
Share
More Decks by shira
See All by shira
通知UIを改善している話
shira
2
3.2k
:is()と:where()の話
shira
0
5k
hoverとタッチスクリーンデバイス
shira
2
1.2k
犬顔or猫顔判定アプリを作っている話.pdf
shira
1
180
社内LT大会開催に至るまでの話
shira
4
410
Other Decks in Technology
See All in Technology
ココナラのセキュリティ組織の体制・役割・今後目指す世界
coconala_engineer
0
220
論文紹介 ”Long-Context LLMs Meet RAG: Overcoming Challenges for Long Inputs in RAG” @GDG Tokyo
shukob
0
280
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
0
110
Power BI は、レポート テーマにこだわろう!テーマのティア表付き
ohata_ds
0
120
Server Side Swift 実践レポート: 2024年に案件で採用して見えた課題と可能性
yusuga
1
420
NOSTR, réseau social et espace de liberté décentralisé
rlifchitz
0
130
あなたはJVMの気持ちを理解できるか?
skrb
5
2k
Makuake*UPSIDER_LightningTalk
upsider_tech
0
210
ハンズオンで学ぶ Databricks - Databricksにおけるデータエンジニアリング
taka_aki
1
2.1k
一人から始めたSREチーム3年の歩み - 求められるスキルの変化とチームのあり方 - / The three-year journey of the SRE team, which started all by myself
vtryo
7
5.7k
パフォーマンスとコスト改善のために法人データ分析基盤をBigQueryに移行した話
seiya303
1
100
ソフトウェア開発現代史:製造業とソフトウェアは本当に共存できていたのか?品質とスピードを問い直す
takabow
15
5.3k
Featured
See All Featured
Building Applications with DynamoDB
mza
93
6.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
Git: the NoSQL Database
bkeepers
PRO
427
64k
KATA
mclloyd
29
14k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Faster Mobile Websites
deanohume
305
30k
It's Worth the Effort
3n
184
28k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
30
2.1k
Visualization
eitanlees
146
15k
Designing Experiences People Love
moore
139
23k
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
できることから取り組もう
少しの改善を 積み重ねて 品質を 上げていこう アクセシビリ ティ に関して知る 実践する テストする 修正する
チーム・組織で 認識を合わせる
ありがとうございました!