意味のあるページ構造

ほとんどのページは、ヘッダー、メニュー、本文、フッターというだいたい同じ形をしています。HTMLにはそれぞれの要素があり、スクリーンリーダーでそこへすぐに移動できます。

divだらけからランドマークへ

長い間、ページはheaderやmenuのようなクラス名をつけた <div> 要素でつくられていました。<div> はまったく意味のない汎用の箱なので、手がかりはクラス名だけで、それが見えるのはコードを読む人だけでした。今のHTMLには、それぞれの領域が何かを示す要素があります。ブラウザー、検索エンジン、支援技術はそれを理解し、スクリーンリーダーの利用者はランドマークとよばれるこれらの領域を一覧にして、目の見える人がレイアウトをちらっと見るのと同じように、目的の領域へ移動できます。

主な領域

• <header>：導入部分。ふつうはサイト名やロゴで、メインメニューが入ることも多い。記事が自分のheaderをもつこともある。
• <nav>：サイトのメニューや目次のような、主要なナビゲーションのリンクのまとまり。リンクのまとまりがすべてnavを必要とするわけではない。
• <main>：このページだけの内容。表示される <main> は一つのページにちょうど一つにし、header、nav、aside、footerの中には入れない。
• <article>：ブログの記事、ニュース、商品カードのように、それだけで意味が通じる独立した内容。
• <section>：ページや記事の、テーマごとの部分。ふつうは自分の見出しをもつ。
• <aside>：サイドバー、用語の囲み、関連リンクのように、本文に関係はあるが本文とは別の内容。
• <footer>：作者、著作権、連絡先のリンクのような、しめくくりの情報。

これらの要素が表すのは意味で、位置ではありません。<nav> が上にある必要はなく、<aside> が右にある必要もありません。スマートフォンでは、asideはたいてい本文の下にきます。位置はCSSで決まります。見出しの段階を大きさではなく構造で選んだのと同じように、内容が何かを考えて要素を選びましょう。

articleかsectionか

考えるべきなのは、その部分がほかの場所、たとえばニュースリーダーの中やリンクとして共有されたときに、それだけで意味が通じるかどうかです。通じるなら <article> です。レシピの「材料」の部分のように、もっと大きなものの一部としてしか意味をなさないなら <section> です。どちらもふつうは見出しで始めます。articleはsectionを含むことができ、「最新の投稿」のsectionがいくつもの投稿カードをもつように、sectionがarticleを含むこともできます。

divとspanにも出番はある

合う要素がないときは、ブロックには <div> を、行の中の数語には <span> を使います。カードを格子状に並べる <div class="cards"> のように、CSSのためのとっかかりとして便利です。きまりは、まず意味のある要素を探し、内容を表すものがないときだけ汎用の要素にすることです。divだけでできたページも動きますが、コードを見ない人すべてに構造が隠されてしまいます。

簡単な確かめ方があります。CSSを切ってページを開くか、ブラウザーの拡張機能が表示する見出しとランドマークのアウトラインを読んでみましょう。ヘッダー、メニュー、本文、フッターがはっきりしていて、筋の通った順に読めるなら、構造はきちんとはたらいています。

ARIAよりもネイティブの要素を

W3CのWAI-ARIAという標準の一部である role 属性を、<div role="navigation"> のように見かけることがあります。これは汎用の要素に、支援技術向けの意味を与えます。ARIAの使い方についてのW3Cのガイドは、簡単なきまりから始まります。必要な意味をもつネイティブのHTML要素がすでにあるなら、そちらを使うことです。<nav> のほうが短く、どこでも動き、ある場所では書いて別の場所では書き忘れる、ということもありません。ボタンも同じです。本物の <button> は何もしなくてもTabでフォーカスでき、EnterやSpaceで押せますが、クリックできる <div> で同じことをするには追加のコードが必要です。