アクセシビリティ
Accessibility ・ あくせしびりてぃ
障害や環境の違いによらず誰もがWebを使えるようにする設計。HTMLの意味づけが出発点。
✦ 30秒で試す — 航海スクリーンリーダーは、画面の見た目を1ピクセルも読まないキーボードだけで操作する人にとって、この保存ボタンは？予想してみる概要
アクセシビリティ（accessibility、先頭のaと末尾のyの間に11文字あることから「a11y」と略されます）は、視覚・聴覚・運動・認知などの障害や、利用環境の違いによらず、誰もがWebのコンテンツと機能を使えるようにする設計の考え方と技術の総称です。画面を読み上げるスクリーンリーダー、キーボードだけでの操作、拡大表示、音声入力 — 人はさまざまな方法でWebにアクセスしており、アクセシビリティはその多様な入口すべてに対してページを開いておくことを意味します。
具体的な作業としては、HTML を意味に沿って正しく書くこと、キーボードだけで全操作を完結できるようにすること、十分な色コントラストを確保すること、画像に代替テキストを付けることなどが中心です。国際的な基準として W3C の WCAG（Web Content Accessibility Guidelines）があり、達成基準がA・AA・AAAの3段階で定義されています。多くの法制度や調達基準は「AA準拠」を実質的な合格ラインとしています。
なぜ生まれたか
Webの原点は、もともとアクセシブルでした。HTML は文書の構造を記述する言語であり、構造さえ正しければ、読み上げソフトも点字ディスプレイも同じ文書を各自の方法で提示できたからです。Webの発明者ティム・バーナーズ＝リーは「Webの力はその普遍性にある。障害の有無にかかわらず誰もがアクセスできることが本質的な要素だ」と述べています。
ところがWebが視覚的にリッチになるにつれ、「画面が見えて、マウスでクリックできる」ことを暗黙の前提としたUIが増えていきました。見出しに見えるだけの装飾された div、クリックできるだけの span、色だけで伝えられるエラー表示 — 見た目は同じでも、そこには支援技術が読み取れる意味が残っていません。JavaScript で動的に組み立てられる SPA の時代にはこの傾向が加速しました。ページ全体を読み込み直さずに中身だけを差し替えるため、ブラウザが従来やっていた「新しいページに来たことを伝え、フォーカスを先頭に戻す」が起きず、画面が切り替わったことすらスクリーンリーダーに伝わらないアプリが量産されたのです。
こうした課題に対して、W3C は1999年に WCAG 1.0 を、2008年に技術に依存しない形で書き直した WCAG 2.0 を定め、2014年には HTML だけでは表せない動的な部品の意味を補う WAI-ARIA 1.0 を勧告しました。アクセシビリティは「新しく足す機能」ではなく、Webが本来持っていた普遍性を、リッチなUIの時代にも保ち続けるための体系として整備されてきたのです。その中心には一貫して「見た目ではなく意味を記述する」という原則があります。
詳細
アクセシビリティツリー — 支援技術への橋
仕組みの中心にあるのがアクセシビリティツリーです。ブラウザは DOM と CSS からページを描画するのと並行して、各要素の「役割（ロール: これはボタンか、見出しか）」「名前（アクセシブルネーム: 何のボタンか）」「状態（押されているか、展開されているか）」を抽出した別の木構造を組み立てます。スクリーンリーダーなどの支援技術は、画面のピクセルではなく、OS が用意するアクセシビリティ API（Windows の UI Automation、macOS の NSAccessibility など）を通じてこの木を読み取ってユーザーに提示します。つまり、ブラウザのレンダリングが「目で見る人向けの出力」だとすれば、アクセシビリティツリーは「支援技術向けのもうひとつの出力」であり、ここに意味が載っていないUIは、どれだけ美しくても支援技術からは空白なのです。
セマンティックHTMLが最初の一歩、ARIAは最後の手段
このツリーに意味を載せる最も確実で安価な方法が、セマンティック（意味的）な HTML を使うことです。<button> と書けば、ロール「ボタン」、キーボードフォーカス、EnterとSpaceでの発火、無効化状態の伝達まで、ブラウザがすべて無償で提供します。同じ見た目を <div onclick> で作った場合、ツリーに載るのは役割のない箱（generic）と文字だけで、Tab キーの巡回にも入りません。見出しは <h1>〜<h6>、ナビゲーションは <nav>、入力欄には <label> — 適材適所の要素選びこそがアクセシビリティの土台です。
素のHTMLで表現できないUI（タブ、ツリー表示、コンボボックスなど）のために用意されているのが WAI-ARIA です。role や aria-expanded・aria-pressed などの属性でアクセシビリティツリー上の役割・状態を明示的に記述できます。ただしARIAは「支援技術にそう伝える」だけで、振る舞いは一切付いてきません。<div role="button"> はツリーに「button」と載りますが、tabindex="0" を足さなければ Tab で届かず、keydown で Enter と Space を拾う処理を自作しなければキーボードでは押せません。ARIA の使い方の第一原則は「ネイティブのHTML要素で足りるならそれを使え」であり、「ARIAがないより、間違ったARIAの方が悪い」というのが実務の合言葉です。まず正しいHTML、どうしても足りないときだけARIA、が正しい順序です。
下の部品で確かめてください。3つの「ボタン」は見た目も、マウスで押したときの動きも同じです。実装を差し替えながら Tab・Enter・読み上げを試すと、右の木に何が載り、何が載らないかが変わります。
画面（本物の HTML 要素）
変更を保存しますか？
アクセシビリティツリー（支援技術が読む木）
読み上げ—
3つとも同じ見た目の「ボタン」です。まず Tab を押して、キーボードだけで3つに届くか確かめてください（下のキー、または実物のキーボード）。
キーボードとフォーカス管理
運動障害のあるユーザーや、スクリーンリーダーのユーザーの多くはマウスを使いません。すべての操作がTabキーでの移動とEnter/Spaceで完結すること、今どこにフォーカスがあるかが目視できること（outline: none でフォーカスリングを消すのは典型的なやらかしです。消すなら :focus-visible で代わりの表示を用意します）が基本です。Tab の順番は DOM の並び順で決まるので、CSS で見た目の順番だけを入れ替えると、フォーカスが画面の上を飛び回る原因になります。
動的なUIでは、フォーカスを「どこへ移すか」まで設計する必要があります。代表例がモーダルダイアログです。開いたらフォーカスをダイアログの中へ移し、Tab がダイアログの外へ抜けないように閉じ込め（フォーカストラップ）、Esc で閉じたら開く前の要素へフォーカスを戻します。いまは <dialog> 要素の showModal() を使うと、背後のページが操作できない状態（inert）になり、この閉じ込めの大部分をブラウザが引き受けてくれます。
もうひとつが、SPA の画面遷移です。ページを読み込み直さないので、遷移したら新しい画面の見出しへフォーカスを移すか、aria-live を付けた領域に「検索結果 12件」のような文言を書き込んで読み上げさせます。aria-live="polite" の領域は、中身が書き換わると、読み上げ中の文を遮らずに次の区切りで伝えられます。保存完了のトーストやフォームのエラーも、目に見えるだけでなくこの仕組みで耳にも届けます。
コントラストと検証
視覚面では、WCAGが本文テキストに4.5:1以上のコントラスト比を求めており、色だけに頼らない情報伝達（エラーを赤色だけでなく文言でも示す）も基本です。検証には axe や Lighthouse などの自動チェックをテストや CI に組み込むと退行を防げますが、機械的に検出できるのは問題の一部です。「ボタンの名前が『ボタン』になっている」「フォーカスの移動順が不自然」といった問題は、キーボードだけ・スクリーンリーダーだけで実際に操作してみる手動確認でしか見つかりません。
障害者「だけ」のためではない
アクセシビリティを特定のユーザー向けの追加対応と捉えると本質を見誤ります。腕を骨折している人（一時的制約）、赤ちゃんを抱いていて片手しか使えない人、炎天下で画面が見えにくい人、騒がしい場所で音声が聞けない人（状況的制約）— 誰もが人生のさまざまな場面で「障害がある状態」を経験します。字幕は聴覚障害者のための機能として生まれ、いまや電車内の動画視聴の標準になりました。適切な見出し構造は検索エンジンにも読みやすく、コントラストの改善は全員の可読性を上げます。アクセシビリティ対応は、そのまま全員のユーザビリティ向上なのです。
法制度の面でも対応は「任意の善意」から「義務」へ移りつつあります。米国ではADA（障害を持つアメリカ人法）に基づくWebサイトへの訴訟が年数千件規模で起きており、EUは欧州アクセシビリティ法（EAA）で2025年から民間サービスにも対応を義務づけました。日本でも2024年施行の改正障害者差別解消法により、民間事業者にも合理的配慮の提供が義務化されています。アクセシビリティは倫理であると同時に、いまや品質要件でありコンプライアンスでもある — その両面で押さえておくべき語彙です。
試問
見た目が同じ3つの「ボタン」（保存・破棄・通知）が並んだダイアログです。下の選択欄でそれぞれの実装（<button>、<div onclick>、role="button" を付けた div など）を差し替え、Tab・Enter のキーで操作できます。デザインの都合で、「通知」だけは <button> 要素を使えない場面です。
画面（本物の HTML 要素）
変更を保存しますか？
アクセシビリティツリー（支援技術が読む木）
読み上げ—
3つとも同じ見た目の「ボタン」です。まず Tab を押して、キーボードだけで3つに届くか確かめてください（下のキー、または実物のキーボード）。