私は「本文へジャンプ」スキップリンクがほしい
公開日：
- #アクセシビリティ
- #ユーザビリティ
- #UI
HTMLさえセマンティックであれば、スクリーンリーダ利用者は共通UIを読み飛ばしてメインコンテンツへ直接アクセスできます。当たり前になってから、もうずいぶん年数も経ちました。
それを根拠に、定期的に時代遅れのいらない子として槍玉に挙げられているのを見かけるスキップリンク。
果たして、本当にそこまで否定されるべきUIなのでしょうか。
スキップリンクとは？
「スキップリンクとは？」へのパーマリンクスキップリンク、ジャンプリンク、コンテンツジャンプ──。いろいろな呼ばれ方をされながら、かつては多くのWebサイトで活躍していました。
WCAG 2.2の達成基準2.4.1 Bypass Blocksでは、複数ページに共通して登場するグローバルヘッダなどのUIをスキップできることが求められています。
A mechanism is available to bypass blocks of content that are repeated on multiple web pages.
この達成基準に適合するための方法として、スキップリンクの導入は非常にポピュラーな達成方法でした。
一見実装されていなさそうなページでも、読み込み直後に⇥Tabキーを押下することで表示されるケースがあります。
ブラウザの標準機能では代替できない
「ブラウザの標準機能では代替できない」へのパーマリンクスキップリンクは時代遅れだという意見が強くなったのは、HTMLの進化と支援技術によるサポートが充実した結果だと思っています。
しかし、晴眼者であるキーボード利用者にとってはどうでしょう。
Chrome・Safari・Firefoxのいずれも、スクリーンリーダなしでmain要素などのランドマークへジャンプする機能は実装されていません[1]。現状ではブラウザ拡張を利用するしかありません。
They are, however, only beneficial for users who have ways of navigating with this information. For example, adding headings to a document will only help users who can “jump” from heading to heading (such a possibility can be provided by browsers, browsers plugins, screen readers, or other assistive technologies). Techniques and solutions based on links will benefit all users (for example, sighted keyboard users with no other assistive technology) and are therefore recommended.
出典：Bypass Blocks of Repeated Content[proposed] | ACT Rule | WAI | W3C
ACT規則[2]をみてみると、main要素のようなランドマークがあれば2.4.1は適合となりますが、重要な補足情報も添えられています。
ランドマーク要素があること自体は、スクリーンリーダ利用者など「特定のユーザにしか有益ではない」ため、リンクを使ったソリューションは現在も推奨とされているのです。
だからスキップリンクをつけろ、という話ではない
「だからスキップリンクをつけろ、という話ではない」へのパーマリンクWCAGの達成基準を気にしたり、コントラスト比を気にしたり、スクリーンリーダで利用できるかどうかを気にしたりする意見は多く見かけます。一方で、本当にそれは使いやすいのか考えることを忘れてしまっている瞬間がないでしょうか。
そのUIがあることで、誰かが助かっているのか。逆に誰かにとって不利になっていないか。
要件はWebコンテンツによってさまざまだと思います。しかしながら、誰にとっても使いやすいこと自体が要件と衝突することはないでしょう[3]。
とくにフロントエンドの領域を担当しているならば、1人でも多くのユーザが使える品質を目指す職責を担っているはず。
ポインティングデバイスが使えない場合や、視覚情報が使えない場合などを想定して、実際に世に出す前のWebコンテンツを操作してみるだけでいいんです。そうすれば、途方もなく長い共通ヘッダやグローバルナビゲーションをタブキーで進んでいかなければいけない現実に直面するかもしれません。
その時に、本当に必要がないならスキップリンクをオミットすればいいし、必要だと感じたなら実装すればいい。
<body>
<p class="not-focus-within:sr-only focus-within:fixed left-0 top-0 z-50 bg-white">
<a href="#main">本文へジャンプ</a>
</p>
<header></header>
<main id="main" tabindex="-1">本文</main>
<footer></footer>
</body>TailwindCSSを導入しているなら、たったこれだけでおしまい。
もしも、あなたの関わるプロダクトのメインコンテンツまでの道のりが長いならば、スキップリンクを実装してほしいと思っているユーザがここに一人いますよ。
参考資料
「参考資料」へのパーマリンク