HTMLにおけるアクセシビリティロールの理解

アクセシビリティロールは、支援技術に対して要素が何であるかを伝えるものであり、見た目がどうであるかを伝えるものではありません。スクリーンリーダーがボタンに遭遇したとき、それがネイティブの<button>要素であろうと、role="button"を持つカスタムコンポーネントであろうと、それがボタンであることを認識する必要があります。これを誤ると、数百万人のユーザーがあなたのインターフェースを効果的にナビゲートできなくなります。

このガイドでは、アクセシビリティロールがより広範なアクセシビリティツリーにどのように適合するか、ARIAロールとセマンティックHTMLをいつ使用するか、そしてコードをアクセシブルかつ保守可能に保つベストプラクティスについて説明します。

アクセシビリティツリーにおけるロールの動作

すべてのWebページには2つのツリーがあります。よく知っているDOMツリーと、支援技術が実際に読み取るアクセシビリティツリーです。アクセシビリティツリーはシンプルなモデルに従います。すべての要素には名前、ロール、値/状態があります。

<!-- DOM要素 -->
<button aria-pressed="true">ミュート</button>

<!-- アクセシビリティツリー表現 -->
名前: "ミュート"
ロール: button
値/状態: pressed=true

ブラウザはHTMLから自動的にこのアクセシビリティツリーを構築し、セマンティック要素をその暗黙的なロールにマッピングします。<nav>要素はnavigationランドマークになり、<button>はbuttonウィジェットになります。ARIAロールは、ネイティブHTMLでは不十分な場合にこのツリーを変更できますが、これは最初の選択肢ではなく、最後の手段であるべきです。

4つの主要なロールカテゴリ

ランドマークロール

ランドマークロールは、ナビゲーションのためのページ領域を定義します。最新のHTML5はこれらのほとんどをネイティブに提供しています。

• <header> → bannerロール(<article>または<section>内にない場合)
• <nav> → navigationロール
• <main> → mainロール
• <aside> → complementaryロール
• <footer> → contentinfoロール(<article>または<section>内にない場合)

ベストプラクティス: <div role="navigation">の代わりにセマンティックHTML要素を使用してください。<nav role="navigation">という冗長性は価値を追加しません—要素はすでに暗黙的にそのロールを持っています。

ウィジェットロール

ウィジェットロールはインタラクティブなコントロールを記述します。これらは、ネイティブ要素を使用できないカスタムコンポーネントにとって重要です。

<!-- 良い例: カスタムタブインターフェース -->
<div role="tablist">
  <button role="tab" aria-selected="true">設定</button>
  <button role="tab" aria-selected="false">プロフィール</button>
</div>

<!-- 悪い例: 不要なARIA -->
<button role="button">クリックしてください</button> <!-- 冗長 -->

ドキュメント構造ロール

これらのロールはコンテンツの構成を記述します。見出し、リスト、記事、セパレーターなどです。繰り返しになりますが、セマンティックHTMLを優先してください。

<!-- これを優先 -->
<article>
  <h2>記事タイトル</h2>
</article>

<!-- これよりも -->
<div role="article">
  <div role="heading" aria-level="2">記事タイトル</div>
</div>

抽象ロール

commandやcompositeのような抽象ロールは、WAI-ARIAの基礎的なテンプレートです。これらを直接使用しないでください—これらは仕様が他のロールを定義するためにのみ存在します。

ARIAロールの最新ベストプラクティス

まずセマンティックHTMLを優先する

ARIAの第一のルールは、ARIAを使用しないことです。ネイティブHTML要素には、組み込みのキーボードサポート、フォーカス管理、アクセシビリティセマンティクスが備わっています。

<!-- 常にこれを優先 -->
<button onclick="submit()">送信</button>

<!-- このアンチパターンよりも -->
<div role="button" tabindex="0" onclick="submit()">送信</div>

<div>バージョンは、キーボードサポート、フォーカススタイリング、適切なアクティベーションのために追加のJavaScriptが必要です—ネイティブボタンが自動的に行う作業です。

冗長なランドマークロールを避ける

HTML5以降、セマンティック要素に明示的なロールを追加することは不要であり、混乱を招く可能性があります。

<!-- これをしないでください -->
<main role="main">
<nav role="navigation">
<header role="banner">

<!-- これらの要素はすでに暗黙的なロールを持っています -->
<main>
<nav>
<header>

ネイティブのインタラクティブロールを上書きしない

ボタンのロールを変更すると、期待される動作が壊れます。

<!-- これは絶対にしないでください -->
<button role="heading">セクションタイトル</button>

<!-- これはキーボードインタラクションとスクリーンリーダーの期待を壊します -->

カスタムロールが意味を持つ場合

カスタムコンポーネントは時として本当にARIAロールが必要です。以下は有効なユースケースです。

カスタムダイアログパターン

<div role="dialog" aria-labelledby="dialog-title" aria-modal="true">
  <h2 id="dialog-title">アクションの確認</h2>
  <button>キャンセル</button>
  <button>確認</button>
</div>

カスタムタブインターフェース

<div role="tablist" aria-label="ユーザー設定">
  <button role="tab" aria-selected="true" aria-controls="panel-1">一般</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2">プライバシー</button>
</div>
<div role="tabpanel" id="panel-1">一般設定のコンテンツ</div>

説明とラベルの処理

アクセシブルな名前と説明については、次の階層に従ってください。

1. 可視テキスト(すべてのユーザーにとって最適)
2. aria-labelledby(他の場所の可視テキストを参照)
3. aria-describedby(補足情報を追加)
4. aria-label(可視テキストが不可能な場合)

<button aria-describedby="help-text">削除</button>
<span id="help-text">このアクションは元に戻せません</span>

注意: aria-descriptionはWAI-ARIA 1.3で登場していますが、サポートは限定的です。本番コードではaria-describedbyを使用してください。

避けるべき一般的なアンチパターン

Divベースのボタン: <button>が完璧に機能するのに<div role="button">を作成すること
ロールスープ: 「念のため」にすべての要素にロールを追加すること
矛盾するセマンティクス: <h2 role="button">は構造とインタラクションを混在させます
冗長なロール: <nav role="navigation">は価値を追加しません

実装のテスト

常に実際の支援技術でロールを検証してください。ブラウザのDevToolsにはアクセシビリティツリーインスペクターが含まれています—これを使用して、スクリーンリーダーが何を認識するかを正確に確認してください。WindowsではNVDA、macOSではVoiceOverでテストして、ロールが使いやすいエクスペリエンスに変換されることを確認してください。

まとめ

アクセシビリティロールは、何かが何であるかを記述するために存在し、どのように見えるかを記述するためではありません。ネイティブのセマンティックHTMLはほとんどのロールを暗黙的に提供します—まずそれを使用してください。ARIAロールは、HTMLが不十分な本当にカスタムなコンポーネントのために予約してください。ARIAを使用する場合は、WCAGガイドラインに沿っていることを確認し、実際の支援技術でテストしてください。覚えておいてください。ARIAがないことは、悪いARIAよりも優れています。

よくある質問

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.