ランドマーク
Web ページにはランドマークと呼ばれる、ページの構造を表す要素があります。 ページの構造を適切に区切って適切な要素で表現することで、スクリーンリーダーなどの支援技術のユーザーがページ内を容易に移動できるようになります。
ランドマークを提供する HTML 要素
HTML ではランドマークを提供するための要素が用意されています。また、role属性を使うことで、ランドマークを提供することもできます。
ランドマークに関係する HTML 要素またはrole 属性は、以下のようなものがあります。
<header>,role="banner"<nav>,role="navigation"<main>,role="main"<footer>,role="contentinfo"<aside>,role="complementary"<form>,role="form"<search>,role="search"<section>,role="region"
関連するチェック
本文（メインコンテンツ）を表すランドマーク
これらのランドマークのなかで、最も重要なランドマークが、本文（メインコンテンツ）を表すメインランドマークです。 メイン メインランドマークが存在することで、ヘッダーやナビゲーションや広告などを読み飛ばし、そのページの最も重要な部分から読み始めることができるようになります。
良い例: メインコンテンツにメインランドマークを使う
このページは、冒頭の「ランドマーク」という見出しから、本文の終わりまでが <main> 要素で囲まれています。
- NVDA であれば、 DまたはShift+D キーによってランドマークを移動して、 メインランドマークの始まりに辿りつくことができます
- VoiceOver であれば、 VoiceOver+U キーによってローターを起動し、「ランドマークメニュー」でメインランドマークを選択することで、メインランドマークの始まりに辿りつくことができます
悪い例: メインランドマークがない
以下のページには、メインランドマークがありません。