はじめに
HTML解体新書にてアクセシビリティを考慮した開発が必要であると知った。
そして実際にどのような考慮が行われているのか気になった。そこで現在公開されているいくつかのWebサイトを対象に、Tabキーのみで閲覧し、アクセシビリティの具体的な実装内容を確認した。
調査したサイト
- Qiita
- Zenn
- MDN
- Youtube
- その他数社のホームページ
アクセシビリティに必要な実装
調査の結果、Tabキーのみでもマウスと遜色なく閲覧できるサイトでは以下のことが実装されていた
- メインコンテンツへのスキップリンク
- マウス操作時と同様の画面変化
- 見出し・小見出しへのフォーカス
1.メインコンテンツへのスキップリンク
同ページのメインコンテンツへフォーカスを移すためのリンク
YoutubeやMDNといったナビゲーションや検索フォームなどメインコンテンツ以外のコンテンツが多いサイトで確認できた。
メリット
一回で閲覧したい箇所までフォーカスを移動できる。
ない場合のデメリット
このリンクがない場合、別ページに遷移するたびにメインコンテンツまでフォーカスを合わせる必要がある。遷移するたびにTabキーを何回もクリックする必要があり、閲覧に労力を使う。スキップリンクがないサイトを閲覧した際、私は二度とそのサイトへアクセスしないと考える人がいてもおかしくないと思った。
2.マウス操作時と同様の画面変化
マウス操作と同様に画面が変化する実装。
MDNが非常に良い実装だと感じた
メリット
フォーカスしている場所が把握できる
ない場合のデメリット
フォーカスしている場所が把握できず閲覧しにくい
主にCSSのhoverとforcusについてである。多くのサイトでマウスカーソルがコンテンツ上に乗った時(hover時)にその状態が変化する。しかし、Tabキーによる選択はhoverでなくforcusである。そのため、hoverだけで変化する実装の場合Tabキー操作ではコンテンツの状態が変化せず、現在フォーカスしている場所を見失う
特に、上画像のようなリストが隠れている時が非常に厄介だった。突如フォーカスが消失し何回Tabキーを押しても現れないという事象が発生する。そして、フォーカスが予想外の場所に出現し、もう一度1から閲覧する必要が出てくる。
3.見出し・小見出しへのフォーカス
MDNとZennで確認できた実装
h1~6はデフォルトではTabキー操作でフォーカスされない。子要素にhref属性をもつ<a>タグを持たせることで、Tabキー操作でフォーカスされるようにする。<a>タグの向き先は親要素のid
<h2 id="見出しID">
<a href="#見出しID">フォーカスされる見出し</a>
</h2>
メリット
閲覧場所が把握しやすい
Tabキーを押すことで各見出しにジャンプしフォーカスが表示される。閲覧したいコンテンツがページ最下層に記載されていてもTabキーのみで移動ができる。また、見出しにフォーカスが当たるため現在閲覧しているコンテンツを把握しやすい
ない場合のデメリット
サイトの閲覧に十字キーが必要になる。
上2つと比べて影響度は小さく、なくても殆ど気にならなかった。だが、あった場合はTabキーのみで閲覧でき非常に便利だった。
あとがき
アクセシビリティに必要な実装として以下の3つを上げた
- メインコンテンツへのスキップリンク
- マウス操作時と同様の画面変化
- 見出し・小見出しへのフォーカス
この中でスキップリンクと画面変化は閲覧時のストレスの観点から必須だと感じた
最期にこの調査を経てアクセシビリティを考慮したサイトと考慮していないサイトの模型を作ってみたため、ここに記載。
※0.5x推奨
See the Pen アクセシビリティを考慮したサイト by Momokonomi (@Momokonomi) on CodePen.