構造で伝える

見た目を作るのは CSS ですが、読み上げに届くのは HTML の構造だけです。構造がなければ、どれだけ整えても何も伝わりません。

図を大きく見る

図の中身を文字で読む

• ✕ div で組む　○ 意味のある要素を使う
• div　header　banner
• div　nav　navigation
• div　main　main
• h1 / p
• div　footer　contentinfo
• 読み上げに伝わるもの　読み上げに伝わるもの
• テキストが上から順に読まれるだけ。　見出しだけを拾って飛べる。領域を飛び越えられる。
• 見出しで飛べない。領域で飛べない。　押せる要素はキーボードで到達し、Enterで実行される。
• 押せるかどうかも分からない。　追加の属性は要らない。適切な要素を選ぶだけ。
• 見出しはレベルを飛ばさない。h1 の次に h3 を置くと、間に階層があると誤解される。大きさは CSS で調整する。

ひと目で#

セマンティックHTML

見た目ではなく、意味で要素を選ぶ

見出し構造

h1〜h6 の階層。スクリーンリーダーは見出しだけを拾って移動できる

ランドマーク

header nav main footer aside。領域の単位で飛べる

代替テキスト

画像が果たしている役割を、文章で伝える

装飾画像

alt=""。省略ではなく、空にする

代替テキストの書き方#

判断の基準は「この画像がなかったら、代わりに何と書くか」。見た目の描写ではなく、文脈の中での役割を書きます。

同じ写真でも、置かれた場所が変われば書くことも変わります。画像そのものを見て決めるのではなく、そこに何の役目を負わせたかで決めます。

図を大きく見る

図の中身を文字で読む

• 同じ1枚の写真でも、置かれた場所で書くことが変わる
• 判断は「この画像がなかったら、代わりに何と書くか」。見た目の描写ではない。
• 商品ページの写真
• 売っている物そのもの。何が写っているかが情報になる
• alt="型抜きクッキー 12枚入り"
• 記事の中の挿絵
• 本文の話を支える1枚。文脈の中での役割を短く
• alt="作業台に並ぶ焼き上がったクッキー"
• 見出しの横の飾り　alt=""　読み上げても何も足さない。空にする。省略はしない
• 秋の焼き菓子フェア　文字が写っている画像　alt="秋の焼き菓子フェア"

間違えやすいところ#

• ✕<div> にクリックイベントを付けるキー操作も読み上げも効かない
• ✕見出しを大きさで選ぶ階層は意味で決め、大きさは CSS で調整する
• ✕見出しのレベルを飛ばすh1 の次に h3 を置くと、あいだに階層があると誤解される
• ✕一覧を <div> の連続で作る項目の数が読み上げに伝わらない
• ✕飾りの画像で alt を省く環境によってはファイル名が読み上げられる
• ✕「画像」「写真」と alt に書く画像であることはすでに伝わっている
• ✕<main> を複数置く1ページに1つ
• ✕同じ種類のランドマークを、名前なしで複数置く区別できない

アウトラインを見比べる#

スクリーンリーダーの利用者は、見出しの一覧を先に聞いて、読む場所を決めます。その一覧に映る形で、同じページの悪い例と良い例を並べました。

大きさは CSS で変えられるので、h の番号は意味の階層だけで決めます。「送料無料キャンペーン中」は見出しにせず、p を太字にします。

ページの骨組みはランドマークで区切ります。同じ種類が複数あるときだけ、aria-label で名前を付けて区別します。

<body>
  <a class="skip-link" href="#main">本文へスキップ</a>

  <header>
    <nav aria-label="メイン">…</nav>
  </header>

  <main id="main">
    <nav aria-label="パンくず">…</nav>
    <h1>ページの主題</h1>
    <article>…</article>
    <aside aria-label="関連する読みもの">…</aside>
  </main>

  <footer>
    <nav aria-label="フッター">…</nav>  <!-- nav が複数あるので aria-label で区別する -->
  </footer>
</body>

実物のパターン: スキップリンク／パンくず

実装#

直す例#

架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。

例として、引き継いだ LP の見出しが、すべて <div class="ttl-lg"> でした。画面上は見出しに見えます。読み上げで見出しの一覧を出すと、1件も出てきません。ページの構造がまるごと存在しないことになります。

直す順番は、上から3つです。まず h1 をページに1つ置き、章を h2、その下を h3 にします。選ぶ基準は大きさではなく、話の階層です。 h2 の見出しが小さく見えるなら、その見た目は CSS で戻します。次に header nav main footer を付けます。領域の単位で飛べるようになり、毎ページのナビを読み飛ばせます。最後に、<div> の連続で作られていた実績一覧を <ul> と <li> にします。これだけで「リスト、6項目」と件数が伝わります。

画像は22点ありました。alt はすべて alt="image"。1点ずつ、置かれた場所での役目を見て書き直します。飾りの区切り線は alt="" にします。空にするのと、属性ごと省くのは別です。省くと、環境によってはファイル名が読み上げられます。

確認する#

• 読み上げの見出し一覧に、画面で見出しに見えるものが全部出る
• h1 が1つで、h2 の次に h4 のような飛びがない
• 飾りの画像に alt="" があり、属性ごと省いたものが残っていない

使えるパターン#

• スキップリンク
• 和文本文段
• 図版とキャプション

このページで扱う語#

この話が要る場面#

このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。

この場面のほかの困り事と、そのまま貼れる部品は誰でも使えるようにするにまとめてある。逆引きには全188件。

出典#

• WCAG 2.2 達成基準 1.1.1 非テキストコンテンツ
• W3C WAI「An alt Decision Tree」

関連#

• ARIA標準の要素で足りないとき
• キーボードで使える操作の保証
• 情報設計見出しはページの目次
• 視覚階層論理の階層と見た目を一致させる