👫

はじめての人に送るWebアクセシビリティ

に公開
frontend
初心者向け
アクセシビリティ
tech

対象読者

  • アクセシビリティを学びたての人
  • ふんわり理解の人

アクセシビリティの原則

まず アクセシビリティには完璧なものは存在しないので適宜取捨選択をすることが重要 です。
アクセシビリティガイドラインの項目からもわかる通りガイドライン全てを遵守することは不可能です。
そのため、全てのユーザーに通ずる完璧を目指すのではなく、プロダクトの目的やユーザー層、利用シーンに応じて必要なアクセシビリティ要件を選定し、取捨選択を行う姿勢が求められます。

特に、全てのユーザーにとって同等の操作性や情報へのアクセスを保証するには、設計・実装の段階での配慮だけでなく、ユーザーテストやフィードバックを通じた継続的な見直しが不可欠です。
例えば、ボタンなどにスクリーンリーダー向けの文章を挿入することがありますが、それは晴眼者が使用する際に得られる情報と同じでなければなりません。こうした気を配りすぎるがゆえのユーザーの属性によって情報に差異が生まれる状況を是正していくこと意識も必要です。

Example.tsx
<button onClick={handleClick} aria-label="ラジオFM音声の再生">
  <PlayIcon /> 🔊
</button>
<!-- ボタンのアイコンとリーダーで得られる情報量が違う -->

また、アクセシビリティ対応をチーム内の一部の専門メンバーに任せきりにせず、チーム全体で方針や基本的な知識を共有し、全員が意識的に取り組む体制を築くことが、持続可能で実効性のある改善につながります。

結果として、特定のユーザーのみに配慮するのではなく、誰にとっても快適でストレスのないユーザー体験を実現することが、アクセシビリティの本質だと言えるでしょう。

まとめると

  • 完璧なアクセシビリティはないので適宜取捨選択をする
  • 誰が何でアクセスしてどんな状況で使っても同じパフォーマンス、ユーザー体験を提供すること。
  • チーム全員でアクセシビリティに関する考えや方針を共有すること。誰か一人のメンバーに知識を依存させないこと

特にこれらの原則が個人、チーム開発規模の大小に関わらず重要になってくる原則と言えるでしょう。

引用、参考にさせていただいたREADME:
https://github.com/Heydon/principles-of-web-accessibility/blob/main/README_ja.md

Lighthouseの採点項目

Lighthouse のアクセシビリティ監査は、ページ内の要素が支援技術や視覚ユーザーに適切に機能するかを自動チェックし、各監査をパス・ファイルで評価した上で、0–100 のスコアを算出します。スコア対象となる自動監査（「採点項目」）と、手動での確認を要する監査（「Manual checks」）があり、自動監査はすべて同じ重みではなく、重要度に応じたウェイトで採点されます。以下のアコーディオンに主な採点項目を掲載したので、余裕があったらご覧ください。

タイトル

  • <html> 要素に lang 属性があるか
    ページ全体の表示言語を示す lang 属性が <html> に正しく設定されているか

  • <title> 要素が存在するか
    ブラウザタブや検索結果に表示されるページタイトルが <head> 内の <title> で定義されているか

  • 背景と前景の色のコントラスト比が十分か
    テキストと背景の色差が WCAG の基準（最低 4.5:1 など）を満たしているか

  • ボタンにアクセシブルな名前があるか
    <button> 要素にテキストコンテンツや aria-label が設定され、スクリーンリーダーで正しく読み上げられるか

  • 画像要素に alt 属性があるか
    <img> 要素に意味を伝える代替テキストが alt 属性として設定されているか

  • リンクに識別可能な名前があるか
    <a> 要素にリンク先や目的がわかるテキストや aria-label が設定され、支援技術で理解できるか

  • フォーム要素にラベルが関連付けられているか
    <input> や <select> などのフォーム要素に <label> または aria-label／aria-labelledby で適切にラベル付けされているか

  • role="dialog" または role="alertdialog" 要素に名前があるか
    モーダルダイアログが aria-labelledby や aria-label で名称付けされ、内容が何であるかを支援技術に伝えられるか

  • ARIA 属性名・値が仕様に沿って正しいか
    aria-* 属性が正しい名前と許容される値で記述されているか

  • aria-hidden="true" 要素内にフォーカス可能な子孫がないか
    非表示 (aria-hidden) とされた要素内にタブフォーカスやキーボード操作が到達しないか

  • フォーカス可能な要素の id 属性が一意か
    複数の要素に同一 id が設定されていないかを検証し、スクリプトやラベル紐付けの競合を防ぐ

  • 見出し要素が論理的な階層順になっているか
    <h1> から <h6> までが順序を崩さずに使われ、ページ構造が把握しやすいか

  • 定義リスト（<dl>）の構造が正しいか
    <dl> 内に正しく <dt> と <dd> の組が順序どおり含まれているか

  • テーブルにキャプションやヘッダーが正しく定義されているか
    <table> に <caption> と <th> または scope 属性があり、セルの意味が明示されているか

  • 動画要素に字幕用の <track kind="captions"> が含まれているか
    <video> 要素に字幕トラックが設定され、聴覚障害者も内容を理解できるか

基本的なアクセシビリティの紹介

ここでは基本的にどのアプリケーションでも用いられる要素を例に実装の基本ポイントを具体的に紹介していきます。

ボタン

実装

<button
  type="button"
  onClick={togglePlay}
  aria-label={isPlaying ? 'ミュート' : '音声の再生'}
  aria-pressed={isPlaying}
  className="focus-visible:ring rounded p-2"
>
  {isPlaying
    ? <VolumeX className="h-6 w-6" />
    : <Play className="h-6 w-6" />}
</button>

要点

  • aria-label を使って、視覚的にアイコンしか表示されていない場合でも、スクリーンリーダーで意味が伝わるようにする。

  • ボタンの用途が視覚的にわかる場合でも、キーボード操作や読み上げ対応を意識して、type属性 (button, submit, reset) も適切に設定する。

  • 可能な限り <div> ではなく <button> を使うことで、キーボード操作（Tabキーでの移動やEnterキーでの実行）にも対応。

  • トグルボタンなど状態を持つ場合は aria-pressed や aria-expanded で現在状態を明示する。

入力欄

実装

<label htmlFor="email" className="block font-medium">
  メールアドレス
</label>
<input
  id="email"
  name="email"
  type="email"
  required
  placeholder="example@example.com"
  className="mt-1 block w-full border rounded px-2 py-1 focus-visible:ring"
/>

要点

  • label を使って、入力欄が何を意味しているのかを明示。

  • htmlFor（Reactの場合はhtmlFor）属性を使って、ラベルと入力欄を紐付ける。

  • required や type="email" のような HTML標準のバリデーション属性を活用することで、支援技術との連携が自然になる。

  • placeholder だけに意味を持たせず、補足的に使う。必ずラベルを別に用意する。

  • Tab 順序が自然か（フォーム内の要素を前後移動できるか）を確認する。

画像（視覚的コンテンツ）

実装

<img
  src="/mountain.jpg"
  srcSet="/mountain.jpg 1x, /mountain@2x.jpg 2x"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="雪をかぶった山の風景"
  className="rounded"
/>

<a
  href="/home"
  aria-label="ホームへ戻る"
  className="inline-block focus-visible:ring rounded p-1"
>
  <img
    src="/home-icon.svg"
    alt=""
    aria-hidden="true"
    className="h-8 w-8"
  />
</a>

要点

  • alt 属性を必ず記述し、画像の意味を簡潔にテキストで伝える。

  • 装飾目的の画像は alt=""（空文字）にすることで、スクリーンリーダーの読み上げ対象から除外できる。

  • リンク付き画像は、リンクの意味が画像だけに依存しないように、テキストやaria-labelを補う。

  • srcset／sizes を使って、デバイスに適切な解像度の画像を配信。

見出し（構造的なラベル）

実装

<h1>お問い合わせフォーム</h1>
<h2>個人情報の入力</h2>

要点

  • ページには1つの<h1>タグを設置し、見出し階層（h1〜h6）は順序を守る。

  • セクションの区切りや内容を理解しやすくするため、見出しは意味的な構造を表現するために使う（見た目のサイズ調整にはclassNameを使う）。

  • スクリーンリーダーのユーザーは見出しをナビゲーションの手がかりにするため、見出し構造を崩さないことが重要。

おすすめのアクセシビリティガイドライン集

https://waic.jp/translations/WCAG22/

https://a11y-guidelines.freee.co.jp/index.html

  • こちらは公的だったり少しお堅めのサイトを作るときに特に有用

https://design.digital.go.jp/

Discussion