一工夫必要なa11y対応機能3選

はじめに

a11y対応の案件に携わって4年、現在も社内でa11y（アクセシビリティ）を布教している“準a11yおじさん”です。
今回は、よくある機能の中で「a11y対応として一工夫が必要だなぁ」と感じた機能を、個人的な主観で3つ紹介しようと思います。

もちろん、a11y対応ライブラリを使えば楽に実装できます。
ただ、今回は1から自分で実装する場合を想定しています。
ですので、a11yおじさんは温かい心で、a11y赤ちゃん（a11y初心者）は参考に見ていただければ幸いです。

なお、脆弱性やセキュリティ面を考えると、1から実装した方が確実な場合もあるため、あくまで参考程度にどうぞ。

スクロールが発生するテーブル

スクロールが発生するテーブルを実装する場合、ユーザーに「スクロールできる」ことを視覚的に伝える必要があります。
たとえば、端にグラデーションを入れたり、「← →」などのスクロールアイコンを表示し、スクロールしたらそれらを非表示にするといった工夫が必要です。

ただし、スクリーンリーダー向けに「このテーブルはスクロールできます」と伝える要素を用意する必要はありません。

「え？健常者と同じように案内しなくていいの？」

と思う方もいるかもしれません。
確かに、Webアクセシビリティの目的は「健常者と障がいのある方で情報の差をなくすこと」です。
ですが、“スクロールできるかどうか”という情報自体は重要ではありません。
重要なのはコンテンツとして取得できる情報量であり、操作方法そのものを伝えることではないと考えています。

これはあくまで私の意見であり、絶対的な正解ではありません。
ただ、スクリーンリーダーで情報を取得するのは非常にストレスが大きいと感じます。
言うなれば、「校長先生の長い話を永遠と聞いている」ような感覚です。
欲しい情報にたどり着くまで時間がかかるため、不要な読み上げは極力避け、必要な情報だけ伝えるのが望ましいと思います。

話が少し逸れましたが、テーブルに関して言えば、視覚的にはスクロールで隠れていても、スクリーンリーダーは全ての内容を読み上げてくれます。
そのため、「スクロールできます」という読み上げは不要です。
ただし、グラデーションやアイコンを制御するためのJavaScript実装が必要になるため、今回の対象に挙げさせていただきました。

モーダル

ただモーダルを出すだけではなく、モーダル内の要素しかフォーカスできないように制御する必要があります。

「フォーカス」とは、Tabキーでボタンやリンクなどに移動できる状態のことです。
スクリーンリーダーでは、フォーカスできる要素を順番に読み上げてくれます。

モーダル外の要素にフォーカスできてしまうと、ユーザーがモーダルを閉じるまでに余計な操作が必要になり、操作性が低下します。
そのため、モーダル表示時にはモーダル外の要素をフォーカスできないように制御しましょう。

具体的な方法としては、モーダル外の要素に tabindex="-1" を付与するなどして、フォーカスを外す対応が必要です。
tabindex="-1" でフォーカス対象外、tabindex="0" 以上でフォーカス対象になります。

ページ内スクロール

ページ内リンク（目次など）から該当箇所へスクロールした後は、その要素にフォーカスを合わせる必要があります。

これはスクリーンリーダーのための対応で、フォーカスを移動させないと、スクロール後も目次付近の要素を読み上げ続けてしまうためです。
つまり、ユーザーが「目的のコンテンツに移動したのに、読み上げが追いつかない」状態になります。

スクロール後に element.focus() を呼び出すことで、読み上げを適切に行わせることができます。

最後に

a11y対応は「細かい」「面倒」と感じることが多いですが、こうした地味な工夫がすべてのユーザーにとって快適なWeb体験につながります。
是非、これらの機能を皮切りにa11yおじさんへの道を歩んでいただければと思います！
ご拝読ありがとうございました！