ウェブアクセシビリティ導入ガイドブックと始めるアクセシビリティ

Helpfeel Tech Hour vol.3 「アクセシビリティを始めたい！編」で発表した資料です。

Google Slide: https://docs.google.com/presentation/d/14x1_5Q8Y4mKyKgPIkVYcTBTlSh8m9duNVvH_rj_lYXA/edit?usp=drive_link

Transcript

1. 1 ウェブアクセシビリティ導⼊ガイド ブックと始めるアクセシビリティ Helpfeelエンジニア balar(@marefa9cb8)
2. 質問などはSlidoで受け付けてます。(#3629079) connpassのイベントページにも載せています。 https://app.sli.do/event/9uXNnGetfdQ76KXC3nfbPF 2 始める前に
3. プロダクトのアクセシビリティが改善されているかどう判断 してますか？ 3 はじめに
4. デジタル庁が公開している「ウェブアクセシビリティ導⼊ガイドブック」を参考 にして判断しました。 今回はそのウェブアクセシビリティ導⼊ガイドブックを⽤いてどうやって確認し たのかなどを話します。 4 Helpfeelでは…
5. デジタル庁が公開しているアクセシビリティに関する資料 https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook/ アクセシビリティとは？といった初歩的なところから始まり、達成すべき基準な どが記されています。 5 ウェブアクセシビリティ導⼊ガイドブックとは
6. 対象読者は以下のようになっています。 本ガイドブックは、情報システム（特にインタラクティブ‧システム）の開 発と、ウェブを通じた情報発信のふたつの領域で、ウェブアクセシビリティ の向上に取り組む初⼼者の⽅が最初に読むことを想定して作成しました。 ※ウェブアクセシビリティ導⼊ガイドブック 1.4 対象読者 6 ウェブアクセシビリティ導⼊ガイドブックの対象読者
7. 抜き出すと、下記の⼈物となる • 情報システムの開発 • ウェブを通じた情報発信 • ウェブアクセシビリティの向上に取り組む初⼼者 どれも私に当てはまるので、私に最適なガイドブックになります。 これを読むところから私のアクセシビリティ改善は始まりました。 7 ウェブアクセシビリティ導⼊ガイドブックの対象読者
8. 実際にHelpfeelがアクセシビリティ改善されていると判断す るには何をしたら良いでしょうか？ 8 アクセシビリティ改善の判断基準は？
9. ウェブアクセシビリティ導⼊ガイドブックでは達成するべき項⽬が重要度別に分 類されて定められています。 その項⽬を1つずつ確認してHelpfeelが達成されているかを確認していきました。 9 アクセシビリティ改善の判断基準
10. これから項⽬の⼀部を抜粋して紹介していきます。 確認する範囲は基本的にHelpfeelを導⼊してる顧客のヘルプページを対象と考え ているが、顧客側の都合で変更したスタイルや要素の影響は範囲外とします 10 ガイドブックに従って確認していく
11. 達成しないと利⽤者に重⼤な悪影響を及ぼすもの(重⼤) • ⾃動再⽣はさせない • 光の点滅は危険 • 袋⼩路に陥らせない • ⾃動でコンテンツを切り替えない ※ ウェブアクセシビリティ導⼊ガイドブック 3.1 達成しないと利⽤者に重⼤な悪影響を及ぼすもの 11 達成しないと利⽤者に重⼤な悪影響を及ぼすもの
12. 達成基準: 重⼤ • ⾳声を⾃動再⽣することは避け、再⽣する場合は3秒以内に収める 達成確認⽅法 • コード上のaudioタグやvideoタグでauto play属性が無いか確認した 達成確認結果: ✅ • Helpfeelは⾳声や動画は⾃動再⽣していない 12 ⾃動再⽣はさせない ウェブアクセシビリティ導入ガイドブックP22 / WCAG 2.0 達成基準: 1.4.2 音声の制御
13. 達成基準: 重⼤ • キーボード操作のみでどこかのフォーカスから抜け出せなくなるのを避ける 達成確認⽅法 • 実際にキーボードのみで複数⼈で試した 達成確認結果: ✅ • Helpfeelには確認する限りでは袋⼩路は存在しなかった 13 袋⼩路に陥らせない ウェブアクセシビリティ導入ガイドブックP22 / WCAG 2.0 達成基準: 2.1.2 キーボードトラップなし
14. 達成基準: 重⼤ • 光の点滅を避ける(具体的には1秒に 3回以上点滅はダメ) 達成確認⽅法 • 実際のHelpfeelのページで確認した 達成確認結果: ✅ • Helpfeelは点滅するような箇所は存在しない 14 光の点滅は危険 ウェブアクセシビリティ導入ガイドブック P23 / WCAG 2.0 達成基準: 2.3.1 3回の閃光、又は閾値以下, 2.3.2 3回の閃光
15. 達成基準: 重⼤ • ⾃動で切り替わるコンテンツは⼀時停⽌、⾮表⽰、停⽌の機能を設置する必 要がある 達成確認⽅法 • 実際のHelpfeelのページで確認した 15 ⾃動でコンテンツを切り替えない ウェブアクセシビリティ導入ガイドブックP23 / WCAG 2.0 達成基準: 2.2.2 一時停止、停止、非表示
16. 達成確認結果: ❌？ • Helpfeelは検索ボックスに値を⼊れていない時にplaceholderの表⽰が切り替 わるため ガイドブックの該当項⽬の説明を⾒ると理由が下記のようになっている 画⾯上に動き続けるコンテンツがあると、他の箇所の操作や閲覧を妨げられ る利⽤者がいるためです。 ※ 3.1 達成しないと利⽤者に重⼤な悪影響を及ぼすもの ⾃動でコンテンツを切り替えない 16 ⾃動でコンテンツを切り替えない ウェブアクセシビリティ導入ガイドブックP23 / WCAG 2.0 達成基準: 2.2.2 一時停止、停止、非表示
17. 達成確認結果: ✅ • 今回の挙動はplaceholderの表⽰が変わるのみで、⼊⼒やそれ以外のコンテン ツの操作や閲覧は妨げられていない • 理由から推測する基準としては問題ないと今回は判断 もしplaseholderが⾃動で切り替わることに関する知⾒をお持ちの⽅はぜひ教え てください！ 17 ⾃動でコンテンツを切り替えない ウェブアクセシビリティ導入ガイドブックP23 / WCAG 2.0 達成基準: 2.2.2 一時停止、停止、非表示
18. 必ず達成しなければならないもの(必須) • ロゴ‧写真‧イラストなどの画像が指し⽰している情報を代替テキストとし て付与する • キーボード操作だけで、サービスのすべての機能にアクセスすることができ るようにする • 操作に制限時間を設けてはいけない • リンクを適切に表現する ※ ウェブアクセシビリティ導⼊ガイドブック 3.2 必ず達成しなければならないもの 18 必ず達成しなければならないもの
19. 達成基準: 必須 • imgタグにalt属性で代替テキストを指定する必要がある 達成確認⽅法 • コード上のimgタグを検索してaltが指定されているか調査した 達成確認結果: ❌ • Helpfeelでは殆どalt属性が書かれていなかった 19 ロゴ‧写真‧イラストなどの画像が指し⽰している情報を代替テキストと して付与する ウェブアクセシビリティ導入ガイドブックP24 / WCAG 2.0 達成基準: 1.1.1 非テキストコンテンツ
20. 達成基準: 必須 • Tabキーなどで全てのコンテンツにアクセスができる • キーボード操作時にフォーカスインジケーターが表⽰される必要がある 達成確認⽅法 • 実際のHelpfeelのページで確認した 達成確認結果: ❌ • ⼀部のコンテンツに移動ができず、マイクボタンにフォーカスされた時にフォーカスイン ジケーターが表⽰されていない 20 キーボード操作だけで、サービスのすべての機能にアクセスすることがで きるようにする ウェブアクセシビリティ導入ガイドブックP25 / WCAG 2.0 達成基準: 2.1.1 キーボード操作, 2.4.3 フォーカス順序, 2.4.7 フォーカスの可視化, 3.2.1 フォーカス時, 3.2.2 入力時
21. 21 フォーカスインジケータの動作確認 ウェブアクセシビリティ導入ガイドブックP25 / WCAG 2.0 達成基準: 2.1.1 キーボード操作, 2.4.3 フォーカス順序, 2.4.7 フォーカスの可視化, 3.2.1 フォーカス時, 3.2.2 入力時
22. 達成基準: 必須 • 閲覧や⼊⼒の操作に制限時間があってはいけない 達成確認⽅法 • 実際のHelpfeelのページで確認した 達成確認結果: ✅ • Helpfeelでは制限時間がある操作は存在しない 22 操作に制限時間を設けてはいけない ウェブアクセシビリティ導入ガイドブックP25 / WCAG 2.0 達成基準: 2.2.1 タイミング調整可能, 2.2.2 一時停止、停止、非表示
23. 達成基準: 必須 • リンクに「詳しくはこちら」などを使わずに単体で意味がわかるようにする 達成確認⽅法 • コード上のaタグが表⽰される箇所を確認した 達成確認結果: ✅ • Helpfeelではリンクは適切に表現されている 23 リンクを適切に表現する ウェブアクセシビリティ導入ガイドブックP30 / WCAG 2.0 達成基準: 2.4.4 リンクの目的
24. 状況に応じて確認すべきこと(個別対応) • ⼊⼒フォームを様々な使い⽅でも使えるようにする ウェブアクセシビリティ導⼊ガイドブック 3.3 状況に応じて確認すべきこと より 24 状況に応じて確認すべきこと
25. 達成基準: 個別対応 • ラベルとフォームコントロールは関連付ける • ⼊⼒エラーはスクリーンリーダーで読み上げられる • エラーの回避⽅法は具体的に⽰してください 達成確認⽅法 • 実際のHelpfeelのページの問い合わせフォームで確認した • コードも確認してlabel属性の有無を確認した 25 ⼊⼒フォームを様々な使い⽅でも使えるようにする ウェブアクセシビリティ導入ガイドブックP32 / WCAG 2.0 達成基準: 1.3.1 情報及び関係性, 3.3.1 エラーの特定, 3.3.2 ラベル又は説明, 3.3.3 エラー修正の提案, 3.3.4 エラー回避（法的、金融、データ）
26. 達成確認結果: ✅(改善の余地あり) • ラベルとフォームコントロールは紐付いている • エラーが表⽰されたときはスクリーンリーダーで読み上げられている • ⼀部エラー内容は明確ではないものが存在していた 26 ⼊⼒フォームを様々な使い⽅でも使えるようにする ウェブアクセシビリティ導入ガイドブックP32 / WCAG 2.0 達成基準: 1.3.1 情報及び関係性, 3.3.1 エラーの特定, 3.3.2 ラベル又は説明, 3.3.3 エラー修正の提案, 3.3.4 エラー回避（法的、金融、データ）
27. 導⼊に慎重な検討が必要(⾮推奨) • アクセシビリティ‧オーバーレイなどのプラグインは⽀援技術の機能と重複 させない • ⽂字サイズの変更、読み上げプラグインの利⽤は⾮推奨 ウェブアクセシビリティ導⼊ガイドブック 3.4 導⼊に慎重な検討が必要 より 27 導⼊に慎重な検討が必要
28. 達成基準: ⾮推奨 • アクセシビリティを損ねる可能性があるため導⼊には慎重になる必要がある 達成確認⽅法 • これらの機能がhelpfeelにあるか確認 達成確認結果: ✅ • Helpfeelでは利⽤していない 28 アクセシビリティ‧オーバーレイなどのプラグインは⽀援技術の機能と重 複させない/⽂字サイズの変更、読み上げプラグインの利⽤は⾮推奨 ウェブアクセシビリティ導入ガイドブックP35
29. Copyright © 2022 Helpfeel Inc. All Rights Reserved. このような感じで項⽬毎に確認をしていきました。 Helpfeelは重要な達成基準は⽐較的達成していたが、⼀部達成できていない 項⽬が存在したことがわかりました。 29 ガイドブックに従って確認した結果
30. Copyright © 2022 Helpfeel Inc. All Rights Reserved. 達成できているもの/達成できていないものが明確になったのは⼤きな⼀歩 プロダクトのアクセシビリティに対する⽴ち位置を把握できた 理由付きで解説されており、どのような項⽬がアクセシビリティとして⼤事 なのかを知ることができた 30 ガイドブックに従って確認した結果
31. Copyright © 2022 Helpfeel Inc. All Rights Reserved. 次は達成できていないものを直していくことをやっていく Helpfeelは今この段階です 31 ガイドブックに従って確認した結果
32. Copyright © 2022 Helpfeel Inc. All Rights Reserved. 導⼊ブックから私のアクセシビリティ対応は始まりました。 • 導⼊ブックには具体例もあったのでそれをみながら⼀つずつ確認する のは意外と簡単でした。 • 解説がついているため、判断するときの助けになりました。 32 今回の気付き
33. Copyright © 2022 Helpfeel Inc. All Rights Reserved. imgタグにalt属性を付与する修正などの⼿をつけられそうなところから実 際に修正を始めました。 この時にeslint-plugin-jsx-a11yというpluginを導⼊し、修正とともに jsx-a11y/alt-textのエラーを有効にする設定を追加しました。 33 実際に修正してみる
34. Copyright © 2022 Helpfeel Inc. All Rights Reserved. 全部を⼀気に直そうとせず、達成基準などで問題を分割してできそうなと ころからやっていくことが⼤事だと思います。 どうやって対応していくべきか悩むところは周りを巻き込んで相談/議論し ていこうと思ってます 34 実際に修正してみる
35. Copyright © 2022 Helpfeel Inc. All Rights Reserved. eslint-plugin-jsx-a11yのjsx-a11y/recommendedで出たエラーを内容毎に 分類し、1エラーを1つのタスクとしてチームメンバーで担当していく 私がjsx-a11y/alt-textのエラーを担当して設定に追加したようにチームメン バー全体でエラー撲滅を⾏っています 35 Helpfeelチームの今後のアクセシビリティ改善の取り組み
36. Copyright © 2022 Helpfeel Inc. All Rights Reserved. 週1の会議時にチーム全体でウェブアクセシビリティ導⼊ガイドブックを1 項⽬ずつみていく 前回は数⼈で分担して⾏っていたのを全員がチェックする • 現在のHelpfeelが達成できているか複数の視点で確認する • どのような基準がアクセシビリティにとって⼤事かを理解する チーム全体としてウェブアクセシビリティ導⼊ガイドブックの達成基準を把 握したうえで開発を⾏えるようにしていきます。 36 Helpfeelチームの今後のアクセシビリティ改善の取り組み