2021年09月07日掲載

今回は、これまで勉強したことを参考に、見習い君が実際にウェブサイトのアクセシビリティチェックをしているところを師匠が指導しています。見習い君が「フォーカス・インジケータ」が表示されるかチェックしているようです。
- ウェブアクセシビリティ職人「見習い君」と「師匠」がアクセシビリティな世界を目指す
- このストーリーは、新人ウェブアクセシビリティ職人「見習い君」とベテラン職人「師匠」、解説を担当する「秘書」を通して特に障がい者をはじめ身体的な制約がある方たちがウェブ利用時にどの様な障壁にぶつかり、どの様な工夫をして克服しているかなど「ウェブアクセシビリティ」の実例をはじめ「ウェブアクセシビリティ」と共に重要な「社会的アクセシビリティ」についても紹介していきます。
フォーカス・インジケータってなに?

師匠:「フォーカス・インジケータ」チェックはどこまで進んだかな?
見習い君:このページのフォーカス・インジケータ表示を残り1か所チェックすれば終わりです。・・・・あれ?
師匠:何か問題があったのかね?

見習い君:はい、最後のリンクボタンだけフォーカス・インジケータが表示されていないようです。
師匠:どれどれ、そうだな。たしかに表示されていない。
これではキーボードでパソコンを操作する利用者には厳しいな。
見習い君:どうして厳しいのですか?
師匠:じゃあ、そのフォーカス・インジケータが表示されていないリンクに、キーボード操作でアクセスしてみなさい。
見習い君:あっ、フォーカス・インジケータが当たっているのが分からないからアクセスできません!

師匠:そうだろ。この作業はマウス操作ができればポインタを移動させてクリックするだけだから簡単だが、マウス操作ができない利用者はキーボードで操作しなければならない。そのような時のためにフォーカス・インジケータが必要になるのじゃ。

見習い君:確かにそうですね、今回も勉強になりました。
師匠:おっ今日はやけに素直じゃな!
今回はフォーカス・インジケータの不具合を良く見つけたの。

見習い君:師匠、ぼく成長したでしょ!
師匠:自分で言うな(笑)

秘書:フォーカス・インジケータは、マウスが使用できない利用者にとって、無くてはならない重要な機能です。
マウスを使用せずキーボード操作でTabキーを押して、キーボード・フォーカスを移動した際、どこにフォーカスが当たっているか、このフォーカス・インジケータで確認することになります。
キーボードでパソコンを操作しているときは、このフォーカス・インジケータが表示されていなければパソコンの操作はできないのです。
もっと知りたいと思った方は、こちらに詳しく書かれていますのでぜひ読んでみてくださいね。
【フォーカス・インジケータに関する基準】
https://waic.jp/docs/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html(新しいウィンドウが開きます)