2022年11月01日掲載
- ウェブアクセシビリティ職人「見習い君」と「師匠」がアクセシビリティな世界を目指す
- このストーリーは、新人ウェブアクセシビリティ職人「見習い君」とベテラン職人「師匠」、解説を担当する「秘書」を通して特に障がい者をはじめ身体的な制約がある方たちがウェブ利用時にどの様な障壁にぶつかり、どの様な工夫をして克服しているかなど「ウェブアクセシビリティ」の実例をはじめ「ウェブアクセシビリティ」と共に重要な「社会的アクセシビリティ」についても紹介していきます。
キーボード操作
見習い君：師匠に教えてもらったように、画像に代替テキストを付けたり、コントラストを確保したり、アクセシビリティに配慮したサイトが完成できた！
師匠：おお、来月更新予定の、ウェブアクセシビリティについて説明したサイトか。
最後に共通のドロップダウンメニューを作っているところだったかな？
見習い君：はい、マウスをメニュー項目に当てればドロップダウンメニューが開くようになってます。
師匠：どれどれ…ん？メニュー部分をマウスで開くことはできるようになっているが、キーボードでメニューを開くことができないぞ。
どういう風に、アクセシビリティに配慮したのかな？
見習い君：そんなぁ。メニュー部分に使用している画像には、ちゃんと代替テキストを付けたし、コントラスト比にも気を付けて作ってみたのですが…
師匠：以前フォーカスインジケータについて教えたとき、視覚障がい者や上肢障がい者がキーボード操作（Tabキー）でしかパソコンを操作することができないことについても触れたはずだ。Tabキーを使えば、リンクまたはボタンにフォーカスが当たるようになるしくみなのは分かっているはずだ。
では、ページの初めから、フォーカスの動きを見ながらTabキーで操作してごらん。
見習い君：はい…カチャカチャカチャ…あれ、せっかく作ったドロップダウンメニューを素通りしちゃってる！？
師匠：そう、どれだけTabキーを押してもフォーカスが当たらなければ、マウス操作が出来ない利用者にはメニューを開くことさえできないんだ。
見習い君：でもなんで…。マウスで操作するとこんなにきれいに開くのに…。
師匠：見習い君、もしかしてリンクやボタンを操作できるようなHTMLの記述をしていないんじゃないか？
見習い君：はい、よくわかりましたね。師匠のいう通り、通常のリンクなどは使わず画像を配置してクリックした時にメニューが開くように設定しましたよ。
師匠：「よくわかりましたね」じゃなくて…テキスト・画像などを表示するための要素はどれだけTabキーを押してもフォーカスを受け取らないようになっているんだ。
通常フォーカスを受け取れるのは、クリックされることを前提に用意されているリンク、ボタン、入力フォームだけだ。
見習い君：えっ、じゃあアクセシビリティに配慮したページにする以上、リンクやボタン以外のものにフォーカスを受け取るように設定してはいけないんですか？
師匠：いや、絶対に使ってはいけないということではないよ。少し使いづらいものではあるが、HTMLには「tabindex」という、どんな要素にでもフォーカスを当てられるようになる属性があるんだ。
tabindexの値に0を入れるとリンクやボタンと同様にフォーカスを受け取るようになるぞ。（注1）
見習い君：おお、これは便利ですね！…あれ、でもスクリーンリーダーで読み上げさせてみたら指定したボタンだけ、「ボタン」って読んでくれませんよ。
師匠：そうだな。今回のように本来クリックできないはずの要素を使う場合には、スクリーンリーダー利用者を混乱させないよう、role属性（注2）に「button」と記載してボタンとして識別されるよう配慮すべきだな。
見習い君：なるほど、これでスクリーンリーダーでも気持ちよく開閉できるようになりました。
師匠、ありがとうございます！
（注1）：tabindexはフォーカスの当たる順序を記述するための属性です。
正の整数を入れると小さい数字ほど先にフォーカスを受け取るように、そして負の整数を入れるとフォーカスを受け取らないようにしてくれます。
ただ、「フォーカスが当たるように」と特定の要素にのみ小さい数字を入れて指定してしまうと、ページ中のどの項目よりも先に読み上げられてしまうので注意が必要です。
（注2）：role属性は要素の役割をブラウザに伝えるための属性です。
秘書：マウスが使用できない利用者は、キーボードで操作できない箇所が一つでもあると、ドロップダウンメニューなどの機能が使えなくなり、必要な情報にたどり着かないなど、情報を取得することが困難になります。
もっと知りたいと思った方は、こちらに詳しく書かれていますので、ぜひ読んでみてくださいね。
「キーボードの達成基準」（新しいウィンドウが開きます）
