Webアクセシビリティは、すべてのユーザーがウェブサイトを快適に利用できるようにするための重要な要素です。その中でも、HTMLのマークアップはアクセシビリティに大きな影響を与えます。適切なHTMLを使えば、スクリーンリーダーやキーボード操作などを利用するユーザーにも使いやすいウェブサイトが実現できますが、誤ったHTMLはアクセシビリティに悪影響を与え、ユーザー体験を損ねる可能性があります。本記事では、良いHTMLと悪いHTMLの具体例を比較しながら、アクセシビリティを向上させるためのポイントを紹介します。
良いHTMLと悪いHTMLの比較
1. 見出しの使用
良いHTMLの例
html
<h1>サイトのタイトル</h1>
<h2>主要なセクション</h2>
<h3>サブセクション</h3>
ポイント
- 見出しタグ（<h1>〜<h6>）を正しい階層で使用している。
- 見出しはページの構造を明確にし、スクリーンリーダーが内容を把握しやすくする。
- キーボードや支援技術を使って、簡単にセクション間を移動できるようにする。
悪いHTMLの例
html
<div class="title">サイトのタイトル</div>
<div class="section">主要なセクション</div>
<div class="sub-section">サブセクション</div>
ポイント
- 見出しに<div>タグを使用しているため、スクリーンリーダーはこれらを見出しとして認識できない。
- 正しい階層を示すマークアップが欠けており、ページの構造が不明確になる。
2. 代替テキスト（alt属性）の使用
良いHTMLの例
<img src="flower.jpg" alt="赤いバラの写真">
ポイント 画像に代替テキスト（alt属性）があり、視覚障害者に画像の内容を伝える。 スクリーンリーダーが画像の意味を正しく読み上げるため、視覚的な情報を共有できる。
悪いHTMLの例
<img src="flower.jpg" alt="">
ポイント alt属性が空で、画像の内容がわからない。 重要な画像には適切な代替テキストを設定することが必須。さもなくば、視覚障害者は画像の情報を得られない。
3. リンクのテキスト
良いHTMLの例
<a href="about.html">会社概要を読む</a>
ポイント
- リンクテキストは「会社概要を読む」という具体的な内容で、リンク先が明確にわかる。
- スクリーンリーダーで読み上げられたときにも、リンクの目的が伝わる。
悪いHTMLの例
<a href="about.html">こちらをクリック</a>
ポイント
- 「こちらをクリック」ではリンク先の内容がわからず、ユーザーはリンクをたどる必要がある。
- スクリーンリーダー利用者にとって、このような曖昧なリンクは混乱の元になる。
4. フォームのラベル
良いHTMLの例
<label for="name">お名前</label>
<input type="text" id="name" name="name">
ポイント
- フォームの入力フィールドには適切なラベルが設定されており、スクリーンリーダーが「お名前」として読み上げることができる。
- 入力欄の内容が明確に説明されるため、すべてのユーザーが適切にフォームを利用できる。
悪いHTMLの例
<input type="text" placeholder="お名前">
ポイント
- placeholder属性のみを使用しており、視覚障害者には適切なラベルが読み上げられない。
- プレースホルダーは入力内容のヒントとして使うべきであり、ラベルとして代用してはならない。
5. 色のコントラスト
良いHTMLの例
<p style="color: #000; background-color: #fff;">このテキストは高コントラストです。</p>
ポイント テキストと背景色のコントラストが高く、視覚的に見やすい。 色覚に問題があるユーザーや、低視力のユーザーにも配慮したデザイン。
悪いHTMLの例
<p style="color: #888; background-color: #eee;">このテキストはコントラストが低く、読みにくいです。</p>
ポイント
- コントラストが低すぎて、特に視覚障害のあるユーザーには読みにくい。
- 色覚に関わらず、十分なコントラスト比を保つことが重要。
- アクセシビリティを高めるためのヒント
- Webアクセシビリティを向上させるためには、HTMLのマークアップの正確さが不可欠です。以下のポイントを意識することで、すべてのユーザーが快適にウェブサイトを利用できるようになります。
意味のあるタグを使う ページの構造を明確にし、適切なHTML要素（<h1>〜<h6>、<p>、<ul>など）を使用することで、支援技術が正しくコンテンツを解釈できるようにする。
代替テキストを忘れない 画像、ビデオ、オーディオには必ず代替テキストや字幕を追加し、視覚や聴覚に障害のあるユーザーにも情報が伝わるようにする。
インタラクティブ要素にはラベルを付ける ボタンやリンク、フォームには明確なラベルをつけることで、どの操作が必要か、何を期待すべきかをすべてのユーザーにわかりやすく示す。
視覚的なデザインにも配慮する コントラストやフォントサイズに注意し、色覚に制約のあるユーザーにも使いやすいデザインを心がける。
キーボード操作に対応する すべてのインタラクティブ要素がキーボードのみで操作できることを確認し、マウスを使えないユーザーにも対応する。
まとめ
良いHTMLを使用することで、Webアクセシビリティを大きく向上させることができます。特に、見出し構造、代替テキスト、リンクテキスト、フォームラベル、コントラストといった基本的なポイントを守ることが重要です。これにより、視覚障害、聴覚障害、運動制約、あるいは一時的な状況でウェブサイトを利用しているすべてのユーザーが、快適にサイトを利用できるようになります。Webアクセシビリティは、すべての人にとって使いやすいインターネットを目指す上で不可欠な要素です。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティウィジェットツールをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。