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

by balar

Slide 1

Slide 1 text

1 ウェブアクセシビリティ導⼊ガイドブックと始めるアクセシビリティ Helpfeelエンジニア balar(@marefa9cb8)

Slide 2

Slide 2 text

質問などはSlidoで受け付けてます。(#3629079) connpassのイベントページにも載せています。 https://app.sli.do/event/9uXNnGetfdQ76KXC3nfbPF 2 始める前に

Slide 3

Slide 3 text

プロダクトのアクセシビリティが改善されているかどう判断してますか？ 3 はじめに

Slide 4

Slide 4 text

デジタル庁が公開している「ウェブアクセシビリティ導⼊ガイドブック」を参考にして判断しました。今回はそのウェブアクセシビリティ導⼊ガイドブックを⽤いてどうやって確認したのかなどを話します。 4 Helpfeelでは…

Slide 5

Slide 5 text

デジタル庁が公開しているアクセシビリティに関する資料 https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook/ アクセシビリティとは？といった初歩的なところから始まり、達成すべき基準などが記されています。 5 ウェブアクセシビリティ導⼊ガイドブックとは

Slide 6

Slide 6 text

対象読者は以下のようになっています。本ガイドブックは、情報システム（特にインタラクティブ‧システム）の開発と、ウェブを通じた情報発信のふたつの領域で、ウェブアクセシビリティの向上に取り組む初⼼者の⽅が最初に読むことを想定して作成しました。 ※ウェブアクセシビリティ導⼊ガイドブック 1.4 対象読者 6 ウェブアクセシビリティ導⼊ガイドブックの対象読者

Slide 7

Slide 7 text

抜き出すと、下記の⼈物となる ● 情報システムの開発 ● ウェブを通じた情報発信 ● ウェブアクセシビリティの向上に取り組む初⼼者どれも私に当てはまるので、私に最適なガイドブックになります。これを読むところから私のアクセシビリティ改善は始まりました。 7 ウェブアクセシビリティ導⼊ガイドブックの対象読者

Slide 8

Slide 8 text

実際にHelpfeelがアクセシビリティ改善されていると判断するには何をしたら良いでしょうか？ 8 アクセシビリティ改善の判断基準は？

Slide 9

Slide 9 text

ウェブアクセシビリティ導⼊ガイドブックでは達成するべき項⽬が重要度別に分類されて定められています。その項⽬を1つずつ確認してHelpfeelが達成されているかを確認していきました。 9 アクセシビリティ改善の判断基準

Slide 10

Slide 10 text

これから項⽬の⼀部を抜粋して紹介していきます。確認する範囲は基本的にHelpfeelを導⼊してる顧客のヘルプページを対象と考えているが、顧客側の都合で変更したスタイルや要素の影響は範囲外とします 10 ガイドブックに従って確認していく

Slide 11

Slide 11 text

達成しないと利⽤者に重⼤な悪影響を及ぼすもの(重⼤) ● ⾃動再⽣はさせない ● 光の点滅は危険 ● 袋⼩路に陥らせない ● ⾃動でコンテンツを切り替えない ※ ウェブアクセシビリティ導⼊ガイドブック 3.1 達成しないと利⽤者に重⼤な悪影響を及ぼすもの 11 達成しないと利⽤者に重⼤な悪影響を及ぼすもの

Slide 12

Slide 12 text

達成基準: 重⼤ ● ⾳声を⾃動再⽣することは避け、再⽣する場合は3秒以内に収める達成確認⽅法 ● コード上のaudioタグやvideoタグでauto play属性が無いか確認した達成確認結果: ✅ ● Helpfeelは⾳声や動画は⾃動再⽣していない 12 ⾃動再⽣はさせないウェブアクセシビリティ導入ガイドブックP22 / WCAG 2.0 達成基準: 1.4.2 音声の制御

Slide 13

Slide 13 text

達成基準: 重⼤ ● キーボード操作のみでどこかのフォーカスから抜け出せなくなるのを避ける達成確認⽅法 ● 実際にキーボードのみで複数⼈で試した達成確認結果: ✅ ● Helpfeelには確認する限りでは袋⼩路は存在しなかった 13 袋⼩路に陥らせないウェブアクセシビリティ導入ガイドブックP22 / WCAG 2.0 達成基準: 2.1.2 キーボードトラップなし

Slide 14

Slide 14 text

達成基準: 重⼤ ● 光の点滅を避ける(具体的には1秒に 3回以上点滅はダメ) 達成確認⽅法 ● 実際のHelpfeelのページで確認した達成確認結果: ✅ ● Helpfeelは点滅するような箇所は存在しない 14 光の点滅は危険ウェブアクセシビリティ導入ガイドブック P23 / WCAG 2.0 達成基準: 2.3.1 3回の閃光、又は閾値以下, 2.3.2 3回の閃光

Slide 15

Slide 15 text

達成基準: 重⼤ ● ⾃動で切り替わるコンテンツは⼀時停⽌、⾮表⽰、停⽌の機能を設置する必要がある達成確認⽅法 ● 実際のHelpfeelのページで確認した 15 ⾃動でコンテンツを切り替えないウェブアクセシビリティ導入ガイドブックP23 / WCAG 2.0 達成基準: 2.2.2 一時停止、停止、非表示

Slide 16

Slide 16 text

達成確認結果: ❌？ ● Helpfeelは検索ボックスに値を⼊れていない時にplaceholderの表⽰が切り替わるためガイドブックの該当項⽬の説明を⾒ると理由が下記のようになっている画⾯上に動き続けるコンテンツがあると、他の箇所の操作や閲覧を妨げられる利⽤者がいるためです。 ※ 3.1 達成しないと利⽤者に重⼤な悪影響を及ぼすもの⾃動でコンテンツを切り替えない 16 ⾃動でコンテンツを切り替えないウェブアクセシビリティ導入ガイドブックP23 / WCAG 2.0 達成基準: 2.2.2 一時停止、停止、非表示

Slide 17

Slide 17 text

達成確認結果: ✅ ● 今回の挙動はplaceholderの表⽰が変わるのみで、⼊⼒やそれ以外のコンテンツの操作や閲覧は妨げられていない ● 理由から推測する基準としては問題ないと今回は判断もしplaseholderが⾃動で切り替わることに関する知⾒をお持ちの⽅はぜひ教えてください！ 17 ⾃動でコンテンツを切り替えないウェブアクセシビリティ導入ガイドブックP23 / WCAG 2.0 達成基準: 2.2.2 一時停止、停止、非表示

Slide 18

Slide 18 text

必ず達成しなければならないもの(必須) ● ロゴ‧写真‧イラストなどの画像が指し⽰している情報を代替テキストとして付与する ● キーボード操作だけで、サービスのすべての機能にアクセスすることができるようにする ● 操作に制限時間を設けてはいけない ● リンクを適切に表現する ※ ウェブアクセシビリティ導⼊ガイドブック 3.2 必ず達成しなければならないもの 18 必ず達成しなければならないもの

Slide 19

Slide 19 text

達成基準: 必須 ● imgタグにalt属性で代替テキストを指定する必要がある達成確認⽅法 ● コード上のimgタグを検索してaltが指定されているか調査した達成確認結果: ❌ ● Helpfeelでは殆どalt属性が書かれていなかった 19 ロゴ‧写真‧イラストなどの画像が指し⽰している情報を代替テキストとして付与するウェブアクセシビリティ導入ガイドブックP24 / WCAG 2.0 達成基準: 1.1.1 非テキストコンテンツ

Slide 20

Slide 20 text

達成基準: 必須 ● Tabキーなどで全てのコンテンツにアクセスができる ● キーボード操作時にフォーカスインジケーターが表⽰される必要がある達成確認⽅法 ● 実際のHelpfeelのページで確認した達成確認結果: ❌ ● ⼀部のコンテンツに移動ができず、マイクボタンにフォーカスされた時にフォーカスインジケーターが表⽰されていない 20 キーボード操作だけで、サービスのすべての機能にアクセスすることができるようにするウェブアクセシビリティ導入ガイドブックP25 / WCAG 2.0 達成基準: 2.1.1 キーボード操作, 2.4.3 フォーカス順序, 2.4.7 フォーカスの可視化, 3.2.1 フォーカス時, 3.2.2 入力時

Slide 21

Slide 21 text

21 フォーカスインジケータの動作確認ウェブアクセシビリティ導入ガイドブックP25 / WCAG 2.0 達成基準: 2.1.1 キーボード操作, 2.4.3 フォーカス順序, 2.4.7 フォーカスの可視化, 3.2.1 フォーカス時, 3.2.2 入力時

Slide 22

Slide 22 text

達成基準: 必須 ● 閲覧や⼊⼒の操作に制限時間があってはいけない達成確認⽅法 ● 実際のHelpfeelのページで確認した達成確認結果: ✅ ● Helpfeelでは制限時間がある操作は存在しない 22 操作に制限時間を設けてはいけないウェブアクセシビリティ導入ガイドブックP25 / WCAG 2.0 達成基準: 2.2.1 タイミング調整可能, 2.2.2 一時停止、停止、非表示

Slide 23

Slide 23 text

達成基準: 必須 ● リンクに「詳しくはこちら」などを使わずに単体で意味がわかるようにする達成確認⽅法 ● コード上のaタグが表⽰される箇所を確認した達成確認結果: ✅ ● Helpfeelではリンクは適切に表現されている 23 リンクを適切に表現するウェブアクセシビリティ導入ガイドブックP30 / WCAG 2.0 達成基準: 2.4.4 リンクの目的

Slide 24

Slide 24 text

状況に応じて確認すべきこと(個別対応) ● ⼊⼒フォームを様々な使い⽅でも使えるようにするウェブアクセシビリティ導⼊ガイドブック 3.3 状況に応じて確認すべきことより 24 状況に応じて確認すべきこと

Slide 25

Slide 25 text

達成基準: 個別対応 ● ラベルとフォームコントロールは関連付ける ● ⼊⼒エラーはスクリーンリーダーで読み上げられる ● エラーの回避⽅法は具体的に⽰してください達成確認⽅法 ● 実際のHelpfeelのページの問い合わせフォームで確認した ● コードも確認してlabel属性の有無を確認した 25 ⼊⼒フォームを様々な使い⽅でも使えるようにするウェブアクセシビリティ導入ガイドブックP32 / WCAG 2.0 達成基準: 1.3.1 情報及び関係性, 3.3.1 エラーの特定, 3.3.2 ラベル又は説明, 3.3.3 エラー修正の提案, 3.3.4 エラー回避（法的、金融、データ）

Slide 26

Slide 26 text

達成確認結果: ✅(改善の余地あり) ● ラベルとフォームコントロールは紐付いている ● エラーが表⽰されたときはスクリーンリーダーで読み上げられている ● ⼀部エラー内容は明確ではないものが存在していた 26 ⼊⼒フォームを様々な使い⽅でも使えるようにするウェブアクセシビリティ導入ガイドブックP32 / WCAG 2.0 達成基準: 1.3.1 情報及び関係性, 3.3.1 エラーの特定, 3.3.2 ラベル又は説明, 3.3.3 エラー修正の提案, 3.3.4 エラー回避（法的、金融、データ）

Slide 27

Slide 27 text

導⼊に慎重な検討が必要(⾮推奨) ● アクセシビリティ‧オーバーレイなどのプラグインは⽀援技術の機能と重複させない ● ⽂字サイズの変更、読み上げプラグインの利⽤は⾮推奨ウェブアクセシビリティ導⼊ガイドブック 3.4 導⼊に慎重な検討が必要より 27 導⼊に慎重な検討が必要

Slide 28

Slide 28 text

達成基準: ⾮推奨 ● アクセシビリティを損ねる可能性があるため導⼊には慎重になる必要がある達成確認⽅法 ● これらの機能がhelpfeelにあるか確認達成確認結果: ✅ ● Helpfeelでは利⽤していない 28 アクセシビリティ‧オーバーレイなどのプラグインは⽀援技術の機能と重複させない/⽂字サイズの変更、読み上げプラグインの利⽤は⾮推奨ウェブアクセシビリティ導入ガイドブックP35

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Copyright © 2022 Helpfeel Inc. All Rights Reserved. eslint-plugin-jsx-a11yのjsx-a11y/recommendedで出たエラーを内容毎に分類し、1エラーを1つのタスクとしてチームメンバーで担当していく私がjsx-a11y/alt-textのエラーを担当して設定に追加したようにチームメンバー全体でエラー撲滅を⾏っています 35 Helpfeelチームの今後のアクセシビリティ改善の取り組み

Slide 36

Slide 36 text

Copyright © 2022 Helpfeel Inc. All Rights Reserved. 週1の会議時にチーム全体でウェブアクセシビリティ導⼊ガイドブックを1 項⽬ずつみていく前回は数⼈で分担して⾏っていたのを全員がチェックする ● 現在のHelpfeelが達成できているか複数の視点で確認する ● どのような基準がアクセシビリティにとって⼤事かを理解するチーム全体としてウェブアクセシビリティ導⼊ガイドブックの達成基準を把握したうえで開発を⾏えるようにしていきます。 36 Helpfeelチームの今後のアクセシビリティ改善の取り組み