こんにちは。アイレット株式会社デザイン事業部の辻です。
2024年4月1日から、障害者差別解消法の改正により、民間事業者も「合理的配慮」の提供が義務化され、制作者もウェブアクセシビリティを確保することが求められるようになっていきます。
実装する時につまづきやすい点を説明していこうと思います。

マークアップ担当が意識すべきこと

すべてのユーザーがウェブコンテンツにアクセスしやすくするために、アクセシビリティを意識した HTML のマークアップをする必要があります。

  • セマンティックな HTML を書く
  • WAI-ARIA(ウェイアリア)を使用する

もちろん、この2つだけではありません。
今回は比較的とっつきやすいセマンティックHTMLと、逆にアクセシビリティ以外では馴染が薄いWAI-ARIA(ウェイアリア)の2つを取り上げます。

セマンティックな HTML を書く

セマンティックな HTML を書くことで、HTML 要素に意味を持たせコンテンツの構造を明確にできます。
これにより、スクリーンリーダーなどの支援技術がコンテンツを理解しやすくなります。

具体的には<header>, <main>, <footer>, <h●>, <nav>, <section>, <aside>などのセマンティック要素です。
これらの要素は暗黙的なロール（役割）を持っているため、ページの構造が明確になり、スクリーンリーダーを使用するユーザーがコンテンツを理解しやすくなります。

<header>
　<h1>サービス</h1>
　<nav>
　　<ol>
　　　<li><a href="/">トップ</a></li>
　　　<li><a href="/service">サービス</a></li>
　　</ol>
　</nav>
</header>
<nav>
　<ol>
　　<li><a href="/">トップ</a></li>
　　<li>サービス</li>
　</ol>
</nav>
<section>
　<h2>サービス</h2>
</section>
<aside>
　省略…
</aside>
<footer>
　©©
</footer>

ex.）セマンティックではないパンくず

<div>

 <a href="/">TOP</a>
　<p>サービス</p>
</div>

セマンティック要素は他にもあり、後ほど少し紹介します。

WAI-ARIA(ウェイアリア)を使用する

ARIA（Accessible Rich Internet Applications）属性は、スクリーンリーダーなどの支援技術に対して、Webコンテンツの構造や状態を正確に伝えるための属性です。
動的コンテンツやJavaScriptで生成したコンテンツなど、HTMLのセマンティクスだけでは情報が不足する場合に、ARIA属性を使用することでアクセシビリティを向上させることができます。

aria-label属性

要素にラベルを直接指定します。
視覚的に表示されるラベルがなくても、支援技術がその要素の意味を理解できるようになります。

<button aria-label="削除">
　<i class="icon-trash"></i>
</button>

aria-labelledby属性

他要素のidを参照し、その要素のラベルを指定します。複数の要素を組み合わせてラベルを作成することができます。

<label id="username-label">ユーザー名</label>
<input type="text" aria-labelledby="username-label" />

ラベルを指定するにより、要素の意味を伝えるだけではなく、音声読み上げでも【削除】や【ユーザー名】と読み上げられます。

aria-live属性

コンテンツが動的に変化する際に、その変化を支援技術に通知します。

  • aria-live=”polite”（ポライト）
    更新があった場合、他のコンテンツが読み上げ終わった後に通知
  • aria-live=”assertive”（アサーティブ）
    更新があった場合、直ちに通知
    重要度が高い更新に適している
<div class="content" aria-live="polite">
　<!-- 動的に変化する内容 -->
</div>

モーダルダイアログ

  • role=”dialog”: ダイアログの役割
  • aria-labelledby: ダイアログのタイトルの参照ID
  • aria-describedby: ダイアログの文章の参照ID
  • aria-modal=”true”: フォーカス管理を適切に処理（モーダルが開いている間、背景のコンテンツにフォーカスが移動しないようにする）
<div role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-description" aria-modal="true">
　<h2 id="dialog-title">モーダルタイトル</h2>
　<p id="dialog-description">これはモーダルの内容です。</p>
　<button aria-label="閉じる">×</button>
</div>

上記をセマンティック要素で書き換えると、<dialog>タグが暗黙的role="dialog"を有しているため、role属性が不要になります。

<dialog>
　<h2 id="dialog-title">モーダルタイトル</h2>
　<p id="dialog-description">これはモーダルの内容です。</p>
　<button aria-label="閉じる">×</button>
</dialog>

アコーディオンメニュー

  • role=”group”: グループ化された要素
  • aria-labelledby: グループのタイトルの参照ID
  • aria-describedby: グループの文章の参照ID
<div role="group" aria-labelledby="group-title" aria-describedby="group-description">
　<h2 id="group-title">アコーディオンタイトル</h2>
　<p id="group-description">これはアコーディオンの内容です。</p>
</div>

上記をセマンティック要素で書き換えると、<details>タグが暗黙的にrole="group"を有しているため、role属性が不要になります。
<details>タグと<summary>タグの組み合わせで十分にアクセシブルな実装となり、その他の属性も不要になります。

<details>
　<summary>アコーディオンタイトル</summary>
　<p>これはアコーディオンの内容です。</p>
</details>

ARIA属性は適切な属性を正しく設定

ドキュメントなどを参考に、各属性の役割と使用方法を理解しましょう。
ARIA属性を設定した後は、スクリーンリーダーやアクセシビリティチェックツールを使用して、実際の動作を確認することを推奨します。
また、むやみにARIA属性を追加するのではなく、HTMLのセマンティクスを優先し、必要な場合にのみ使用することが大切です。

まとめ

すべてのユーザーがウェブコンテンツにアクセスしやすくするために、アクセシビリティを意識した HTML のマークアップをしましょう。

そのためには以下を意識することが重要です。

  • セマンティックな HTML を書く
  • WAI-ARIA(ウェイアリア)を使用する
    • 各属性の役割と使用方法を理解する
    • 設定した後は、ツールを使用して実際の動作を確認する