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

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

● 今回の挙動はplaceholderの表⽰が変わるのみで、⼊⼒やそれ以外のコンテン
ツの操作や閲覧は妨げられていない
● 理由から推測する基準としては問題ないと今回は判断
もしplaseholderが⾃動で切り替わることに関する知⾒をお持ちの⽅はぜひ教え
てください！
17

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

達成できているもの/達成できていないものが明確になったのは⼤きな⼀歩
プロダクトのアクセシビリティに対する⽴ち位置を把握できた
理由付きで解説されており、どのような項⽬がアクセシビリティとして⼤事
なのかを知ることができた
30

View Slide

次は達成できていないものを直していくことをやっていく
Helpfeelは今この段階です
31

View Slide

導⼊ブックから私のアクセシビリティ対応は始まりました。
● 導⼊ブックには具体例もあったのでそれをみながら⼀つずつ確認する
のは意外と簡単でした。
● 解説がついているため、判断するときの助けになりました。
32
今回の気付き

View Slide

imgタグにalt属性を付与する修正などの⼿をつけられそうなところから実
際に修正を始めました。
この時にeslint-plugin-jsx-a11yというpluginを導⼊し、修正とともに
jsx-a11y/alt-textのエラーを有効にする設定を追加しました。
33
実際に修正してみる

View Slide

全部を⼀気に直そうとせず、達成基準などで問題を分割してできそうなと
ころからやっていくことが⼤事だと思います。
どうやって対応していくべきか悩むところは周りを巻き込んで相談/議論し
ていこうと思ってます
34
実際に修正してみる

View Slide

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

View Slide

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

View Slide

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

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

balar

Featured

Transcript