Webアクセシビリティは、年齢、利用環境、身体の状態にかかわらず、できるだけ多くの人がWebサイトを利用できるようにする考え方です。
その土台になるのがHTMLです。
見た目を整えるだけでは、スクリーンリーダーなどの支援技術に、見出し、画像の意味、リンク先、入力欄の役割が十分に伝わらない場合があります。
HTMLは、画面に何を置くかだけでなく、その情報が何の役割を持つかをブラウザや支援技術へ伝えるための手段です。
この役割を意識して書かれたHTMLを、ここでは意味のあるHTMLと呼びます。
HTMLで伝えるべき情報
アクセシビリティを高めるHTMLでは、見た目ではなく構造と意味を先に考えます。
太字で大きく表示された文字があっても、HTML上で見出しになっていなければ、支援技術はそれを見出しとして扱えません。
画像、リンク、フォームも同じです。
見た目では理解できる情報を、HTML上でも理解できる形にしておく必要があります。
| 確認する要素 | 避けたい状態 | 改善の方向 |
|---|---|---|
| 見出し | <div>だけでタイトル風に見せる |
<h2>や<h3>で階層を示す |
| 画像 | 内容を伝える画像なのに説明がない | alt属性で画像の意味を書く |
| リンク | 「こちら」だけで行き先がわからない | リンク先の内容がわかる文言にする |
| フォーム | 入力欄にプレースホルダーだけを置く | <label>で入力欄の名前を結び付ける |
| 表示 | 文字と背景の差が小さい | 読みにくさが出ない配色にする |
見出しはページの地図になる
見出しは、文章の区切りを示すだけの装飾ではありません。
ページの中にどのような内容があり、どの順番で並んでいるかを伝える地図の役割を持ちます。
見出しを正しい階層で書くと、読者は内容を追いやすくなり、支援技術を使う読者もセクション間を移動しやすくなります。
良い例
<h1>サイトのタイトル</h1>
<h2>主要なセクション</h2>
<h3>サブセクション</h3>この例では、ページ全体のタイトル、主要なセクション、その下のサブセクションが順番に表されています。
見出しの数字は、文字サイズを選ぶためではなく、構造上の深さを示すために使います。
悪い例
<div class="title">サイトのタイトル</div>
<div class="section">主要なセクション</div>
<div class="sub-section">サブセクション</div><div>にクラス名を付けても、HTML上の見出しにはなりません。
CSSで大きく表示できても、支援技術にとっては通常の領域として扱われるため、ページ構造が伝わりにくくなります。
代替テキストは画像の役割を書く
代替テキストは、画像を見られない読者に画像の意味を伝えるためのテキストです。
ここで大切なのは、画像ファイルの名前ではなく、その画像が本文の中で何を伝えているかを書くことです。
商品写真、説明図、案内に必要な画像のように、内容理解に関わる画像では、空のalt属性のままにしないほうが安全です。
良い例
<img src="flower.jpg" alt="赤いバラの写真">この例では、画像を見られない読者にも、写っている内容が伝わります。
本文の理解に必要な画像であれば、短く具体的に説明します。
悪い例
<img src="flower.jpg" alt="">内容を伝える画像でalt属性が空だと、画像から得られる情報が伝わりません。
画像が本文の説明を補っている場合は、読者が同じ意味を受け取れるように代替テキストを用意します。
リンクテキストだけで行き先がわかるようにする
リンクは、前後の文章を読まなくても行き先がある程度わかる文言にします。
支援技術ではリンクだけを一覧して移動する使い方があるため、「こちら」や「クリック」だけでは判断材料が足りません。
リンクとボタンの名前付けを詳しく確認したい場合は、リンクとボタンのアクセシビリティも参考になります。
良い例
<a href="about.html">会社概要を読む</a>このリンクテキストなら、リンク先が会社概要のページだとわかります。
リンク先で何ができるか、何を読めるかを文言に含めると、迷いにくくなります。
悪い例
<a href="about.html">こちらをクリック</a>「こちらをクリック」だけでは、行き先も目的もわかりません。
読者は前後の文脈を探す必要があり、読み上げ環境では特に負担が増えます。
フォームには見えるラベルを用意する
フォームの入力欄には、何を入力する欄なのかを示すラベルが必要です。
ラベルは、画面上の説明であると同時に、支援技術が入力欄の名前を読み上げるための手がかりにもなります。
プレースホルダーは入力例や補足には使えますが、入力欄の名前そのものの代わりにはしにくい要素です。
フォームラベルの付け方を押さえておくと、入力画面全体を整理しやすくなります。
良い例
<label for="name">お名前</label>
<input type="text" id="name" name="name">labelのfor属性と、入力欄のidを対応させると、「お名前」というラベルと入力欄が結び付きます。
画面を見る読者にも、読み上げを使う読者にも、入力欄の意味が伝わります。
悪い例
<input type="text" placeholder="お名前">プレースホルダーだけでは、入力中に表示が消える場合があり、常に確認できるラベルとしては不十分です。
入力欄の意味を安定して伝えるには、<label>を使って明示します。
コントラストとキーボード操作も一緒に確認する
HTMLの構造が正しくても、画面上の文字が読みにくければ使いやすいページにはなりません。
文字色と背景色の差が小さいと、低視力の読者や色の見え方に違いがある読者にとって読みづらくなります。
読みやすい例
<p style="color: #000; background-color: #fff;">このテキストは高コントラストです。</p>黒い文字と白い背景のように差がはっきりしている組み合わせは、本文を読み取りやすくします。
読みにくい例
<p style="color: #888; background-color: #eee;">このテキストはコントラストが低く、読みにくいです。</p>文字と背景の差が小さいと、文字そのものを認識しづらくなります。
リンク、ボタン、フォームなどの操作できる要素では、見た目に加えてキーボード操作とフォーカス表示も確認します。
マウスを使わなくても移動でき、今どこを操作しているかがわかる状態にしておくことが大切です。
公開前の確認リスト
HTMLを見直すときは、要素ごとに分けて確認すると抜け漏れを減らせます。
- ページ内の見出しが
<h2>、<h3>のように順序立っているか。 - 内容理解に必要な画像に、短く具体的な代替テキストがあるか。
- リンクテキストだけで、リンク先の内容がわかるか。
- フォームの入力欄に、対応する
<label>があるか。 - 文字と背景の差が小さすぎず、キーボードだけでも操作できるか。
まずはこの範囲を直すだけでも、HTMLから伝わる情報はかなり整理されます。
さらに実務全体で取り組む場合は、Webアクセシビリティの基本と改善ポイントもあわせて確認すると、設計や運用の観点まで広げて考えられます。
まとめ
Webアクセシビリティを高めるHTMLでは、見た目だけでなく、情報の意味と構造を伝えることが欠かせません。
見出し、代替テキスト、リンクテキスト、フォームラベル、コントラスト、キーボード操作を確認すると、読者が迷う箇所を減らせます。
小さなマークアップの違いでも、支援技術を使う読者にとっては大きな差になります。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティウィジェットツールをリリースしております。
アクセシビリティ向上にご興味がある方は、ぜひ詳細をご覧ください。