mainタグでスキップリンク

Webサイトを音声ブラウザ、スクリーンリーダーに対応させるコーディング方法は、時代とともに変わっていきました。

今回は、ページヘッダーを読み飛ばして、本文から読み上げるためのコーディング技法を振り返りながら、結局今はどうすればいいか考えます。

※2020年11月7日追記・編集

スキップリンクの最新の情報や考察をまとめました。

スキップリンクの時代

テーブルレイアウトからCSSレイアウトへ変化しだした2006年ごろだったと思います。

Webサイトの読み上げを想定して、コードの中に「本文へ移動」という隠しリンクを設置していたころがありました。

スキップリンクと呼ばれるものです。

CSSで読み上げ用のリンクを隠して、アクセシビリティを上げられる手法は、衝撃的だったのを覚えています。

role=”main”の時代

HTML5の時代となってから、状況がかわりました。

WAI-ARIA のランドマークの登場です。

本文のタグにrole=”main”を指定すれば、スキップリンクと同様の効果を発揮すると噂され、私もスキップリンクを実装するのをやめました。

W3Cがmainタグにrole=”main”を付けることを推奨したことで、<main role=”main”>という、コードが世の中に広がていきました。

mainタグのみの時代

<main role=”main”>の記述が見直され、<main>だけで良いと考えられるようになりました。

W3CのARIA項目では、<main role=”main”>という書き方は、するべきではない「Implicit ARIA semantics -should not be used」・・・と、書かれています。
(2017年3月現在)

W3C仕様書の矛盾で若干混乱しましたが、現在は単純に<main>だけで良いようです。

仕様上は、<main>だけでmainランドマークとして機能するため、わざわざスキップリンクを実装する必要がありません。

WAI-ARIA のランドマークは普及していない?

仕様と現実に差はないでしょうか?

実際に視覚障害者へ話を伺うと、ランドマークが楽だという話と、ランドマークって何?という話、両方聞きます。

スキップリンクがあったほうがいいという意見があり、悩ましいですが、まだmainランドマークだけに頼るのは早い印象でした。

結論は、スキップリンクを実装するべき。

もちろん、スキップするものがなければ実装不要です。

スキップリンクの最新の情報や実装方法はこちらにまとめています。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)