ARIA: application ロール - アクセシビリティ

ARIA: application ロール
=====================

アプリケーション (`application`) ロールは、要素とその全ての子要素をデスクトップアプリケーションと同様に扱うべきであり、伝統的な HTML 解釈手法を使用するべきでないと支援技術に指示します。 このロールは、とても動的でデスクトップ的なウェブアプリケーションを定義するためにのみ使用するべきです。

```html
<div role="application">...</div>
```

これは、デスクトップアプリケーションの一部であるかのように、この `<div>` 要素とその全ての子孫を扱うことを定義します。

説明
--

アプリケーション (`application`) ロールは、支援技術に対して、ウェブコンテンツのこの部分に、他の既知の HTML 要素や WAI-ARIA ウィジェットに適合しない要素が含まれていることを示します。 HTML 構造やウィジェットの特別な解釈は一切中止し、マウスやキーボード、タッチのインタラクションを扱うためには、コントロールをブラウザーやウェブアプリケーションに完全に渡すべきです。

このモードでは、ウェブ作成者は、キーボード入力、フォーカス管理、その他のインタラクションを全て処理する責任があり、支援技術が最終的に何らかの処理を行うとは想定できません。

アプリケーション (`application`) ロールに包まれるウェブアプリケーションに、通常のウェブコンテンツと同様に扱われるべき部分が含まれている場合は、文書 (`document`) ロールや記事 (`article`) ロールを使用するべきです。

### 背景

歴史的な理由で、特に Windows 上では、スクリーンリーダーやその他の支援技術 (AT) は、従来、読み込みが完了した後に、ブラウザーからウェブコンテンツ全体を一度に取得していました。 AT は、視覚障害者がコンテンツを消費するのに最も合理的な表現を独自に構築します。 これは、仮想文書、閲覧モード、または類似の用語で呼ばれることがよくあります。 文書は単一列のビューに合理化されます。 キーボードインタラクションモデルが生成され、これはワードプロセッサーにとても似ていて、このモデルでは、行単位、文単位、段落単位で読むことができます。 AT は、リンク、見出し、フォームコントロール、テーブル、リスト、画像のような任意の意味論を読み取ります。

さらに、いわゆるクイックナビゲーションキーのセットが長年にわたって確立されてきたため、視覚障害者は特定の要素タイプを介してページを流し読みすることができます。 このような要素には、通常、見出し、フォームフィールド、リスト、テーブル、リンク、グラフィック、ランドマークリージョンが含まれます。

この全てがうまくいくためには、AT はほぼ全てのキーボード入力を遮り、それを消費し、ブラウザーや他のユーザエージェントに何も送られないようにします。 ウェブページとインタラクションできるように、特定のキー (通常は `Enter` キー) を押すと、このモードはオフになり、標準的なウィジェットのセットが認識されます。 フォームモードやフォーカスモードとも呼ばれるスクリーンリーダーモードでは、全てのキーボード入力がブラウザーに再び送られます。 `Escape` キーは閲覧モードに戻るための最も一般的な方法です。

アプリケーション (`application`) ロールは、ウェブコンテンツとインタラクションするために閲覧モードとフォーカスモードの両方を使用する AT において、直接的なインタラクションでアクセス可能な標準的なセットの一部ではないウィジェットのための手段を提供するように設計されています。

### 関連する WAI-ARIA のロール、ステート、プロパティ

`document`, `article`

通常のウェブコンテンツとして扱われるべきアプリケーションの部分を示すために使用します。

aria-activedescendant

アプリケーション内でのフォーカスの管理に使用します。

aria-label

公開されているアプリケーションの名前やウィジェットの目的を提供するために使用します。

aria-describedby

この要素をナビゲートまたは操作するための追加の説明書を含む要素の `id` 参照を示すのに使用します。

aria-roledescription

スクリーンリーダーが話すための、より説明的なロールのテキストをアプリケーションに与えるために使用します。 これはローカライズするべきです。

### キーボードインタラクション

キーボードインタラクションは、完全にウェブ制作者のコントロール下にあり、実装されている特定のウィジェットに関連するものでもかまいません。 例えば、スライドアプリケーションでは、矢印キーを使用してスライド上の要素を配置し、ARIA のライブリージョンを介して音声によるフィードバックを使用して位置や他のオブジェクトとのオーバーラップの状態を伝えるウィジェットを作成できます。 フォーカスは、`aria-activedescendant` によって管理します。

`Tab` キー、`スペース`キー、`Enter` キー、および `Escape` キーは、アプリケーションで処理する必要があります。 1 つの例外は、フォーカスが、ブラウザーからのキーボードナビゲーションをサポートするアプリケーション内の標準ウィジェット (例えば `<input>` 要素) に設定されている場合です。

### 必要な JavaScript 機能

キー操作

キーボード入力の処理とフォーカスの制御に使用します。

クリック、タッチ

あなたのウィジェットにも適切に対処してください。

属性値の変更

`aria-activedescendant` は、アプリケーションコンテナー内のフォーカスを管理するために使用します。 フォーカスやインタラクションのポイントを変更するキーボードやその他のアプリケーションのイベントに応じて設定します。

**メモ:** アプリケーション (`application`) ロールには、関連する HTML ウィジェットがないため、完全に自由形式です。 アプリケーションの作成者は、ユーザーがフォーカスのリンボに拘束されたり、ユーザーが抜け出せないものの中にフォーカスを閉じ込められたりしないようにするために全面的な責任を負う必要があります。 ページの他の部分にある通常のウェブコンテンツに戻ることを含む、インタラクションの全ての側面を処理する必要があります。 賢明に、そして慎重に使用してください！

例
-

アプリケーション (`application`) ロールを適切に使用するいくつかの有名なウェブアプリケーションは次のとおりです。

* グーグルの Docs、Sheets、Slides
* CKEditor と TinyMCE の WYSIWYG ウェブエディタは、Mozilla Developer Network で使用されているようなものです。
* Gmail の一部 (訳注：グーグルから使っていないという情報あり)
アクセシビリティに関する懸念
--------------

アプリケーション (`application`) ロールを不適切に使用すると、意図せずにウェブページの情報からのアクセスを奪う可能性があるので、使用には十分注意してください。 あなたが実際にそれを必要とし、他の既知のウィジェットのセットを使って同じことができない場合に、真剣に考えます。 使用する場合は、アプリケーション (`application`) ロールは、例えば `<body>` 要素ではなく、可能な最も低い共通コンテナーに追加するべきです。

仕様
--

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # application |

優先順位
----

アプリケーション (`application`) ロールを適用すると、この要素の全ての子孫要素がウェブコンテンツではなくアプリケーションコンテンツのように扱われます。 支援技術がウェブコンテンツに与えるであろう読み上げメカニズムは適用されません。

関連情報
----

* WAI-ARIA のロール "application" を使用する場合は、賢明にしてください — Marco Zehe のブログ記事 (英語)

1. **WAI-ARIA ロール**
    1. `alertdialog ロールの使用`
    2. `ARIA: alert ロール`
    3. `ARIA: application ロール`
    4. `ARIA: article ロール`
    5. `ARIA: banner ロール`
    6. `ARIA: button ロール`
    7. `ARIA: cell ロール`
    8. `ARIA: checkbox ロール`
    9. `ARIA: complementary ロール`
    10. `ARIA: contentinfo ロール`
    11. `ARIA: dialog ロール`
    12. `ARIA: document ロール`
    13. `ARIA: feed ロール`
    14. `ARIA: figure ロール`
    15. `ARIA: form ロール`
    16. `ARIA: grid ロール`
    17. `ARIA: gridcell ロール`
    18. `ARIA: heading ロール`
    19. `ARIA: list ロール`
    20. `ARIA: listbox ロール`
    21. `ARIA: listitem ロール`
    22. `ARIA: main ロール`
    23. `ARIA: navigation ロール`
    24. `ARIA: option ロール`
    25. `ARIA: region ロール`
    26. `ARIA: row ロール`
    27. `ARIA: rowgroup ロール`
    28. `ARIA: search ロール`
    29. `ARIA: switch ロール`
    30. `ARIA: tab ロール`
    31. `ARIA: table ロール`
    32. `ARIA: term ロール`
    33. `ARIA: textbox ロール`
    34. `group ロールの使用`
    35. `link ロールの使用`
    36. `log ロールの使用`
    37. `presentation ロールの使用`
    38. `progressbar ロールの使用`
    39. `radio ロールの使用`
    40. `slider ロールの使用`
    41. `status ロールの使用`
    42. `toolbar ロールの使用`


link ロールの使用 - アクセシビリティ

link ロールの使用
===========

### 説明

このテクニックは、`link` ロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。

`link` ロールは、アプリケーションまたは外部にあるリソースへのハイパーリンクを作成する要素を識別するために使用されます。 このロールが要素に追加されると、タブを使用してリンクへのフォーカスを変更したり、リンクの実行にスペースやエンターを使用することができます。

**メモ:** 可能であれば、ネイティブ要素は古いユーザーエージェントや支援技術によって広くサポートされているため、`link` ロールではなくネイティブの `<a>` 要素を使用することをお勧めします。 ネイティブ `<a>` 要素は、追加のカスタマイズを必要とせずに、デフォルトでキーボードとフォーカスの要件もサポートしています。

`tabindex` 属性は、タブの順序で要素の位置を直接指定するために、このロールで任意に使用できます。

### ユーザーエージェントと支援技術への影響

要素に `link` ロールが追加された場合、またはそのような要素が可視になる場合、ユーザーエージェントは以下を行うべきです。

* オペレーティングシステムのアクセシビリティ API で `link` ロールを持つ要素を公開します。
* オペレーティングシステムのアクセシビリティ API がサポートされている場合は、アクセシビリティ API を使用してアクセス可能なリンクイベントを発生させます。

支援技術製品は、そのようなイベントをリスンし、それに応じてユーザーに以下を通知するべきです。

* スクリーンリーダーは、リンクがフォーカスされているときに、リンクであるという事実とともに、リンクまたはそのラベルのテキストをアナウンスするべきです。 ARIA リンクは通常のリンクと同様にスクリーンリーダーの「リンクのリスト」機能に含まれているべきで、「リンクのアクティブ化」や「リンクへの移動」など、このダイアログのリストに対するアクションは通常のリンクと同じように行われるべきです。
* スクリーン拡大鏡はリンクを拡大することがあります。

**注**: 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。

### 例

#### 例 1: HTML コードにロールを追加する

以下のスニペットは、`link` ロールが html ソースコードに直接どのように追加されるかを示しています。

```html
<div role="link">リンク</div>
```

#### 例 2: span を使用したアプリケーションからのアクセス可能なリンクの構築

```html
<script type="text/javascript">
 sap = { ui: { keycodes: { SPACE: 32, ENTER: 13 } } };
 //リンク上のクリックとキーダウンを処理する
 function navigateLink(evt) {
 if (evt.type == "click" || evt.keyCode == sap.ui.keycodes.ENTER) {
 var ref = evt.target != null ? evt.target : evt.srcElement;
 if (ref) window.open(ref.getAttribute("href"), "\_blank");
 }
 }
</script>

<body role="application">
  <h3>span を使った単純なリンクの構築</h3>
  <span
 href="http://www.w3c.org"
 onkeydown="navigateLink(event)"
 onclick="navigateLink(event)"
 tabindex="0"
 id="link1"
 role="link"
 class="link">
    スペースバーまたはエンターキーを使用してこのリンクをアクティブ化します。
  </span>
</body>
```

### 注

リンクを押すとアクションがトリガーされますが、ブラウザーのフォーカスは変更されず、新しいページに移動することもありません。 `link` ロールの代わりに `button` ロールを使用することを検討してください。

### 使用された ARIA 属性

* link
### 関連する ARIA 技術

* button ロール
### 互換性

TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する

### その他のリソース

* ARIA のベストプラクティス - link ロール: https://www.w3.org/TR/wai-aria-practices/#kbd\_roving\_tabindex


ARIA: article ロール - アクセシビリティ

ARIA: article ロール
=================

記事 (`article`) ロールは、ページ、文書、またはウェブサイト上で容易に自立することができるページのセクションを示します。 これは、通常、コメント、フォーラム投稿、新聞記事、または 1 ページにまとめられたその他項目などの関連コンテンツの項目に設定します。

```html
<div role="article">
  <h2>この断片の見出し</h2>
  <p>この断片の段落。</p>
  <p>別の段落。</p>
  ... 記事とインタラクションしたり、共有したり等するためのコントロール ...
</div>
<div role="article">...</div>
```

この例では、同じように構成され、関連している 2 つの記事を 1 ページに並べて表示しています。

**メモ:** 記事 (`article`) ロールを持つ `<div>` ではなく、`<article>` 要素を使用します。 利用可能な場合は、いつでもネイティブの要素を使用します。

`role="article"` を使用する代わりに、`<article>` 要素を使用することができます。

```html
<article>
  <h2>この断片の見出し</h2>
  <p>この断片の段落。</p>
  <p>別の段落。</p>
  ... 記事とインタラクションしたり、共有したり等するためのコントロール ...
</article>
<article>...</article>
```

説明
--

記事 (`article`) ロールは、文書、ページ、サイトのセクションを表し、それが自立している場合は、完全な文書、ページ、サイトとして見ることができます。 一連の記事セクションの目的は、互いの関係を示すことです。

記事は、ナビゲーションに関するランドマークとは見なされませんが、ランドマークをサポートする多くの支援技術は、記事間をナビゲートする手段をサポートします。 また、記事内のネスト関係の表示をサポートすることもあります。

記事をネストすることができ、ネストされた記事は、それをネストしているものと直接関係しますが、必ずしもネスト階層の外側にあるものに関連しているとは限りません。 具体的な使用事例については、例を参照してください。

記事がフィード (feed) の一部である場合、`aria-posinset` 属性および `aria-setsize` 属性を設定して、この特定の記事がフィード内のどの位置にあるかを示すことができます。

スクリーンリーダーやその他の支援技術がパススルーモードになるようなアプリケーション (`application`) やその他のウィジェット内では、記事を使用して、囲まれたコンテンツを再び通常のウェブコンテンツとして扱うように切り替えるべきであることを示すことができます。

意味論のない要素に記事 (`article`) ロールを含める代わりに、`<article>` 要素を使用するべきです。 ユーザーエージェントは、これを記事 (`article`) ロールのような適切なアクセシビリティ情報に変換します。 `<article>` 要素を使用すると、検索エンジンがページの構造をより適切に見いだすのにも役立ちます。 `role="article"`、または好ましくは `<article>` の適切な使用例には、ブログ投稿、フォーラム投稿、フォーラムまたはブログ投稿へのコメント、フォーラムまたはブログ投稿へのコメントへのコメント、ソーシャルメディアフィード内の項目等が含まれます。

### 関連する WAI-ARIA のロール、ステート、プロパティ

aria-posinset

フィードのコンテキストでは、1 から始まるカウントに基づいて、そのフィード内のこの特定の記事の位置を示します。

aria-setsize

フィードのコンテキストでは、そのフィード内にいくつの記事の項目があるかを示します。

### キーボードインタラクション

このロールは、具体的なキーボードインタラクションをサポートしていません。

### 必要な JavaScript 機能

イベントハンドラ

このロールでは、イベントハンドラは必要ありません。

属性値の変更

フィードを作成するときは、各記事 (`article`) ロールの `aria-posinset` 属性と `aria-setsize` 属性を適切な値に設定します。 `aria-posinset` は、1 ベースであることに注意してください。

**メモ:** 常にネイティブの要素を使用してください。 記事 (`article`) ロールを持つ `<div>` ではなく、`<article>` 要素を使用するべきです。

例
-

* WAI-ARIA Authoring Practices 1.1 の feed のデザインパターンから、お薦めのレストランのフィード表示とそれと分けられた文書
仕様
--

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # article |
| Unknown specification  |

優先順位
----

このロールは、HTML の `<article>` 要素に対応し、可能な場合はその要素を代わりに使用するべきです。 このロールは、その子たちの間に具体的なロールが存在する必要はありません。 これは、フィード (`feed`) ロールを持つ要素の直接の子として許可される唯一のロールです。

関連情報
----

* feed ロール
* section ロール (en-US)
* `<article>` 要素
* RSS

1. **WAI-ARIA ロール**
    1. `alertdialog ロールの使用`
    2. `ARIA: alert ロール`
    3. `ARIA: application ロール`
    4. `ARIA: article ロール`
    5. `ARIA: banner ロール`
    6. `ARIA: button ロール`
    7. `ARIA: cell ロール`
    8. `ARIA: checkbox ロール`
    9. `ARIA: complementary ロール`
    10. `ARIA: contentinfo ロール`
    11. `ARIA: dialog ロール`
    12. `ARIA: document ロール`
    13. `ARIA: feed ロール`
    14. `ARIA: figure ロール`
    15. `ARIA: form ロール`
    16. `ARIA: grid ロール`
    17. `ARIA: gridcell ロール`
    18. `ARIA: heading ロール`
    19. `ARIA: list ロール`
    20. `ARIA: listbox ロール`
    21. `ARIA: listitem ロール`
    22. `ARIA: main ロール`
    23. `ARIA: navigation ロール`
    24. `ARIA: option ロール`
    25. `ARIA: region ロール`
    26. `ARIA: row ロール`
    27. `ARIA: rowgroup ロール`
    28. `ARIA: search ロール`
    29. `ARIA: switch ロール`
    30. `ARIA: tab ロール`
    31. `ARIA: table ロール`
    32. `ARIA: term ロール`
    33. `ARIA: textbox ロール`
    34. `group ロールの使用`
    35. `link ロールの使用`
    36. `log ロールの使用`
    37. `presentation ロールの使用`
    38. `progressbar ロールの使用`
    39. `radio ロールの使用`
    40. `slider ロールの使用`
    41. `status ロールの使用`
    42. `toolbar ロールの使用`


ARIA: checkbox ロール - アクセシビリティ

ARIA: checkbox ロール
==================

チェックボックス (checkbox) ロールは、チェック可能なインタラクティブなコントロールに使用します。 `role="checkbox"` を含む要素には、チェックボックスの状態を支援技術に公開するための `aria-checked` 属性も含める必要があります。

```html
<span
 role="checkbox"
 aria-checked="false"
 tabindex="0"
 aria-labelledby="chk1-label">
</span>
<label id="chk1-label">Remember my preferences</label>
```

ARIA の第一のルールは、ネイティブな HTML の要素や属性に必要としている意味論と振る舞いがある場合、要素を転用して ARIA を追加する代わりにネイティブなものを使用することです。 次のように、代わりに `<input type="checkbox">` のネイティブな HTML チェックボックスを使用してください。 これは、必要なすべての機能をネイティブに提供します。

```html
<input type="checkbox" id="chk1-label" />
<label for="chk1-label">Remember my preferences</label>
```

説明
--

ネイティブな HTML チェックボックスのフォームコントロールは、2 つのチェックされた (checked) 状態（「チェックされた」または「チェックされていない」）のみを持つことができ、不確定な (indeterminate) 状態は JavaScript を介して設定可能です。 同様に、`role="checkbox"` を持つ要素は、`aria-checked` 属性を介して、`true`、`false`、または `mixed` の 3 つの状態を公開できます。

チェックボックスはインタラクティブなコントロールであるため、フォーカス可能でキーボードからアクセスできる必要があります。 ロールがフォーカス不可能な要素に適用される場合は、`tabindex` 属性を使用してこれを変更します。 チェックボックスをアクティブ化するために必要なキーボードショートカットは、`Space` キーです。

開発者は、チェックボックスがアクティブ化されたときに、`aria-checked` 属性の値を動的に変更する必要があります。

### 関連する WAI-ARIA のロール、ステート、プロパティ

aria-checked

`aria-checked` の値は、チェックボックスの状態を定義します。 この属性には、次の 3 つの値のいずれかがあります。

`true`
 チェックボックスがチェックされています
 `false`
 チェックボックスがチェックされていません
 `mixed`
 チェックボックスが部分的にチェックされているか、不確定です

tabindex="0"

支援技術のユーザーが Tab で移動してすぐに読み始めることができるように、フォーカス可能にするために使用します。

### キーボードインタラクション

| キー | 機能 |
| --- | --- |
| `Space` | チェックボックスをアクティブ化します |

### 必要な JavaScript

#### 必要なイベントハンドラー

onclick

マウスクリックを処理して、`aria-checked` 属性の値を変更することでチェックボックスの状態を変更し、チェックボックスの外観を変更することで、視力のあるユーザーにチェックされているかどうかを見せます。

onKeyPress

ユーザーが

`Space`

キーを押した場合を処理して、`aria-checked` 属性の値を変更することでチェックボックスの状態を変更し、チェックボックスの外観を変更することで、視力のあるユーザーにチェックされているかどうかを見せます。

### 例

次の例では、CSS と JavaScript を使用して単純なチェックボックス要素を作成し、要素がチェックされているかどうかの状態を処理します。

#### HTML

```html
<span
 role="checkbox"
 id="chkPref"
 aria-checked="false"
 onclick="changeCheckbox()"
 onKeyPress="changeCheckbox()"
 tabindex="0"
 aria-labelledby="chk1-label"></span>
<label id="chk1-label" onclick="changeCheckbox()" onKeyPress="changeCheckbox()"
 >Remember my preferences</label
>
```

#### CSS

```css
[role="checkbox"] {
  padding: 5px;
}

[aria-checked="true"]::before {
  content: "[x]";
}

[aria-checked="false"]::before {
  content: "[ ]";
}
```

#### JavaScript

```js
function changeCheckbox(event) {
  let item = document.getElementById("chkPref");
  switch (item.getAttribute("aria-checked")) {
    case "true":
      item.setAttribute("aria-checked", "false");
      break;
    case "false":
      item.setAttribute("aria-checked", "true");
      break;
  }
}
```

#### 結果

アクセシビリティの懸念
-----------

チェックボックス (`checkbox`) ロールが要素に追加された場合、ユーザーエージェントは次のことを行う必要があります。

* オペレーティングシステムのアクセシビリティ API でチェックボックスロールを持つものとして要素を公開します。
* `aria-checked` 値が変更されたら、アクセス可能な状態変更イベントを送信します。

支援技術製品は次のことを行う必要があります。

* スクリーンリーダーは、要素をチェックボックスとしてアナウンスし、任意でアクティブ化する方法を説明する必要があります。

**メモ:** 支援技術がこの手法をどのように扱うべきかについては、意見が異なる場合があります。 上記の情報はそれらの意見の 1 つであり、したがって規範的ではありません。

ベストプラクティス
---------

ARIA の第一のルールは、ネイティブな HTML の要素や属性に必要としている意味論と振る舞いがある場合、要素を転用して ARIA のロール、ステート、またはプロパティを追加してアクセス可能にする代わりに、ネイティブなものを使用することです。 そのため、JavaScript と ARIA でチェックボックスの機能を再作成するのではなく、フォームコントロールを使用してネイティブな HTML チェックボックスを使用することをお勧めします。

関連情報
----

* `<input type="checkbox">`
* ARIA: radio ロール
* ARIA: menuitem ロール (en-US)
* ARIA: menuitemcheckbox ロール (en-US)
* ARIA: menuitemradio ロール (en-US)
* ARIA: switch ロール
* ARIA: option ロール

1. **WAI-ARIA ロール**
    1. `alertdialog ロールの使用`
    2. `ARIA: alert ロール`
    3. `ARIA: application ロール`
    4. `ARIA: article ロール`
    5. `ARIA: banner ロール`
    6. `ARIA: button ロール`
    7. `ARIA: cell ロール`
    8. `ARIA: checkbox ロール`
    9. `ARIA: complementary ロール`
    10. `ARIA: contentinfo ロール`
    11. `ARIA: dialog ロール`
    12. `ARIA: document ロール`
    13. `ARIA: feed ロール`
    14. `ARIA: figure ロール`
    15. `ARIA: form ロール`
    16. `ARIA: grid ロール`
    17. `ARIA: gridcell ロール`
    18. `ARIA: heading ロール`
    19. `ARIA: list ロール`
    20. `ARIA: listbox ロール`
    21. `ARIA: listitem ロール`
    22. `ARIA: main ロール`
    23. `ARIA: navigation ロール`
    24. `ARIA: option ロール`
    25. `ARIA: region ロール`
    26. `ARIA: row ロール`
    27. `ARIA: rowgroup ロール`
    28. `ARIA: search ロール`
    29. `ARIA: switch ロール`
    30. `ARIA: tab ロール`
    31. `ARIA: table ロール`
    32. `ARIA: term ロール`
    33. `ARIA: textbox ロール`
    34. `group ロールの使用`
    35. `link ロールの使用`
    36. `log ロールの使用`
    37. `presentation ロールの使用`
    38. `progressbar ロールの使用`
    39. `radio ロールの使用`
    40. `slider ロールの使用`
    41. `status ロールの使用`
    42. `toolbar ロールの使用`


ARIA: listitem ロール - アクセシビリティ

ARIA: listitem ロール
==================

ARIA のリスト項目 (`listitem`) ロールは、項目のリスト内の項目を識別するために使用できます。 これは、通常、リストコンテナーを識別するために使用するリスト (`list`) ロールと組み合わせて使用します。

```html
<section role="list">
  <div role="listitem">リスト項目 1</div>
  <div role="listitem">リスト項目 2</div>
  <div role="listitem">リスト項目 3</div>
</section>
```

説明
--

外側のコンテナーとその内側の要素のリストで構成されるコンテンツは、それぞれリスト (`list`) とリスト項目 (`listitem`) のコンテナーを使用して支援技術で識別できます。

リストとリスト項目をマークアップするためにどの要素を使用するべきかについて、鉄則はありませんが、リスト項目がリストのコンテキストで意味をなすようにするべきです (例えば、買い物リスト、料理の手順、運転の指示) 。

**警告:** 可能な限り、適切な意味論の HTML 要素を使用して、リストとそのリスト項目 (`<ul>` や `<ol>` と `<li>`) をマークアップするべきです。 詳しい例は、ベストプラクティスを参照してください。

### 関連する WAI-ARIA のロール、ステート、プロパティ

list

項目のリスト。 リスト (`list`) ロールを持つ要素には、子として 1 つ以上のリスト項目 (`listitem`) ロールを持つ要素か、子として 1 つ以上のリスト項目 (`listitem`) ロールを持つ要素を含む 1 つ以上のグループ (`group`) ロールを持つ要素が必要です。

group

ページの目次に掲載されるほど重要ではなく、リスト内にネストされている場合はリスト項目に限定される、関連するオブジェクトのコレクションです。 (訳注: リスト内にグループをネストできるという仕様は、ARIA 1.2 で、無くなる予定です。)

### キーボードインタラクション

無し

### 必要な JavaScript 機能

無し

例
-

ARIA Lists — Scott O'Hara によるいくつかの有用な例と考え (英語)

ベストプラクティス
---------

`role="list"` と `role="listitem"` は必要な場合のみ使用してください。 例えば、HTML を制御できなくても、JavaScript で事後に動的にアクセシビリティを向上させることができる場合です。

可能な限り、適切な意味論の HTML 要素を使用して、リストとリスト項目 (`<ol>` や `<ul>` と `<li>`) をマークアップするべきです。 例えば、上記の例は次のように書き直すべきです。

```html
<ul>
  <li>リスト項目 1</li>
  <li>リスト項目 2</li>
  <li>リスト項目 3</li>
</ul>
```

また、リスト項目の順序が重要な場合は、順序付きリストを使用します。

```html
<ol>
  <li>リスト項目 1</li>
  <li>リスト項目 2</li>
  <li>リスト項目 3</li>
</ol>
```

**メモ:** ARIA のリストロールとリスト項目ロールでは、順序付きリストと順序無しリストを区別しません。

**メモ:** タブ付きインターフェイスとして機能する項目のリストをマークアップする場合は、代わりにタブ (`tab`)、タブパネル (`tabpanel`)、タブリスト (`tablist`) のロールを使用するべきです。

仕様
--

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # listitem |

スクリーンリーダーのサポート
--------------

TBD

関連情報
----

* Accessibility Object Model
* ARIA in HTML
* HTML `<li>` 要素
* HTML `<ul>` 要素
* HTML `<ol>` 要素
* ARIA: list ロール
* ARIA: group ロール

1. **WAI-ARIA ロール**
    1. `alertdialog ロールの使用`
    2. `ARIA: alert ロール`
    3. `ARIA: application ロール`
    4. `ARIA: article ロール`
    5. `ARIA: banner ロール`
    6. `ARIA: button ロール`
    7. `ARIA: cell ロール`
    8. `ARIA: checkbox ロール`
    9. `ARIA: complementary ロール`
    10. `ARIA: contentinfo ロール`
    11. `ARIA: dialog ロール`
    12. `ARIA: document ロール`
    13. `ARIA: feed ロール`
    14. `ARIA: figure ロール`
    15. `ARIA: form ロール`
    16. `ARIA: grid ロール`
    17. `ARIA: gridcell ロール`
    18. `ARIA: heading ロール`
    19. `ARIA: list ロール`
    20. `ARIA: listbox ロール`
    21. `ARIA: listitem ロール`
    22. `ARIA: main ロール`
    23. `ARIA: navigation ロール`
    24. `ARIA: option ロール`
    25. `ARIA: region ロール`
    26. `ARIA: row ロール`
    27. `ARIA: rowgroup ロール`
    28. `ARIA: search ロール`
    29. `ARIA: switch ロール`
    30. `ARIA: tab ロール`
    31. `ARIA: table ロール`
    32. `ARIA: term ロール`
    33. `ARIA: textbox ロール`
    34. `group ロールの使用`
    35. `link ロールの使用`
    36. `log ロールの使用`
    37. `presentation ロールの使用`
    38. `progressbar ロールの使用`
    39. `radio ロールの使用`
    40. `slider ロールの使用`
    41. `status ロールの使用`
    42. `toolbar ロールの使用`


ARIA: option ロール - アクセシビリティ

ARIA: option ロール
================

`option` ロールは `listbox` で選択可能な項目に使用します。

解説
--

`option` ロールは `listbox` 内でユーザーが選択できるものを識別するために使用します。これらの選択肢は `<select>` 要素内の `<option>` 要素と似ていますが、画像を格納することができます。

選択可能な選択肢はすべて、 `aria-selected` (en-US) をその状態に一致させる必要があります（選択されているときは `true`、選択されていないときは `false`）。選択肢が選択可能でない場合、 `aria-selected` は省略できます。無効になった選択肢は、 `aria-disabled="true"` と `aria-selected="false"` を設定し、ユーザーに、無効ではあるが選択肢が存在することを説明します。

`option` ロールは `listbox` の選択可能な選択肢を特定するためのものです。選択肢にはアクセシブル名を指定しなければなりません。一般的に、選択肢のアクセシブル名は要素の子孫コンテンツから決まります。

作成者は、選択肢の役割を持つ要素に `aria-label` (en-US) または `aria-labelledby` を指定することによって、アクセシビリティ名を明示的に提供することもできます。 `aria-label` または `aria-labelledby` を使用し、選択肢が可視のテキストラベルも表示する場合、作成者は WCAG Success Criterion 2.5.3 Label in Name を保証しなければなりません。

使用可能な場合は、代わりに `<select>` 要素か `checkbox` または `radio` 型の `<input>` 要素を使用することを強く推奨します。これらのネイティブ　HTML　要素はキーボード操作機能を提供し、すべての子孫要素のフォーカスを自動的に管理します。

### 子孫はすべて presentation になる

一部の種類のユーザーインターフェイス部品は、プラットフォームのアクセシビリティ API で表したとき、テキストしか含むことができません。アクセシビリティ API には `option` に含まれる意味づけ要素を表す方法がありません。この制限に対応するために、ブラウザーは自動的に `option` 要素の子孫要素すべてに `presentation` ロールを適用します。

例えば、見出しを格納した次の `option` 要素を考えてみましょう。

```html
<div role="option"><h3>私の意見のタイトル</h3></div>
```

`option` の子孫が存在するので、以下のコードと等価になります。

```html
<div role="option"><h3 role="presentation">私の意見のタイトル</h3></div>
```

支援技術ユーザーの視点から見ると、上記のコードスニペットはアクセシビリティツリー上では次のものと等価になるので、見出しは存在しないことになります。

```html
<div role="option">私の意見のタイトル</div>
```

### 関連する WAI-ARIA のロール、状態、プロパティ

#### 関連するロール

`listbox`

選択肢は `listbox` に格納されているか、または `listbox` が自分自身で所有している必要があります。

#### 状態とプロパティ

`aria-selected` (en-US)

選択肢の選択状態を記述するために使用します。必須です。

`aria-checked` (en-US)

選択肢を複数選択で使用する場合のチェック状態を記述するために使用します。`true`、`false`、`mixed` に対応しています。オプションです。

`aria-posinset` (en-US)

一度にいくつかの選択肢しか存在しない仮想スクロールのように、選択肢の集合が DOM と一致しない場合に、その位置を記述するために使用します。オプションです。

`aria-setsize` (en-US)

選択肢の総数を宣言するために `aria-posinset` と共に使用します。オプションです。

`aria-disabled`

選択肢が存在していますが、編集できません。オプションです。

`aria-hidden` (en-US)

アクセシビリティツールから選択肢を非表示にするために使用します。冗長なコンテンツなど、支援技術の使い勝手を向上させる場合にのみ、非表示のコンテンツや表示可能なコンテンツを非表示にするために使用しましょう。オプションです。

`aria-invalid` (en-US)

選択肢の値がアプリケーションによって不正な値とみなされることを示すために使用します。オプションです。

`aria-busy` (en-US)

読み込んでいる間など、要素が変更されていることを示すために使用します。オプションです。

`aria-labelledby`

どの要素が選択肢をラベル付けするかを示すために用います。適切な場合には、選択肢のコンテンツを代わりに使用してください。オプションです。

`aria-label` (en-US)

オプションのラベル付けに用います。ラベルが DOM に存在する場合、代わりに `aria-labelledby` を使用してください。オプションです。

（さらなる詳細と ARIA の状態とプロパティの完全なリストについては、 ARIA `option` (role) のドキュメントを参照してください。）

仕様書
---

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # option |
| Unknown specification  |

関連情報
----

* HTML `<select>` 要素
* HTML `<label>` 要素
* HTML `<option>` 要素
* ARIA: `combobox` ロール (en-US)
* ARIA: `list` ロール
* ARIA: `listbox` ロール


ARIA: alert ロール - アクセシビリティ

ARIA: alert ロール
===============

アラート (`alert`) ロールは、要素が動的に更新されたことをユーザーに通知するために使用できます。 ロールが追加されると、スクリーンリーダーは更新されたコンテンツの読み上げを即座に開始します。 ユーザーがアラートを閉じることを期待する場合は、代わりにアラートダイアログ (`alertdialog`) ロールを使用するべきです。

説明
--

5 つのライブリージョンロールの 1 つである アラート (`alert`) ロールは、重要な、通常は時間依存の情報をユーザーに提供するために使用され、要素が動的に更新されたことをユーザーに伝えることがよくあります。

アラート (`alert`) ロールは、アラートメッセージを含むノードに追加し、アラートをトリガーする要素には追加しません。 アラートは主張的なライブリージョンです。 `role="alert"` の設定は、`aria-live="assertive"` と `aria-atomic="true"` の設定と同じです。 それらはフォーカスを受け取らないので、フォーカスを管理する必要はなく、ユーザーインタラクションを必要とするべきではありません。

アラート (`alert`) ロールについて最も重要なことは、動的コンテンツ用であることです。 ユーザーがフォームに記入し、JavaScript を使用してエラーメッセージを追加すると、アラートがすぐにメッセージを読み上げるなどの状況に最適です。 ユーザーが HTML と対話していない HTML 上では使用するべきではありません。 例えば、ページ上に複数の可視のアラートが散在して読み込まれたページは、動的にトリガーされないため読み上げられません。

例
-

アラートをトリガーする最も基本的な方法は、デフォルトで `display: none;` を持つ要素に `role="alert"` を追加することです。 CSS や JavaScript で `display` の値を変更すると、自動的にスクリーンリーダーがコンテンツを読み上げるようになります。

```html
<p role="alert" style="display: none;">
  要素が表示されるとアラートがトリガーされます。
</p>
```

CSS だけでアラートをトリガーすることは可能ですが、ブラウザやスクリーンリーダーのサポートが増え、イベントハンドラやフォームの検証などのより大きなユーザーインタラクションの一部として、より適切な場合が多いため、JavaScript を使用する方がよいでしょう。 JavaScript を使用すると、開発者はアラートの追加と削除を適切に制御できます。

```html
<button type="button">アラートをトリガー</button>
<p class="alert">ボタンを押すとアラートがトリガーされます。</p>
```

```js
const btn = document.querySelector("button");
btn.addEventListener("click", triggerAlert);

function triggerAlert() {
  var alertEl = document.querySelector(".alert");
  alertEl.setAttribute("role", "alert");
}
```

アクセシビリティに関する懸念
--------------

アラート (`alert`) ロールは、変更されたコンテンツを読み上げるべきで、直ちにユーザーの注意を引く必要があるため、静的コンテンツに使用したり、定期的に使用したりするべきではありません。 アラートは、定義上、破壊的です。 一度にたくさんのアラートがある場合や、不必要なアラートがある場合、悪いユーザーエクスペリエンスをもたらします。

仕様
--

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # alert |
| Accessible Rich Internet Applications (WAI-ARIA) # alert |

関連情報
----

* ARIA: alertdialog ロール
* ARIA alert support - The Paciello Group
* ARIA ライブリージョン
* alert ロールの使用

1. **WAI-ARIA ロール**
    1. `alertdialog ロールの使用`
    2. `ARIA: alert ロール`
    3. `ARIA: application ロール`
    4. `ARIA: article ロール`
    5. `ARIA: banner ロール`
    6. `ARIA: button ロール`
    7. `ARIA: cell ロール`
    8. `ARIA: checkbox ロール`
    9. `ARIA: complementary ロール`
    10. `ARIA: contentinfo ロール`
    11. `ARIA: dialog ロール`
    12. `ARIA: document ロール`
    13. `ARIA: feed ロール`
    14. `ARIA: figure ロール`
    15. `ARIA: form ロール`
    16. `ARIA: grid ロール`
    17. `ARIA: gridcell ロール`
    18. `ARIA: heading ロール`
    19. `ARIA: list ロール`
    20. `ARIA: listbox ロール`
    21. `ARIA: listitem ロール`
    22. `ARIA: main ロール`
    23. `ARIA: navigation ロール`
    24. `ARIA: option ロール`
    25. `ARIA: region ロール`
    26. `ARIA: row ロール`
    27. `ARIA: rowgroup ロール`
    28. `ARIA: search ロール`
    29. `ARIA: switch ロール`
    30. `ARIA: tab ロール`
    31. `ARIA: table ロール`
    32. `ARIA: term ロール`
    33. `ARIA: textbox ロール`
    34. `group ロールの使用`
    35. `link ロールの使用`
    36. `log ロールの使用`
    37. `presentation ロールの使用`
    38. `progressbar ロールの使用`
    39. `radio ロールの使用`
    40. `slider ロールの使用`
    41. `status ロールの使用`
    42. `toolbar ロールの使用`


ARIA: heading ロール - アクセシビリティ

ARIA: heading ロール
=================

見出し (`heading`) ロールは、この要素をページやセクションの見出しとして定義します。 ページに構造を与えるために、セクション間の関係を示すレベルも提供するべきです。

```html
<div role="heading" aria-level="1">これはメインのページ見出しです</div>
```

これは `div` 内のテキストをページのメインの見出しとして定義し、`aria-level` 属性を介してレベル 1 であることを示しています。

説明
--

見出しロールは、この要素を見出しのように扱うべきであることを支援技術に示します。 スクリーンリーダーは、テキストを読み上げて、見出しのように書式設定されていることを示すことでしょう。 さらに、レベルは、この見出しがページ構造のどの部分を表すかを支援技術に伝えます。 レベル 1 の見出しは通常、ページのメインの見出しを示し、レベル 2 の見出しは最初のサブセクション、レベル 3 はそのサブセクション等々となります。

### 関連する ARIA のロール、ステート、プロパティ

`aria-level`

`aria-level` 属性は、文書構造の見出しレベルを指定します。 レベルが存在しない場合のデフォルト値は 2 です。

### キーボードインタラクション

このロールは特別なキーボードナビゲーションを必要としません。 どんな見出しもそうであるように、ID を与えることで、アンカーリンクから参照できるようになり、キーボードを介してアクセス可能となります。

### 必要な JavaScript 機能

必要なイベントハンドラ

無し

属性値の変更

コンテンツを動的に挿入しない限り、通常は必要ありません。 万一そのようなことがあるならば、新しく追加された見出しには、文書構造の残りの部分と整合性のある値を持つ `aria-level` 属性が必要です。

**メモ:** 見出し (`heading`) ロールと `aria-level` を持つ `<div>` または `<span>` を使用する代わりに、ネイティブの `<h1>` から `<h6>` 要素を使用して、このテキストが見出しであり、構造のどの部分を表しているかを示すことを検討してください。

例
-

以下は典型的なページ構造を示しています。

```html
<div id="container">
  <div role="heading" aria-level="1">メインのページ見出し</div>
  <p>この記事では、ページ構造の表示について説明します。</p>
  <div role="heading" aria-level="2">前書き</div>
  <p>導入テキスト。</p>
  <div role="heading" aria-level="2">第 1 章</div>
  <p>テキスト</p>
  <div role="heading" aria-level="3">第 1.1 章</div>
  <p>サブセクションにさらにテキストがあります。</p>
  ...
</div>
```

ただし、代わりに次のようにするべきです。

```html
<div id="container">
  <h1>メインのページ見出し</h1>
  <p>この記事では、ページ構造の表示について説明します。</p>
  <h2>前書き</h2>
  <p>導入テキスト。</p>
  <h2>第 1 章</h2>
  <p>テキスト</p>
  <h3>第 1.1 章</h3>
  <p>サブセクションにさらにテキストがあります。</p>
  ...
</div>
```

アクセシビリティに関する懸念
--------------

見出し (`heading`) ロールと `aria-level` 属性を使用する必要がある場合は、HTML との整合性を保つために、レベル 6 を超えないようにしてください。 理論的にはもっと大きくすることができ、一部のスクリーンリーダーはそれをサポートしているかもしれませんが、他のブラウザーとスクリーンリーダーの組み合わせでは結果が予測できない場合があります。

ベストプラクティス
---------

このロールを使用する最善の方法は、このロールをまったく使用せずに、代わりに上記の例に示すように、ネイティブの見出しタグ `<h1>` から `<h6>` を使用することです。 見出し (`heading`) ロールと `aria-level` 属性は、大きな変更を加えることができないレガシーコードのアクセシビリティを改良するためにのみ使用するべきです。

### 追加の利点

無し

仕様
--

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # heading |
| Unknown specification # when\_to\_use\_structural\_roles |

優先順位
----

見出しロールは、それを使用している要素のネイティブな意味論的意味をオーバーライドします。 さらに、`aria-level` 属性は、どのレベルの見出しが公開されているかを決定します。

スクリーンリーダーのサポート
--------------

TBD

関連情報
----

* <h1>–<h6>: HTML の見出し要素

1. **WAI-ARIA ロール**
    1. `alertdialog ロールの使用`
    2. `ARIA: alert ロール`
    3. `ARIA: application ロール`
    4. `ARIA: article ロール`
    5. `ARIA: banner ロール`
    6. `ARIA: button ロール`
    7. `ARIA: cell ロール`
    8. `ARIA: checkbox ロール`
    9. `ARIA: complementary ロール`
    10. `ARIA: contentinfo ロール`
    11. `ARIA: dialog ロール`
    12. `ARIA: document ロール`
    13. `ARIA: feed ロール`
    14. `ARIA: figure ロール`
    15. `ARIA: form ロール`
    16. `ARIA: grid ロール`
    17. `ARIA: gridcell ロール`
    18. `ARIA: heading ロール`
    19. `ARIA: list ロール`
    20. `ARIA: listbox ロール`
    21. `ARIA: listitem ロール`
    22. `ARIA: main ロール`
    23. `ARIA: navigation ロール`
    24. `ARIA: option ロール`
    25. `ARIA: region ロール`
    26. `ARIA: row ロール`
    27. `ARIA: rowgroup ロール`
    28. `ARIA: search ロール`
    29. `ARIA: switch ロール`
    30. `ARIA: tab ロール`
    31. `ARIA: table ロール`
    32. `ARIA: term ロール`
    33. `ARIA: textbox ロール`
    34. `group ロールの使用`
    35. `link ロールの使用`
    36. `log ロールの使用`
    37. `presentation ロールの使用`
    38. `progressbar ロールの使用`
    39. `radio ロールの使用`
    40. `slider ロールの使用`
    41. `status ロールの使用`
    42. `toolbar ロールの使用`


ARIA: banner ロール - アクセシビリティ

ARIA: banner ロール
================

バナー (`banner`) ロールは、ページの先頭に頻繁に配置される一般的で有益なコンテンツを表します。 これには、通常、ロゴ、会社名、検索アイコン、ページに関連する写真、またはスローガンが含まれます。

```html
<div role="banner">
  <img src="companylogo.svg" alt="会社名" />
  <h1>タイトル</h1>
  <p>サブタイトル</p>
</div>
```

HTML5 の `<header>` 要素は、`<aside>`、`<article>`、`<main>`、`<nav>`、または `<section>` の子孫でない限り、バナー (`banner`) ランドマークと同じ意味を持ちます。

説明
--

バナーランドマークロール (`banner` landmark role) は、それが適用されたコンテナー要素をヘッダーに変換します。 これは、一般的に全てのページの上部にあるサイト全体で共通のサイトヘッダーのコンテンツ用に予約されているべきです。

バナーには、通常ロゴやコーポレートアイデンティティ、おそらくサイト固有の検索ツールが含まれており、一般的にマーケティングチームがサイトのヘッダーやトップバナーと呼ぶものです。 `<header>` 要素の手法がそのバナーで使用されていない場合は、支援技術に対してバナー (`banner`) ランドマークを定義するために、`role="banner"` の宣言を使用するべきです。

支援技術は、`<body>` 要素の子孫であり、`<article>`、`<aside>`、`<main>`、`<nav>` または `<section>` サブセクション内にネストされていない場合、バナーとしてページのメイン `<header>` 要素を識別できます。

各ページにバナー (`banner`) ランドマークを持っていてもかまいませんが、各ページはバナー (`banner`) ロールを持つ `<header>` を 1 つだけに限定するべきです。 ネストされた文書 (`document`) ロールおよび/またはアプリケーション (`application`) ロールを含むページの場合、ネストされたそれぞれの文書 (`document`) ロールやアプリケーション (`application`) ロールも 1 つのバナー (`banner`) ランドマークを持つことができます。 ページに複数のバナー (`banner`) ランドマークが含まれている場合は、それぞれに固有のラベルを付けるべきです。

### 関連する ARIA のロール、ステート、プロパティ

無し

### キーボードインタラクション

無し

### 必要な JavaScript 機能

無し

例
-

ここでは、ナビゲーションへ飛ぶリンク、ロゴ、タイトル、サブタイトルを含む簡単なバナーがあります。 これがサイトのメインヘッダーであるため、バナー (`banner`) ランドマークロールをコンテナー要素に追加しています。

```html
<div role="banner">
  <a href="#nav" id="skipToMenu" class="skiptocontent"
 >キーボードナビゲーションへ飛ぶ</a
 >
  <img src="images/w3c.png" alt="W3C ロゴ" />
  <h1>ARIA ランドマーク</h1>
  <p>容易なナビゲーションのためのページのサブセクションの特定</p>
</div>
```

また、上記の HTML の `<header>` 要素で記述することもできます。

```html
<header>
  <a href="#nav" id="skipToMenu" class="skiptocontent"
 >キーボードナビゲーションへ飛ぶ</a
 >
  <img src="images/w3c.png" alt="W3C ロゴ" />
  <h1>ARIA ランドマーク</h1>
  <p>容易なナビゲーションのためのページのサブセクションの特定</p>
</header>
```

ベストプラクティス
---------

`<header>` 要素を使用して、ページの任意のサブセクションの子孫でないことを保証するのが最善ですが、場合によっては基になる HTML にアクセスできないことがあります。 この場合、JavaScript を使用してページのメインヘッダーにバナー (`banner`) ロールを追加できます。 この方法でページのバナーを特定すると、サイトのアクセシビリティが向上します。

仕様
--

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # banner |
| Unknown specification  |

スクリーンリーダーのサポート
--------------

TBD

関連情報
----

* HTML `<header>` 要素
* WC3 Landmarks Example

1. **WAI-ARIA ロール**
    1. `alertdialog ロールの使用`
    2. `ARIA: alert ロール`
    3. `ARIA: application ロール`
    4. `ARIA: article ロール`
    5. `ARIA: banner ロール`
    6. `ARIA: button ロール`
    7. `ARIA: cell ロール`
    8. `ARIA: checkbox ロール`
    9. `ARIA: complementary ロール`
    10. `ARIA: contentinfo ロール`
    11. `ARIA: dialog ロール`
    12. `ARIA: document ロール`
    13. `ARIA: feed ロール`
    14. `ARIA: figure ロール`
    15. `ARIA: form ロール`
    16. `ARIA: grid ロール`
    17. `ARIA: gridcell ロール`
    18. `ARIA: heading ロール`
    19. `ARIA: list ロール`
    20. `ARIA: listbox ロール`
    21. `ARIA: listitem ロール`
    22. `ARIA: main ロール`
    23. `ARIA: navigation ロール`
    24. `ARIA: option ロール`
    25. `ARIA: region ロール`
    26. `ARIA: row ロール`
    27. `ARIA: rowgroup ロール`
    28. `ARIA: search ロール`
    29. `ARIA: switch ロール`
    30. `ARIA: tab ロール`
    31. `ARIA: table ロール`
    32. `ARIA: term ロール`
    33. `ARIA: textbox ロール`
    34. `group ロールの使用`
    35. `link ロールの使用`
    36. `log ロールの使用`
    37. `presentation ロールの使用`
    38. `progressbar ロールの使用`
    39. `radio ロールの使用`
    40. `slider ロールの使用`
    41. `status ロールの使用`
    42. `toolbar ロールの使用`


ARIA: cell ロール - アクセシビリティ

ARIA: cell ロール
==============

`cell` は ARIA の *role* 属性の値で、要素を列ヘッダーや行ヘッダーの情報を含まない表形式コンテナー内のセルとして識別します。サポートされるには、セルが行 (`row`) ロールを持つ要素内にネストされている必要があります。

```html
<div role="row">
  <span role="cell">フランス</span>
  <span role="cell">6700 万</span>
</div>
```

上のセルの書き方のより良い、より意味論的な方法は、意味論的な `<td>` 要素を使うことです。

```html
<tr role="row">
  <td role="cell">フランス</td>
  <td role="cell">6700 万</td>
</tr>
```

解説
--

`role="cell"` を持つ要素は、表 (`table`) の中にあり、任意で行グループ (`rowgroup`)の中にある、行の中のセルです。セルがグリッド (`grid`) またはツリーグリッド (`treegrid` (en-US)) 内にある場合は、グリッドセル (`gridcell`) を選択してください。
 可能であれば、ネイティブの HTML の `<td>` 要素を使用することを強く推奨します。

`role="cell"` を持つ各要素は、 `role="row"` を持つコンテナー要素内に入っていなければなりません (MUST)。この行は、`role="rowgroup"` を持つ要素内に入れることができ、グリッド (`grid`)、表 (`table`)、ツリーグリッド (`treegrid`) のいずれかの中に入れてください。セルに列または行のヘッダーの情報が含まれている場合は、それぞれ列ヘッダー (`columnheader`) ロールや行ヘッダー (`rowheader`) ロールを使用してください。セルにヘッダー情報が含まれておらず、グリッド (`grid`) やツリーグリッド (`treegrid`) の中に入っている場合は、グリッドセル (`gridcell`) ロールの方が適切な場合があります。

セルには、 `aria-colindex` (en-US), `aria-colspan` (en-US), `aria-rowindex` (en-US), `aria-rowspan` (en-US) など、表形式データ構造内のセルの位置を明確にする多数のプロパティ属性を含めることができます。

**メモ:** 可能であれば、ネイティブな HTML 表要素 (`<table>` を、表の行要素 (`<tr>` および表のセル要素 (`<td>` と共に使用することを強く推奨します。

### 関連する WAI-ARIA のロール、ステート、プロパティ

#### コンテキストのロール

role="row"

`role="row"` の要素は、表形式構造内のセルの行です。 行には、グリッド (`grid`)、表 (`table`)、ツリーグリッド (`treegrid`) 内において、そして任意で行グループ (`rowgroup`) 内において、1 つ以上のセル、グリッドセル、列ヘッダー、行ヘッダーが含まれます。

role="rowgroup"

行はセルの親として必須です。 行グループ (`rowgroup`) は、任意のコンテキスト上の行の親で、子孫となる行との間に関係を確立します。 これは、HTML 表 (`table`) 要素の `thead`, `tfoot`, `tbody` 要素と構造的に同等です。

role="table"

セルを含む行を見つけることができる、グリッド (`grid`) とツリーグリッド (`treegrid`) と共に 3 つの可能なコンテキストのうちの 1 つ。 表 (`table`) は、セルを、ネイティブな HTML の `<table>` 要素と同様に、行と列に配置されたデータを含むインタラクティブでない表構造の一部として識別します。

role="grid"

セル (`cell`) とグリッドセル (`gridcell`) を含む行を見つけることができる、表 (`table`) とツリーグリッド (`treegrid`) と共に 3 つの可能なコンテキストのうちの 1 つ。 グリッド (`grid`) は、セルを、ネイティブな HTML `<table>` 要素と同様に、行と列に配置されたデータを含むインタラクティブかもしれない表構造の一部として識別します。

role="treegrid" (en-US)

グリッド (`grid`) に似ていますが、ツリー (`tree`) と同じ方法で展開や折りたたみができる行があります。

#### サブクラスのロール

role="gridcell"

グリッド (`grid`) やツリーグリッド (`treegrid`) 内の行内のセル。

role="columnheader" (en-US)

列スコープを持つ HTML `<th>` 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、列ヘッダー (`columnheader`) ロールは、対応する列の全てのセルとの関係を確立します。

role="rowheader" (en-US)

行スコープを持つ HTML `<th>` 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、行ヘッダー (`rowheader`) ロールは、対応する行の全てのセルとの関係を確立します。

#### ステートとプロパティ

`aria-colspan` (en-US)

HTML の `<th>` と `<td>` 要素の `colspan` 属性と同様に、セルにまたがる列数を定義します。

`aria-rowspan` (en-US)

HTML の `<th>` と `<td>` 要素の `rowspan` 属性と同様に、セルにまたがる行数を定義します。

`aria-colindex` (en-US) 属性

`aria-colindex` 属性は、列が DOM から隠されている場合にのみ必要です。 この属性は、値として 1 から表 (`table`)、グリッド (`grid`)、ツリーグリッド (`treegrid`) 内の総列数の間の整数をとります。 `aria-colindex` は、行内の総列数に対する要素の列インデックスまたは位置を定義します。 全ての列が DOM 内にある場合、この属性は必要ありません。

`aria-rowindex` (en-US) 属性

`aria-rowindex` 属性は、行が DOM から隠されている場合にのみ必要で、現在のセルが総ての行のリスト内のどの行かを示します。 この属性は、値として 1 から表 (`table`)、グリッド (`grid`)、ツリーグリッド (`treegrid`) 内の総行数の間の整数をとり、セルの位置またはインデックスを示します。 たとえば、最初のヘッダーの最初の行のセルは `aria-rowindex="1"` と設定され、47 行目のセルは、DOM 内に全ての行が存在しないために `aria-rowindex` が必要な場合は、`aria-rowindex="47"` となるでしょう。 表示されている行が連続していて、`colspan` や `rowspan` が 1 より大きいセルがない場合、このプロパティは行の全てのセルの代わりに親の行に追加できます。

### キーボードインタラクション

無し

### 必要な JavaScript 機能

ARIA の第一のルールは、要素を転用して、ARIA のロール、ステート、プロパティを**追加**してアクセス可能にするのではなく、必要としている意味論と振る舞いがすでに組み込まれているネイティブな機能を使用できる場合は、そうすることです。 可能な限り、ARIA のセル (`cell`) ロールの代わりに HTML の `<td>` 要素を使用してください。

例
-

```html
<div
 role="table"
 aria-label="意味論的な要素"
 aria-describedby="semantic\_elements\_table\_desc"
 aria-rowcount="81">
  <div id="semantic\_elements\_table\_desc">
    ARIA のロールの代わりに使用する意味論的な要素
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader" aria-sort="none" aria-rowindex="1"
 >ARIA ロール</span
 >
      <span role="columnheader" aria-sort="none" aria-rowindex="1"
 >意味論的な要素</span
 >
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="cell" aria-rowindex="11">header</span>
      <span role="cell" aria-rowindex="11">h1</span>
    </div>
    <div role="row">
      <span role="cell" aria-rowindex="16">header</span>
      <span role="cell" aria-rowindex="16">h6</span>
    </div>
    <div role="row">
      <span role="cell" aria-rowindex="18">rowgroup</span>
      <span role="cell" aria-rowindex="18">thead</span>
    </div>
    <div role="row">
      <span role="cell" aria-rowindex="24">term</span>
      <span role="cell" aria-rowindex="24">dt</span>
    </div>
  </div>
</div>
```

上記は、DOM 内に 81 行のうち 5 行が存在する意味論的でない ARIA の表です。 表のヘッダー内に 1 行、表の本体内に 4 行あります。 全ての行が DOM 内にあるわけではないので、全てのセルに `aria-rowindex` プロパティを含めています。 複数の行や列にまたがるセルがない場合、`aria-rowindex` は行の個々のセルではなく行に配置されている可能性があります。

ベストプラクティス
---------

データ表構造には、`<table>`, `<tbody>`, `<thead>`, `<tr>`, `<th>`, `<td>`, などのみを使用してください。 CSS などを使用して、表のネイティブな意味論を削除しなくてはならない場合は、 ARIA ロールを追加してアクセシビリティを確保できます。 ARIA の表 (`table`) ロールの関連するユースケースは、display: grid など、CSS の display プロパティによって表のネイティブな意味論が上書きされる場合です。 この場合、ARIA の表 (`table`) ロールを使用して意味論を戻すことができます。

```html
<table
 role="table"
 aria-label="意味論的な要素"
 aria-describedby="semantic\_elements\_table\_desc"
 aria-rowcount="81">
  <caption id="semantic\_elements\_table\_desc">
    ARIA のロールの代わりに使用する意味論的な要素
  </caption>
  <thead role="rowgroup">
    <tr role="row">
      <th role="columnheader" aria-sort="none" aria-rowindex="1">
        ARIA ロール
      </th>
      <th role="columnheader" aria-sort="none" aria-rowindex="1">
        意味論的な要素
      </th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <td role="cell" aria-rowindex="11">header</td>
      <td role="cell" aria-rowindex="11">h1</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="16">header</td>
      <td role="cell" aria-rowindex="16">h6</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="18">rowgroup</td>
      <td role="cell" aria-rowindex="18">thead</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="24">term</td>
      <td role="cell" aria-rowindex="24">dt</td>
    </tr>
  </tbody>
</table>
```

上記は、表を作成する意味論的な方法です。 表のネイティブな意味論、つまり表の行が、display プロパティなどを介して変更されていない場合、ARIA ロールは必要ありません。

### 追加された利点

`<td>` に適用すると、`display: grid;` などで意味づけが削除された場合に、その要素にセルの意味づけを返します。

仕様
--

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # cell |
| Unknown specification  |

関連情報
----

* role="row"
* `role="gridcell"`
* HTML `<td>` 要素
* HTML `<th>` 要素
* HTML 表の高度な機能とアクセシビリティ
* HTML の表の基本


log ロールの使用 - アクセシビリティ

log ロールの使用
==========

### 説明

このテクニックは、`log` ロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。

`log` ロールは、新しい情報が意味のある順序で追加され、古い情報が消えるライブリージョンを作成する要素を識別するために使用されます。 たとえば、チャットログ、メッセージ履歴、エラーログなどです。 他のタイプのライブリージョンとは対照的に、このロールは順番に並べられ、新しい情報はログの末尾にのみ追加されます。 このロールが要素に追加されると、ブラウザーは支援技術製品にアクセス可能なログイベントを送信し、ユーザーにそれを通知することができます。

デフォルトでは、更新にはライブリージョンの変更のみが含まれ、ユーザーがアイドル状態のときにアナウンスされます。 変更の際にライブリージョン全体を聞く必要がある場合、 `aria-atomic="true"` を設定するべきです。 できるだけ早くアナウンスし、ユーザーが中断する可能性がある場合は、より積極的な更新のために `aria-live="assertive"` を設定することができます。

### ユーザーエージェントと支援技術への影響

要素に `log` ロールが追加されたとき、またはそのような要素が可視になるとき、ユーザーエージェントは以下を行うべきです。

* オペレーティングシステムのアクセシビリティ API で `log` ロールを持つ要素を公開します。
* オペレーティングシステムのアクセシビリティ API がサポートされている場合は、アクセシビリティ API を使用してアクセス可能なログイベントを発生させます。

支援技術製品は、そのようなイベントをリスンし、それに応じてユーザーに以下を通知するべきです。

* `aria-live="assertive"` が設定されておらず、ユーザーが中断されている場合を除き、スクリーンリーダーは、ユーザーがアイドル状態のときにログ内の変更をアナウンスするべきです。
* スクリーン拡大鏡は、ログ更新が発生したことを視覚的に示すことができます。

**メモ:** 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。

### 例

#### 例 1: HTML コードにロールを追加する

以下のスニペットは、`log` ロールを HTML ソースコードに直接追加する方法を示しています。

```html
<div id="liveregion" class="region" role="log"></div>
```

#### 例 2: サンプルアプリケーションからのスニペット

このスニペットは AJAX チャットアプリケーションにおいてチャットログを作成します。

```html
<div id="chatArea" role="log">
  <ul id="chatRegion" aria-live="polite" aria-atomic="false">
    <li>AJAX チャットの使用を開始するには、ユーザー名を選択してください。</li>
  </ul>
  <ul
 id="userListRegion"
 aria-live="off"
 aria-relevant="additions removals text"></ul>
</div>
```

#### 動作する例

* http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/
### 注

* 要素に `log` ロールを使用すると、その要素には `aria-live="polite"` が暗黙で含まれます。
* 株式相場表示機のようにスクロールするテキストがある領域では、`marquee` ロールを代わりに使用するべきです。
### 使用された ARIA 属性

* log
### 関連する ARIA 技術

* marquee ロール
### 互換性

TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する

### その他のリソース

* ARIA のベストプラクティス - ライブリージョンの実装: http://www.w3.org/TR/wai-aria-practices/#LiveRegions


ARIA: region ロール - アクセシビリティ

ARIA: region ロール
================

リージョン (`region`) ランドマークロールは、文書内で、著者が重要であると識別した領域を識別するために使用されます。 これは、他のランドマークロールのどれも適切でないときでも、汎用のランドマークを提供することで、人々が容易にナビゲートできるようにするために使用されます。

```html
<div role="region" aria-label="例">
  <!-- リージョンのコンテンツ -->
</div>
```

説明
--

リージョン (`region`) ロールは、ARIA のランドマークロールです。 ランドマークロールは、ウェブページの構成と構造を識別する方法を提供します。 ページのセクションを分類およびラベル付けすることにより、レイアウトを通じて視覚的に伝達される構造情報がプログラム的に表されます。 スクリーンリーダーは、ランドマークロールを使用して、ページの重要なセクションにキーボードナビゲーションを提供します。

リージョン (`region`) ロールは、ユーザーがそのセクションに簡単にナビゲートし、ページの要約にリストされることを望むほど重要なコンテンツのセクションのために予約するべきです。 リージョン (`region`) ロールはより汎用の用語であり、識別が必要なセクションが、`banner`、`main`、`contentinfo`、`complementary`、`navigation` などの他のランドマークロールのいずれかによって正確に説明できない場合にのみ使用するべきです。

リージョン (`region`) ロールを持つすべての要素には、リージョン内のコンテンツの目的を説明するラベルを含めるべきで、目に見えるヘッダーを参照する `aria-labelledby` を伴うのが好ましいです。 目に見える適切なヘッダーがない場合は、`aria-label` を使用するべきです。

リージョン (`region`) ランドマークロールのコンテンツは、文書のメインコンテンツから分離されている場合にも意味をなすべきです。

`<section>` 要素を使用すると、アクセス可能な名前が与えられている場合、自動的にセクションがリージョン (`region`) ロールを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素（この場合は `<section>`）を常に使用するべきです。

### 関連する WAI-ARIA のロール、ステート、プロパティ

aria-labelledby

リージョンにラベルを付けるには、この属性を使用します。 多くの場合、`aria-labelledby` 属性の値は、セクションのタイトルに使用される要素の ID になります。

### キーボードインタラクション

無し

### 必要な JavaScript 機能

無し

例
-

```html
<div role="region" aria-labelledby="region-heading">
  <h2 id="region-heading">
    この見出しの
    <code>id</code>
    属性は、このリージョンがアクセス可能な名前を持つのに役立ちます
  </h2>
  <!-- リージョンのコンテンツ -->
</div>
```

アクセシビリティに関する懸念
--------------

控えめに使用してください！ ランドマークロールは、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。

他の関連コンテンツセクショニング要素またはランドマークロールが当てはまらない場合にのみ、リージョン (`region`) ロールを使用してください。 ページ上に複数のリージョンが存在する場合は、そのページの全体構造を再検討する価値があります。

ベストプラクティス
---------

### 好ましい HTML

`<section>` 要素を使用すると、アクセス可能な名前が与えられている場合、自動的にセクションがリージョン (`region`) ロールを持つことを伝えます。 可能であれば、`<section>` を代わりに使用することをお勧めします。

### ランドマークのラベル付け

文書に複数のリージョン (`region`) ランドマークロールがある場合は、それぞれにラベルを付けます。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解することができます。

```html
<div role="region" aria-labelledby="use-discretion">
  <h3 id="use-discretion">
    慎重に <code>region</code> ロールを使用してください
  </h3>
  <!-- コンテンツ -->
</div>

...

<div role="region" aria-labelledby="please-reconsider">
  <h3 id="please-reconsider">文書構造を再検討してください</h3>
  <!-- コンテンツ -->
</div>
```

この例では、リージョンのラベルは `aria-labelledby` 属性によって作成されています。

### オーバーフローテキストを含むコンテンツ領域のスクロール

`tabindex="0"` のコンテンツ領域がある場合は、`role="region"` を追加して、汎用のリージョンであるとスクリーンリーダーのユーザーに伝えます。 これは、キーボードのみのユーザーがオーバーフローテキストを含むリージョンをスクロールできるようにするためです。

### SVG

SVG の個々のセクションを説明できるようにするために、SVG の領域上に `role="region"` を `aria-label` とともに宣言することができます。

### 追加された利点

ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーは文書の大きなセクションを素早く識別してナビゲートできます。

* ランドマークブラウザー拡張（英語）
仕様
--

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # region |
| Unknown specification  |

スクリーンリーダーのサポート
--------------

TBD

関連情報
----

* `<section>`: 汎用セクション要素
* region (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1
* HTML のセクションとアウトラインの使用
* ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ
* Using WAI-ARIA Landmarks – 2013 | The Paciello Group
* Accessible Landmarks | scottohara.me
* The section element | HTML5 Doctor

1. **WAI-ARIA ロール**
    1. `alertdialog ロールの使用`
    2. `ARIA: alert ロール`
    3. `ARIA: application ロール`
    4. `ARIA: article ロール`
    5. `ARIA: banner ロール`
    6. `ARIA: button ロール`
    7. `ARIA: cell ロール`
    8. `ARIA: checkbox ロール`
    9. `ARIA: complementary ロール`
    10. `ARIA: contentinfo ロール`
    11. `ARIA: dialog ロール`
    12. `ARIA: document ロール`
    13. `ARIA: feed ロール`
    14. `ARIA: figure ロール`
    15. `ARIA: form ロール`
    16. `ARIA: grid ロール`
    17. `ARIA: gridcell ロール`
    18. `ARIA: heading ロール`
    19. `ARIA: list ロール`
    20. `ARIA: listbox ロール`
    21. `ARIA: listitem ロール`
    22. `ARIA: main ロール`
    23. `ARIA: navigation ロール`
    24. `ARIA: option ロール`
    25. `ARIA: region ロール`
    26. `ARIA: row ロール`
    27. `ARIA: rowgroup ロール`
    28. `ARIA: search ロール`
    29. `ARIA: switch ロール`
    30. `ARIA: tab ロール`
    31. `ARIA: table ロール`
    32. `ARIA: term ロール`
    33. `ARIA: textbox ロール`
    34. `group ロールの使用`
    35. `link ロールの使用`
    36. `log ロールの使用`
    37. `presentation ロールの使用`
    38. `progressbar ロールの使用`
    39. `radio ロールの使用`
    40. `slider ロールの使用`
    41. `status ロールの使用`
    42. `toolbar ロールの使用`


ARIA: list ロール - アクセシビリティ

ARIA: list ロール
==============

ARIA のリスト (`list`) ロールは、項目のリストを識別するために使用できます。 これは通常、リスト内に含まれるリスト項目を識別するために使用するリスト項目 (`listitem`) ロールと組み合わせて使用します。

```html
<section role="list">
  <div role="listitem">リスト項目 1</div>
  <div role="listitem">リスト項目 2</div>
  <div role="listitem">リスト項目 3</div>
</section>
```

説明
--

外側のコンテナーとその内側の要素のリストで構成されるコンテンツは、それぞれリスト (`list`) とリスト項目 (`listitem`) のコンテナーを使用して支援技術で識別できます。 リスト (`list`) は、1 つ以上のリスト項目 (`listitem`) の子を持つか、代わりに 1 つ以上のグループ (`group`) が子として存在し、各グループ (`group`) が 1 つ以上のリスト項目 (`listitem`) を子として持つ必要があります。

リストとリスト項目をマークアップするためにどの要素を使用するべきかについて、鉄則はありませんが、リスト項目がリストのコンテキストで意味をなすようにするべきです (例えば、買い物リスト、料理の手順、運転の指示) 。

**警告:** 可能な限り、適切な意味論の HTML 要素を使用して、リストとそのリスト項目 (`<ul>` や `<ol>` と `<li>`) をマークアップするべきです。 詳しい例は、ベストプラクティスを参照してください。

### 関連する WAI-ARIA のロール、ステート、プロパティ

listitem

リストやディレクトリー内の単一項目。 リスト項目ロールを持つ要素は、リスト (`list`) ロールやグループ (`group`) ロールを持つ要素内にのみ存在します。

group

ページの目次に掲載されるほど重要ではなく、リスト内にネストされている場合はリスト項目に限定される、関連するオブジェクトのコレクションです。

### キーボードインタラクション

無し

### 必要な JavaScript 機能

無し

例
-

ARIA Lists — Scott O'Hara によるいくつかの有用な例と考え (英語)

ベストプラクティス
---------

`role="list"` と `role="listitem"` は必要な場合のみ使用してください。 例えば、HTML を制御できなくても、JavaScript で事後に動的にアクセシビリティを向上させることができる場合です。

HTML の `<ol>` と `<ul>` とは異なり、ARIA のリスト (`list`) ロールは順序付きリストと順序無しリストを区別しません。 可能な場合は、リスト (`<ol>` と `<ul>`) とリスト項目 (`<li>`) をマークアップするのに適切な意味論の HTML 要素を使用するべきです。 例えば、上記の例は次のように書き直すべきです。

```html
<ul>
  <li>リスト項目 1</li>
  <li>リスト項目 2</li>
  <li>リスト項目 3</li>
</ul>
```

また、リスト項目の順序が重要な場合は、順序付きリストを使用します。

```html
<ol>
  <li>リスト項目 1</li>
  <li>リスト項目 2</li>
  <li>リスト項目 3</li>
</ol>
```

**メモ:** ARIA のリストロールとリスト項目ロールでは、順序付きリストと順序無しリストを区別しません。

余談ですが、意味論的な HTML 要素である `ol` または `ul` を使用してプレゼンテーション (`presentation`) ロールを適用する場合、ARIA ではリスト項目 (`listitem`) 要素に親のリスト (`list`) 要素が必須であるため、各子 `li` 要素はプレゼンテーション (`presentation`) ロールを継承することに注意してください。 そのため、`li` 要素は支援技術には公開されませんが、ネストされたリストを含め、これらの `li` 要素の内部に含まれる要素は、支援技術からは見えることになります。

**メモ:** タブ付きインターフェイスとして機能する項目のリストをマークアップする場合は、代わりにタブ (`tab`)、タブパネル (`tabpanel`)、タブリスト (`tablist`) のロールを使用するべきです。

仕様
--

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # list |

スクリーンリーダーのサポート
--------------

TBD

関連情報
----

* Accessibility Object Model
* ARIA in HTML
* `<ul>`
* `<ol>`
* `<li>`
* ARIA: listitem ロール
* ARIA: group ロール

1. **WAI-ARIA ロール**
    1. `alertdialog ロールの使用`
    2. `ARIA: alert ロール`
    3. `ARIA: application ロール`
    4. `ARIA: article ロール`
    5. `ARIA: banner ロール`
    6. `ARIA: button ロール`
    7. `ARIA: cell ロール`
    8. `ARIA: checkbox ロール`
    9. `ARIA: complementary ロール`
    10. `ARIA: contentinfo ロール`
    11. `ARIA: dialog ロール`
    12. `ARIA: document ロール`
    13. `ARIA: feed ロール`
    14. `ARIA: figure ロール`
    15. `ARIA: form ロール`
    16. `ARIA: grid ロール`
    17. `ARIA: gridcell ロール`
    18. `ARIA: heading ロール`
    19. `ARIA: list ロール`
    20. `ARIA: listbox ロール`
    21. `ARIA: listitem ロール`
    22. `ARIA: main ロール`
    23. `ARIA: navigation ロール`
    24. `ARIA: option ロール`
    25. `ARIA: region ロール`
    26. `ARIA: row ロール`
    27. `ARIA: rowgroup ロール`
    28. `ARIA: search ロール`
    29. `ARIA: switch ロール`
    30. `ARIA: tab ロール`
    31. `ARIA: table ロール`
    32. `ARIA: term ロール`
    33. `ARIA: textbox ロール`
    34. `group ロールの使用`
    35. `link ロールの使用`
    36. `log ロールの使用`
    37. `presentation ロールの使用`
    38. `progressbar ロールの使用`
    39. `radio ロールの使用`
    40. `slider ロールの使用`
    41. `status ロールの使用`
    42. `toolbar ロールの使用`


ARIA: navigation ロール - アクセシビリティ

ARIA: navigation ロール
====================

ナビゲーション (`navigation`) ランドマークロールは、ウェブサイトやページコンテンツをナビゲートするために使用される主要なリンクのグループを識別するために使用します。

```html
<div role="navigation" aria-label="メイン">
  <!-- 主要なウェブサイトの場所へのリンクのリスト -->
</div>
```

これはウェブサイトのメインナビゲーションです。

説明
--

ナビゲーション (`navigation`) ロールは、ランドマークロールです。 ランドマークロールは、ウェブページの構成と構造を識別する方法を提供します。 ページのセクションを分類およびラベル付けすることにより、レイアウトを通じて視覚的に伝えられる構造情報をプログラムで表現することができます。 スクリーンリーダーは、ランドマークロールを使用して、ページの重要なセクションへのキーボードナビゲーションを提供します。 HTML の `<nav>` 要素と同様に、ナビゲーションランドマークは、ウェブサイトまたはページコンテンツのナビゲーションに使用するリンクのグループ (例えば、リスト) を識別する手段を提供します。 1 つのページに複数のナビゲーションランドマークが含まれている場合は、それぞれが固有のラベルを持つべきです。 ページ上の 2 つ以上のナビゲーションに関するランドマークが同じリンクのセットを持つ場合は、それぞれに同じラベルを使用してください。

ナビゲーションランドマークを定義するには、HTML5 の `<nav>` 要素を使用することをお勧めします。 HTML5 の `<nav>` 要素の手法を使用しない場合は、`role="navigation"` 属性を使用してナビゲーションランドマークを定義してください。

**メモ:** `<nav>` 要素を使用すると、自動的にセクションがナビゲーション (`navigation`) ロールを持つことを伝えることができます。 開発者は、ARIA を使用するよりも、正しい意味論の HTML 要素を使用することを常に好むべきです。

### 関連する WAI-ARIA のロール、ステート、プロパティ

aria-label

ナビゲーションの目的を簡単に説明します。 スクリーンリーダーはロールとラベルの内容の両方を読み上げるので、「ナビゲーション」という用語を省略します。

### キーボードインタラクション

無し

### 必要な JavaScript 機能

無し

例
-

```html
<div role="navigation" aria-label="顧客サービス">
  <ul>
    <li><a href="#">ヘルプ</a></li>
    <li><a href="#">注文追跡</a></li>
    <li><a href="#">出荷と配達</a></li>
    <li><a href="#">返品</a></li>
    <li><a href="#">お問い合わせ</a></li>
    <li><a href="#">お店を探す</a></li>
  </ul>
</div>
```

アクセシビリティに関する懸念
--------------

ランドマークロールは、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。

ベストプラクティス
---------

### 好ましい HTML

`<nav>` 要素を使用すると、自動的にセクションがナビゲーション (`navigation`) ロールを持つことを伝えます。 可能な限り、`<nav>` 要素を代わりに使用することをお勧めします。

### ランドマークのラベル付け

#### 複数のランドマーク

文書内に複数のナビゲーション (`navigation`) ランドマークロールや `<nav>` 要素がある場合は、各ランドマークに対してラベルを付けてください。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすぐに理解することができます。

```html
<div id="main-nav" role="navigation" aria-label="メイン">
  <!-- コンテンツ -->
</div>

...

<nav id="footer-nav" aria-label="フッター">
  <!-- コンテンツ -->
</nav>
```

#### 繰り返されるランドマーク

文書内のナビゲーション (`navigation`) ランドマークロールや `<nav>` 要素が文書内で繰り返され、両方のランドマークのコンテンツが同じ場合は、それぞれのランドマークに同じラベルを使用します。 この例としては、ページの上部と下部でメインナビゲーションを繰り返すことが挙げられます。

```html
<header>
  <nav id="main-nav" aria-label="メイン">
    <!-- 主要なウェブサイトの場所へのリンクのリスト -->
  </nav>
</header>

...

<footer>
  <nav id="footer-nav" aria-label="メイン">
    <!-- 主要なウェブサイトの場所へのリンクのリスト -->
  </nav>
</footer>
```

#### 冗長な説明

スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、`aria-label="主要なナビゲーション"` の `role="navigation"` の宣言は、「主要なナビゲーションナビゲーション」のように重複してアナウンスされます。

### 追加された利点

ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、スクリーンリーダーを使用していないユーザーでも文書の大きなセクションを素早く識別してナビゲートできます。

* ランドマークブラウザー拡張 (英語)
仕様
--

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # navigation |
| Unknown specification  |

スクリーンリーダーのサポート
--------------

TBD

関連情報
----

* <nav>: ナビゲーションセクション要素
* navigation (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1
* HTML のセクションとアウトラインの使用
* ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ
* Using WAI-ARIA Landmarks – 2013 | The Paciello Group
* Accessible Landmarks | scottohara.me
* Semantic navigation with the nav element | HTML5 Doctor

1. **WAI-ARIA ロール**
    1. `alertdialog ロールの使用`
    2. `ARIA: alert ロール`
    3. `ARIA: application ロール`
    4. `ARIA: article ロール`
    5. `ARIA: banner ロール`
    6. `ARIA: button ロール`
    7. `ARIA: cell ロール`
    8. `ARIA: checkbox ロール`
    9. `ARIA: complementary ロール`
    10. `ARIA: contentinfo ロール`
    11. `ARIA: dialog ロール`
    12. `ARIA: document ロール`
    13. `ARIA: feed ロール`
    14. `ARIA: figure ロール`
    15. `ARIA: form ロール`
    16. `ARIA: grid ロール`
    17. `ARIA: gridcell ロール`
    18. `ARIA: heading ロール`
    19. `ARIA: list ロール`
    20. `ARIA: listbox ロール`
    21. `ARIA: listitem ロール`
    22. `ARIA: main ロール`
    23. `ARIA: navigation ロール`
    24. `ARIA: option ロール`
    25. `ARIA: region ロール`
    26. `ARIA: row ロール`
    27. `ARIA: rowgroup ロール`
    28. `ARIA: search ロール`
    29. `ARIA: switch ロール`
    30. `ARIA: tab ロール`
    31. `ARIA: table ロール`
    32. `ARIA: term ロール`
    33. `ARIA: textbox ロール`
    34. `group ロールの使用`
    35. `link ロールの使用`
    36. `log ロールの使用`
    37. `presentation ロールの使用`
    38. `progressbar ロールの使用`
    39. `radio ロールの使用`
    40. `slider ロールの使用`
    41. `status ロールの使用`
    42. `toolbar ロールの使用`


ARIA: feed ロール - アクセシビリティ

ARIA: feed ロール
==============

フィード (`feed`) は動的にスクロール可能な記事 (`article`) のリスト (`list`) で、ユーザーがスクロールすると記事がリストのどちらかの端から追加または削除されます。 フィード (`feed`) により、スクリーンリーダーは閲覧モードの読み取りカーソルを使用して、リッチコンテンツのストリームを読み込みながらスクロールすることを可能にし、ユーザーが読むにつれてコンテンツをさらにロードすることで無限にスクロールし続けることができます。

```html
<section role="feed" aria-busy="false">
  ...
  <article aria-posinset="427" aria-setsize="-1">...</article>
  <article aria-posinset="428" aria-setsize="-1">...</article>
  <article aria-posinset="429" aria-setsize="-1">...</article>
  ...
</section>
```

説明
--

フィードは、スクロール可能な記事 (`article`) のリスト (list) のためのページ構造であり、スクロールすることで、リストの先頭または末尾に記事が追加される場合があります。 このリストは、ウェブページと支援技術との間の相互運用契約を確立するもので、支援技術のユーザーが記事を読み、記事を前後にジャンプし、読み取りモードで新しい記事を確実にロードできるように、スクロールのインタラクションを管理します。 例としては、RSS フィード、ニュースフィード、Facebook (フェイスブック) 、Instagram (インスタグラム) 、Twitter (ツイッター) などのソーシャルメディアフィード、さらには電子商取引ページ上の関連商品のリストなどがあります。 これらのストリームは有限か無限であり、ユーザーがスクロールするにつれてコンテンツをさらにロードします。 フィードパターンを実装することで、スクリーンリーダーは読み取りモードでフィードコンテンツを確実に読み取り、ロードをトリガーすることができます。

フィード (`feed`) は、コンテナ要素であり、その子は `<article>` であるか、記事 (`article`) ロールを持ちます。 フィード内の各記事は、`tabindex` が 0 または -1 でフォーカス可能であるべきです。 記事またはその子孫要素にフォーカスが移ったときに、記事をスクロールして表示するべきです。 記事の追加がブラウザーのメインスレッドを占有する場合は、フィード自体に `aria-busy="true"` を設定し、処理が終了したら必ず `false` に戻すようにしてください。 そうしないと、ユーザーに更新が表示されない場合があります。

優れたユーザーエクスペリエンスを確保するため、フィード (`feed`) の途中で記事を挿入または削除しないようにし、ユーザーがフィードの末端に到達する前に新しい記事をロードし、キーボードユーザーがフィード内をナビゲートできるように記事間でフォーカスを移動するためのキーボードコマンドを提供します。 下記のキーボードインタラクションを参照してください。

記事の数がわかっている場合は、記事自体に `aria-setsize` を設定してください。 ただし、総数が非常に大きい場合、不明確な場合、または頻繁に変わる場合は、`aria-setsize="-1"` を設定してフィードのサイズがわからないことを示します。

フィードパターンのもう 1 つの特徴は、斜め読みです。 フィード内の記事には、`aria-label` によるアクセス可能な名前と `aria-describeby` による説明の両方を含めることで、記事をナビゲートするときに、ラベルの後にどの要素を話すべきかをスクリーンリーダーに提案することができます。 タイトルと主要コンテンツを提供する記事内の要素を特定することで、支援技術は、ユーザが記事から記事へとジャンプし、読みたい記事を効率的に見分けることを可能にする機能を提供できます。

フィードパターンは、ウェブページと支援技術の間に次の相互運用性に関する合意を確立することによって、信頼できる支援技術の読み取りモードでのインタラクションを可能にします。

1. フィードのコンテキストでは、ウェブページのコードは次の責任を負います。
    * どの記事に DOM フォーカスが含まれているかに基づいて、コンテンツを適切に視覚的にスクロールします。
    * どの記事に DOM フォーカスが含まれているかに基づいて、フィード記事をロードまたは削除します。
2. フィードのコンテキストでは、読み取りモードを持つ支援技術は次の責任を負います。
    * 記事要素またはその子孫の 1 つに DOM フォーカスがあることを保証することで、どの記事に読み取りカーソルがあるかを示します。
    * DOM フォーカスを次の記事および前の記事に移動するための読み取りモードキーを提供します。
    * 読み取りカーソルと DOM フォーカスをフィードの終わりより後ろとフィードの始まりより前に移動するための読み取りモードキーを提供します。
### キーボードインタラクション

フォーカスがフィード内にある場合は、次のような、または同様のインターフェイスをサポートすることをお勧めします。

* `Page Down`
 : 次の記事にフォーカスを移動します。
* `Page Up`
 : 前の記事にフォーカスを移動します。
* `Control + End`
 : フィードの後方で最初にフォーカス可能な要素にフォーカスを移動します。
* `Control + Home`
 : フィードの前方で最初にフォーカス可能な要素にフォーカスを移動します。

ブログ投稿のフィード内のコメントフィードなど、フィードがフィード内にネストしている場合、慣例では、`Tab` キーでネストしているフィードにタブ移動で入り、「外側の」記事からその記事内にネストしているフィードの最初の項目にナビゲートするための `Alt + Page Down` などの別のキーを提供します。 ネストしているフィードとメインフィードの間をナビゲートするには、`Control + End` で内側のフィードから外側のフィードの次の記事にフォーカスを移動します。

### 関連する WAI-ARIA のロール、ステート、プロパティ

aria-label

フィードに目に見えるタイトルがない場合、フィード (`feed`) 要素は `aria-label` で指定されたラベルを持ちます。 もしそうしている場合は、`aria-labelledby` を参照してください。

aria-labelledby

フィードに目に見えるタイトルがある場合、フィード (`feed`) 要素はタイトルを含む要素を参照する `aria-labelledby` を持ちます。 そうでない場合は、`aria-label` を追加してください。

aria-busy

記事をフィード (`feed`) に追加または削除しているときなど、忙しい場合は、更新操作中に `aria-busy="true"` を設定します。 操作が完了したら、必ず `false` にリセットしてください。 そうしないと、変更結果を見ることができないかもしれません。

article

フィード内のコンテンツの各セクションは、`<article>` または記事 (`article`) ロールを持つ要素に含まれているべきです。 各記事 (`article`) は、その記事のタイトルまたは識別ラベルとしての機能を果たすその他の子を参照する `aria-labelledby` を持つべきです。 各記事は、好ましくは、その記事の主要コンテンツとしての機能を果たす記事内の１つ以上の要素を参照する `aria-describedby` を持つべきです。 各記事 (`article`) 要素は、フィード内の位置を表す値に設定された `aria-posinset` と、ロード済みの記事の総数またはフィード内の総数を表す値のどちらかに設定された `aria-setsize` を持ちます。 それは、どちらの値がユーザーにとってより役立つかによって異なります。 フィード内の総数がわからない場合は、`aria-setsize="-1"` を設定してください。

### 必要な JavaScript 機能

なし (任意の属性が必要とする場合を除く。 例えば、必要に応じて更新操作中に `aria-busy` を `true` に設定し、完了したら `false` に設定します。)

例
-

フィードパターンの実装例 (英語)

仕様
--

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # feed |

スクリーンリーダーのサポート
--------------

Coming soon

関連情報
----

* HTML `<article>` 要素
* HTML のリスト
* ARIA: article ロール
* ARIA: list ロール
* WAI-ARIA Authoring Practices — フィードデザインパターンの実装に関する詳細。 (英語)

1. **WAI-ARIA ロール**
    1. `alertdialog ロールの使用`
    2. `ARIA: alert ロール`
    3. `ARIA: application ロール`
    4. `ARIA: article ロール`
    5. `ARIA: banner ロール`
    6. `ARIA: button ロール`
    7. `ARIA: cell ロール`
    8. `ARIA: checkbox ロール`
    9. `ARIA: complementary ロール`
    10. `ARIA: contentinfo ロール`
    11. `ARIA: dialog ロール`
    12. `ARIA: document ロール`
    13. `ARIA: feed ロール`
    14. `ARIA: figure ロール`
    15. `ARIA: form ロール`
    16. `ARIA: grid ロール`
    17. `ARIA: gridcell ロール`
    18. `ARIA: heading ロール`
    19. `ARIA: list ロール`
    20. `ARIA: listbox ロール`
    21. `ARIA: listitem ロール`
    22. `ARIA: main ロール`
    23. `ARIA: navigation ロール`
    24. `ARIA: option ロール`
    25. `ARIA: region ロール`
    26. `ARIA: row ロール`
    27. `ARIA: rowgroup ロール`
    28. `ARIA: search ロール`
    29. `ARIA: switch ロール`
    30. `ARIA: tab ロール`
    31. `ARIA: table ロール`
    32. `ARIA: term ロール`
    33. `ARIA: textbox ロール`
    34. `group ロールの使用`
    35. `link ロールの使用`
    36. `log ロールの使用`
    37. `presentation ロールの使用`
    38. `progressbar ロールの使用`
    39. `radio ロールの使用`
    40. `slider ロールの使用`
    41. `status ロールの使用`
    42. `toolbar ロールの使用`


slider ロールの使用 - アクセシビリティ

slider ロールの使用
=============

このテクニックは、`slider` ロールの使い方を示し、ブラウザーと支援技術に及ぼす影響について説明します。

`slider` ロールは、ユーザーが所定の範囲内から値を選択できるマークアップに使用されます。 `slider` ロールは、値を変更するために調節するコントロールである「つまみ」に割り当てられます。 ユーザーがつまみとやり取りするとき、アプリケーションはスライダーの `aria-valuenow`（および可能なら `aria-valuetext`）属性をプログラムで調整して現在の値を反映する必要があります。 詳細については、下記の例のセクションを参照してください。

### キーボードとフォーカス

スライダーはキーボードでフォーカス可能で操作可能であるべきです。 ユーザーがタブキーでスライダーにフォーカスを合わせると、フォーカスはつまみに当たるべきです。 つまみはマウスのユーザーがドラッグするコントロールです。 矢印キーは、次のように操作する必要があります（右から左の言語のローカライゼーションは矢印の方向を逆にする必要があります）。

| キー | 動作 |
| --- | --- |
| 右矢印と上矢印 | 選択した値を増やす |
| 左矢印と下矢印 | 選択した値を減らす |
| ページアップとページダウン | オプションで、設定した量だけ値を増減します（例えば、0 ～ 100 の範囲で 10 ずつ） |

ユーザーエージェントと支援技術への影響
-------------------

**メモ:** 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。

例
-

### 例 1: 単純な数値範囲

次の例では、単純なスライダーを使用して 1 ～ 100 の値を選択しています。 現在のボリュームは 50 です。 アプリケーションは、ユーザーの入力に応じてプログラムで `aria-valuenow` の値を更新します。

```html
<label for="fader">ボリューム</label>
<input
 type="range"
 id="fader"
 min="1"
 max="100"
 value="50"
 step="1"
 aria-valuemin="1"
 aria-valuemax="100"
 aria-valuenow="50"
 oninput="outputUpdate(value)" />
<output for="fader" id="volume">50</output>
```

次のコードスニペットを使用すると、ユーザー入力によって更新された出力を返すことができます。
```

function outputUpdate(vol) {
  document.querySelector('#volume').value = vol;
}
```

### 例 2: テキスト値

時には、意味的には数字ではない値を選択するためにスライダーが使用されることがあります。 このような場合、`aria-valuetext` 属性を使用して、現在選択されている値に対して適切なテキスト名を指定します。 次の例では、スライダーを使用して曜日を選択しています。

```html
<label id="day-label">曜日</label>
<div class="day-slider">
  <div id="day-handle" class="day-slider-handle" role="slider" aria-labelledby="day-label"
 aria-valuemin="1"
 aria-valuemax="7"
 aria-valuenow="2
 aria-valuetext="月曜日">
 </div>
</div>
```

以下のコードスニペットは、ユーザーの入力に応答して `aria-valuenow` および `aria-valuetext` 属性を更新する関数を示しています。

```js
var dayNames = [
  "日曜日",
  "月曜日",
  "火曜日",
  "水曜日",
  "木曜日",
  "金曜日",
  "土曜日",
];
var updateSlider = function (newValue) {
  var handle = document.getElementById("day-handle");
  handle.setAttribute("aria-valuenow", newValue.toString());
  handle.setAttribute("aria-valuetext", dayNames[newValue]);
};
```

注
-

使用された ARIA 属性
-------------

* aria-valuemin
* aria-valuemax
* aria-valuenow
* aria-valuetext
* aria-orientation
関連する ARIA 技術
------------

互換性
---

TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する

その他のリソース
--------

* slider ロールの WAI-ARIA 仕様（英語）


ARIA: form ロール - アクセシビリティ

ARIA: form ロール
==============

フォーム (`form`) ランドマークロールは、HTML のフォームと同等の機能を提供するページ上の要素のグループを識別するために使用できます。

```html
<div role="form" id="contact-info" aria-label="連絡先">
  <!-- フォームのコンテンツ -->
</div>
```

これは、ユーザーの連絡先を収集して保存するフォームです。

**警告:** 十分に正当な理由がない限り、ARIA の フォーム (`form`) ロールではなく、HTML の `<form>` 要素を使用してフォームコントロールを格納してください。 HTML の `<form>` 要素は、支援技術にフォームがあることを伝えるのに十分です。

説明
--

フォーム (`form`) ランドマーク (landmark) は、(メイン (`main`) や検索 (`search`) など) 他の名前付きランドマークが適切でない場合に、全体として結合してフォームを作成する、項目とオブジェクトのコレクションを含むコンテンツのリージョンを識別します。

**メモ:** `<form>` 要素を使用すると、アクセス可能な名前が提供されている場合、コンテンツのセクションがフォーム (`form`) ランドマークとして自動的に伝えられます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を使用することを常に好むべきです。

可能であれば、HTML の `<form>` 要素を使用してください。 `<form>` 要素は、アクセス可能な名前 (`aria-labelledby`、`aria-label`、`title` など) がある場合にフォーム (`form`) ランドマークを定義します。 ユーザーがフォームの目的を理解できるように、文書内の各フォームに一意のラベルを付けるようにしてください。 このラベルは、支援技術のユーザーだけでなく、全てのユーザーに表示するべきです。 フォームを検索機能に使用する場合は、フォーム (`form`) ランドマークの代わりに検索 (`search`) ランドマークを使用してください。

`role="form"` は、ページのリージョンを識別するために使用し、フォームフィールドそれぞれを識別するために使用しないでください。 `<form>` の代わりにフォーム (`form`) ランドマークを使用している場合でも、`<button>`、`<input>`、`<select>`、`<textarea>` などのネイティブな HTML フォームコントロールを使用することをお勧めします。

### 関連する WAI-ARIA のロール、ステート、プロパティ

ロールに固有のステートやプロパティはありません。

### キーボードインタラクション

ロールに固有のキーボードインタラクションはありません。

### 必要な JavaScript 機能

`onsubmit`

onSubmit イベントハンドラーは、フォームの送信時に発生するイベントを処理します。 `<form>` でないものは送信できないため、JavaScript を使用して、`XMLHTTPRequest` などの代替データ送信メカニズムを構築する必要があります。

例
-

```html
<div role="form" id="send-comment" aria-label="コメントを追加">
  <label for="username">ユーザー名</label>
  <input
 id="username"
 name="username"
 autocomplete="nickname"
 autocorrect="off"
 type="text" />

  <label for="email">電子メール</label>
  <input
 id="email"
 name="email"
 autocomplete="email"
 autocapitalize="off"
 autocorrect="off"
 spellcheck="false"
 type="text" />

  <label for="comment">コメント</label>
  <textarea id="comment" name="comment"></textarea>

  <input value="コメント" type="submit" />
</div>
```

代わりに `<form>` を使用することをお勧めします。

```html
<form id="send-comment" aria-label="コメントを追加">....</form>
```

アクセシビリティに関する懸念
--------------

### 控えめに使用する

ランドマークロールは、文書のより大きな全体的なセクションを識別することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。

### 入力はフォームではない

フォーム要素（入力、テキスト領域、選択など）それぞれで `role="form"` を宣言する必要はありません。 それは、フォーム要素を包む HTML 要素で宣言するべきです。 理想的には、包む要素として `<form>` 要素を使用し、`role="form"` を宣言しないでください。

### 検索

フォームを検索に使用する場合は、より専門化した `role="search"` 値を使用するべきです。

### ランドマークのラベル付け

ランドマークとして公開する必要がある、それぞれの `<form>` 要素とフォームロール (form `role`) には、アクセス可能な名前を付ける必要があります。 この名前により、支援技術のユーザーはフォームランドマークの目的をすばやく理解できるようになります。

`role="form"` を与えたのと同じ要素で、`aria-labelledby`、`aria-label`、または `title` を使用して、アクセス可能な名前を付けます。

#### `role="form"` の使用

```html
<div role="form" id="gift-cards" aria-label="ギフトカードの購入">
  <!-- フォームのコンテンツ -->
</div>
```

#### 冗長な説明

スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、`role="form"` の宣言に `aria-label="お問い合わせフォーム"` を使用した場合、「お問い合わせフォームフォーム」として重複してアナウンスすることがあります。

ベストプラクティス
---------

### 好ましい HTML

`<form>` 要素を使用すると、セクションがフォーム (`form`) ロールを持つことを自動的に伝えます。 可能であれば、`<form>` を代わりに使用することをお勧めします。

### 追加された利点

ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、スクリーンリーダーを使用していないユーザーでも文書の大きなセクションを素早く識別してナビゲートできます。

* ランドマークブラウザー拡張（英語）
仕様
--

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # form |
| Unknown specification  |

スクリーンリーダーのサポート
--------------

TBD

関連情報
----

* `<form>`: フォーム要素
* `<legend>`: 凡例要素
* form (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1
* HTML のセクションとアウトラインの使用
* ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ
* Accessible Landmarks | scottohara.me
* Using WAI-ARIA Landmarks – 2013 | The Paciello Group

1. **WAI-ARIA ロール**
    1. `alertdialog ロールの使用`
    2. `ARIA: alert ロール`
    3. `ARIA: application ロール`
    4. `ARIA: article ロール`
    5. `ARIA: banner ロール`
    6. `ARIA: button ロール`
    7. `ARIA: cell ロール`
    8. `ARIA: checkbox ロール`
    9. `ARIA: complementary ロール`
    10. `ARIA: contentinfo ロール`
    11. `ARIA: dialog ロール`
    12. `ARIA: document ロール`
    13. `ARIA: feed ロール`
    14. `ARIA: figure ロール`
    15. `ARIA: form ロール`
    16. `ARIA: grid ロール`
    17. `ARIA: gridcell ロール`
    18. `ARIA: heading ロール`
    19. `ARIA: list ロール`
    20. `ARIA: listbox ロール`
    21. `ARIA: listitem ロール`
    22. `ARIA: main ロール`
    23. `ARIA: navigation ロール`
    24. `ARIA: option ロール`
    25. `ARIA: region ロール`
    26. `ARIA: row ロール`
    27. `ARIA: rowgroup ロール`
    28. `ARIA: search ロール`
    29. `ARIA: switch ロール`
    30. `ARIA: tab ロール`
    31. `ARIA: table ロール`
    32. `ARIA: term ロール`
    33. `ARIA: textbox ロール`
    34. `group ロールの使用`
    35. `link ロールの使用`
    36. `log ロールの使用`
    37. `presentation ロールの使用`
    38. `progressbar ロールの使用`
    39. `radio ロールの使用`
    40. `slider ロールの使用`
    41. `status ロールの使用`
    42. `toolbar ロールの使用`


ARIA: complementary ロール - アクセシビリティ

ARIA: complementary ロール
=======================

補足 (`complementary`) ランドマークロールは、メインコンテンツに関連する補助セクションを指定するために使用され、しかも分離しても単独で成り立つことができます。 これらのセクションは、サイドバーやコールアウトボックスとして表示されることがよくあります。 可能であれば、代わりに HTML の `<aside>` 要素を使用してください。

```html
<div role="complementary">
  <h2>私たちのパートナー</h2>
  <!-- 補足的なセクションのコンテンツ -->
</div>
```

これはイベントのスポンサーへのリンクを含むサイドバーです。

説明
--

補足 (`complementary`) ロールはランドマークロールです。 ランドマーク (landmark) は、支援技術によって使用され、文書の大きなセクションを迅速に識別してナビゲートすることができます。 補足 (`complementary`) ランドマークロールを持つコンテナー内にリストされたコンテンツは、文書のメインのコンテンツから分離されている場合でも意味をなすべきです。

**メモ:** `<aside>` 要素を使用すると、自動的にセクションが補足 (`complementary`) ロールを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきです。

例
-

```html
<div role="complementary">
  <h2>トレンド記事</h2>
  <ul>
    <li><a href="#">あなたがすべての気分を感じさせる18のツイート</a></li>
    <li>
      <a href="#"
 >私は完璧な昼食用の容器を見つけたので、それを探すのを停止する</a
 >
    </li>
    <li>
      <a href="#"
 >最終的に私たちがこれらの食品と呼ぶべきものを決定する時が来た</a
 >
    </li>
    <li><a href="#">Tumblr で今週見た17の本当に良い投稿</a></li>
    <li>
      <a href="#"
 >10の親のハック、私たちはそれらを試したので、働くことを知っている</a
 >
    </li>
  </ul>
</div>
```

アクセシビリティに関する懸念
--------------

ランドマークロールは、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。

ベストプラクティス
---------

### 好ましい HTML

`<aside>` 要素を使用すると、自動的にセクションが補足 (`complementary`) ロールを持つことを伝えます。 可能であれば、それを代わりに使用することをお勧めします。

### ランドマークのラベル付け

#### 複数のランドマーク

文書に複数の補足 (`complementary`) ランドマークロールや `<aside>` 要素がある場合は、各ランドマークに `aria-label` 属性を使用してラベルを付けるか、それらに適切な説明的なタイトルがある場合は、`aria-labelledby` 属性を使用してそれを指してください。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解できるようになります。

```html
<aside aria-label="使用上の注意">
  <!-- コンテンツ -->
</aside>

...

<aside id="sidebar" aria-label="スポンサー">
  <!-- コンテンツ -->
</aside>
```

#### 冗長な説明

スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、 `aria-label="サイドバー"` の `role="complementary"` の宣言は、"complementary サイドバー" として重複してアナウンスされることがあります。

### 追加された利点

ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーでも文書の大きなセクションを素早く識別してナビゲートできます。

* ランドマークブラウザー拡張 (英語)
仕様
--

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # complementary |
| Unknown specification  |

スクリーンリーダーのサポート
--------------

TBD

関連情報
----

* `<aside>`: 余談要素
* complementary (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1
* HTML のセクションとアウトラインの使用
* ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ
* Using WAI-ARIA Landmarks – 2013 | The Paciello Group
* Accessible Landmarks | scottohara.me
* Aside Revisited | HTML5 Doctor

1. **WAI-ARIA ロール**
    1. `alertdialog ロールの使用`
    2. `ARIA: alert ロール`
    3. `ARIA: application ロール`
    4. `ARIA: article ロール`
    5. `ARIA: banner ロール`
    6. `ARIA: button ロール`
    7. `ARIA: cell ロール`
    8. `ARIA: checkbox ロール`
    9. `ARIA: complementary ロール`
    10. `ARIA: contentinfo ロール`
    11. `ARIA: dialog ロール`
    12. `ARIA: document ロール`
    13. `ARIA: feed ロール`
    14. `ARIA: figure ロール`
    15. `ARIA: form ロール`
    16. `ARIA: grid ロール`
    17. `ARIA: gridcell ロール`
    18. `ARIA: heading ロール`
    19. `ARIA: list ロール`
    20. `ARIA: listbox ロール`
    21. `ARIA: listitem ロール`
    22. `ARIA: main ロール`
    23. `ARIA: navigation ロール`
    24. `ARIA: option ロール`
    25. `ARIA: region ロール`
    26. `ARIA: row ロール`
    27. `ARIA: rowgroup ロール`
    28. `ARIA: search ロール`
    29. `ARIA: switch ロール`
    30. `ARIA: tab ロール`
    31. `ARIA: table ロール`
    32. `ARIA: term ロール`
    33. `ARIA: textbox ロール`
    34. `group ロールの使用`
    35. `link ロールの使用`
    36. `log ロールの使用`
    37. `presentation ロールの使用`
    38. `progressbar ロールの使用`
    39. `radio ロールの使用`
    40. `slider ロールの使用`
    41. `status ロールの使用`
    42. `toolbar ロールの使用`


ARIA: tab ロール - アクセシビリティ

ARIA: tab ロール
=============

ARIA のタブ (`tab`) ロールは、タブリスト (`tablist`) 内のインタラクティブな要素を示し、アクティブ化されると、関連するタブパネル (`tabpanel` (en-US)) を表示します。

```html
<button role="tab" aria-selected="true" aria-controls="tabpanel-id" id="tab-id">
  Tab label
</button>
```

説明
--

タブ (`tab`) ロールを持つ要素は、タブパネル (`tabpanel`) ロールに関連付けられた要素の可視性を制御します。 一般的なユーザーエクスペリエンスのパターンは、コンテンツ領域の上または横にある視覚的なタブのグループであり、別のタブを選択すると、コンテンツが変更され、選択したタブが他のタブよりも目立つようになります。

タブ (`tab`) ロールを持つ要素は、タブリスト (`tablist`) ロールを持つ要素の子であるか、タブリスト (`tablist`) の `aria-owns` プロパティの `id` 部分を持っている*必要があります*。 この組み合わせは、要素が関連要素のグループの一部であることを支援技術に識別させます。 一部の支援技術は、タブリスト (`tablist`) 内のタブ (`tab`) ロール要素の数を数えて、現在ターゲットにしているタブ (`tab`) をユーザーに通知します。 これらには、タブパネル (`tabpanel`) ロールを持つ要素を識別する `aria-controls` プロパティが含まれている*べきです*。 タブパネル (`tabpanel`) ロールを持つ要素にフォーカスがある場合、またはその子にフォーカスがある場合、タブ (`tab`) ロールを持つ接続された要素がタブリスト (`tablist`) 内のアクティブなタブであることを示します。

タブ (`tab`) ロールを持つ要素を操作する場合、要素が選択されているかアクティブになっているときは、`aria-selected` 属性を `true` に設定するべきです。 それ以外の場合は、`false` に設定するべきです。 タブ (`tab`) が選択されているかアクティブになっている場合、その制御されたタブパネル (`tabpanel`) では、`aria-expanded` 属性を `true` に設定し、`hidden` 属性 を `false` に設定するべきです。 それ以外の場合は、その逆になります。

### 関連するロールと属性

aria-selected

ブール値

aria-controls

タブパネル (`tabpanel`) ロールを持つ要素の `id`

id

コンテンツ

### キーボードインタラクション

| キー | アクション |
| --- | --- |
| `Tab` | フォーカスがタブリスト (`tablist`) の外にある場合、フォーカスをアクティブなタブに移動します。 フォーカスがアクティブなタブにある場合、フォーカスをキーボードフォーカスの順序の次の要素、理想的にはアクティブなタブに関連付けられたタブパネル (`tabpanel`) に移動します。 |
| `→` | タブリストの次のタブにフォーカスし、任意でアクティブ化します。 現在のタブがタブリストの最後のタブである場合、最初のタブをアクティブ化します。 |
| `←` | タブリストの前のタブにフォーカスし、任意でアクティブ化します。 現在のタブがタブリストの最初のタブである場合、最後のタブをアクティブ化します。 |
| `Delete` | 許可されている場合、現在選択されているタブをタブリストから削除します。 |

### 必要な JavaScript 機能

**メモ:** JavaScript を使用せずにタブのような機能を構築する方法はありますが、コンテンツを含むアクセス可能なタブに上記で必要とされるのと同じ機能のセットを提供する HTML と CSS のみの代替の組み合わせはありません。

例
-

この例では、タブ (`tab`) ロールとタブリスト (`tablist`) 、そして要素とタブパネル (`tabpanel`) を組み合わせて、タブ付きコンテンツのインタラクティブなグループを作成します。 ここでは、コンテンツのグループを `div` で囲んでいます。 タブリスト (`tablist`) には、支援技術用にラベルを付けるための `aria-label` があります。 各タブ (`tab`) は、前述の属性を持つボタン (`button`) です。 最初のタブ (`tab`) には `tabindex=0` があり、後で `aria-selected=true` のタブに変更します。 すべてのタブパネル (`tabpanel`) 要素には Tab 可能にするために `tabindex=0` があり、現在アクティブな要素を除くすべてに `hidden` 属性があって、これは JavaScript で変更されます。 ボタンのスタイルを変更し、タブ (`tab`) 要素の `z-index` を変更して、アクティブな要素のタブパネル (`tabpanel`) に接続しているように見せたり、非アクティブな要素がアクティブなタブパネル (`tabpanel`) の後ろにあるように見せたりする基本的なスタイルが適用されます。

```html
<div class="tabs">
  <div role="tablist" aria-label="Sample Tabs">
    <button
 role="tab"
 aria-selected="true"
 aria-controls="panel-1"
 id="tab-1"
 tabindex="0">
      First Tab
    </button>
    <button
 role="tab"
 aria-selected="false"
 aria-controls="panel-2"
 id="tab-2"
 tabindex="-1">
      Second Tab
    </button>
    <button
 role="tab"
 aria-selected="false"
 aria-controls="panel-3"
 id="tab-3"
 tabindex="-1">
      Third Tab
    </button>
  </div>
  <div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
    <p>Content for the first panel</p>
  </div>
  <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
    <p>Content for the second panel</p>
  </div>
  <div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden>
    <p>Content for the third panel</p>
  </div>
</div>
```

```
.tabs {
  padding: 1em;
}

[role="tablist"] {
  margin-bottom: -1px;
}

[role="tab"] {
  position: relative;
  z-index: 1;
  background: white;
  border-radius: 5px 5px 0 0;
  border: 1px solid grey;
  border-bottom: 0;
  padding: 0.2em;
}

[role="tab"][aria-selected="true"] {
  z-index: 3;
}

[role="tabpanel"] {
  position: relative;
  padding: 0 0.5em 0.5em 0.7em;
  border: 1px solid grey;
  border-radius: 0 0 5px 5px;
  background: white;
  z-index: 2;
}

[role="tabpanel"]:focus {
  border-color: orange;
  outline: 1px solid orange;
}
```

JavaScript でやるべきことは 2 つあります。 右矢印と左矢印を使用してタブ (`tab`) 要素のフォーカスとタブインデックスを変更する必要があります。 また、タブ (`tab`) をクリックしたときにアクティブなタブ (`tab`) とタブパネル (`tabpanel`) を変更する必要があります。

最初のことを達成するために、タブリスト (`tablist`) でキーダウン (`keydown`) イベントをリッスンします。 イベントの `keyCode` が右矢印の 39 や左矢印の 37 の場合、イベントに反応します。 まず、現在のタブ (`tab`) 要素の `tabindex` を -1 に設定して、Tab 不可能にします。 次に、右矢印が押されている場合は、タブフォーカスカウンターを 1 つ増やします。 カウンターがタブ (`tab`) 要素の数よりも大きい場合は、そのカウンターを 0 に設定して、最初のタブに戻ります。 左矢印が押されている場合は、タブフォーカスカウンターを 1 つ減らし、0 未満の場合、タブ (`tab`) 要素の数から 1 を引いた数に設定します（最後の要素に到達するため）。 最後に、タブフォーカスカウンターと等しいインデックスのタブ (`tab`) 要素にフォーカスを設定し、 `tabindex` を 0 に設定して Tab 可能にします。

アクティブなタブ (`tab`) とタブパネル (`tabpanel`) の変更を処理するために、イベントを受け取り、イベントをトリガーした要素、トリガーした要素の親要素、およびその祖父母要素を取得する関数があります。 次に、親要素内で `aria-selected=true` を持つすべてのタブを検索し、それを `false` に設定してから、トリガーした要素の `aria-selected` を `true` に設定します。 その後、祖父母要素内のすべてのタブパネル (`tabpanel`) 要素を見つけてすべて `hidden` にし、最後に、トリガーしたタブ (`tab`) の `aria-controls` と等しい `id` の要素を選択して、`hidden` 属性を削除して表示します。

```js
window.addEventListener("DOMContentLoaded", () => {
  const tabs = document.querySelectorAll('[role="tab"]');
  const tabList = document.querySelector('[role="tablist"]');

  // 各タブに click イベントハンドラーを追加します
  tabs.forEach((tab) => {
    tab.addEventListener("click", changeTabs);
  });

  // タブリストのタブ間の矢印ナビゲーションを有効にします
  let tabFocus = 0;

  tabList.addEventListener("keydown", (e) => {
    // 右に移動
    if (e.keyCode === 39 || e.keyCode === 37) {
      tabs[tabFocus].setAttribute("tabindex", -1);
      if (e.keyCode === 39) {
        tabFocus++;
        // 最後にいる場合は、最初に移動します
        if (tabFocus >= tabs.length) {
          tabFocus = 0;
        }
        // 左に移動
      } else if (e.keyCode === 37) {
        tabFocus--;
        // 最初にいる場合は、最後に移動します
        if (tabFocus < 0) {
          tabFocus = tabs.length - 1;
        }
      }

      tabs[tabFocus].setAttribute("tabindex", 0);
      tabs[tabFocus].focus();
    }
  });
});

function changeTabs(e) {
  const target = e.target;
  const parent = target.parentNode;
  const grandparent = parent.parentNode;

  // タブから現在すべての選択状態を取り除きます
  parent
    .querySelectorAll('[aria-selected="true"]')
    .forEach((t) => t.setAttribute("aria-selected", false));

  // このタブを選択されたタブとして設定します
  target.setAttribute("aria-selected", true);

  // すべてのタブパネルを非表示にします
  grandparent
    .querySelectorAll('[role="tabpanel"]')
    .forEach((p) => p.setAttribute("hidden", true));

  // 選択されたパネルを表示します
  grandparent.parentNode
    .querySelector(`#${target.getAttribute("aria-controls")}`)
    .removeAttribute("hidden");
}
```

ベストプラクティス
---------

自分で追加する必要はなく、代わりに、組み込みの機能的でアクセス可能な機能のために、ボタン (`button`) 要素をタブ (`tab`) ロールと一緒に使用することをお勧めします。 タブ (`tab`) ロールを持つ要素の Tab キー機能を制御するには、すべての非アクティブ要素を `tabindex=-1` に設定し、アクティブ要素を `tabindex=0` に設定することをお勧めします。

仕様
--

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # tab |
| Unknown specification  |

優先順位
----

関連するプロパティは何ですか。 また、この属性やプロパティはどのような順序で読み取られますか（どのプロパティがこのプロパティよりも優先され、どのプロパティが上書きされますか）。

スクリーンリーダーのサポート
--------------

TBD

1. **WAI-ARIA ロール**
    1. `alertdialog ロールの使用`
    2. `ARIA: alert ロール`
    3. `ARIA: application ロール`
    4. `ARIA: article ロール`
    5. `ARIA: banner ロール`
    6. `ARIA: button ロール`
    7. `ARIA: cell ロール`
    8. `ARIA: checkbox ロール`
    9. `ARIA: complementary ロール`
    10. `ARIA: contentinfo ロール`
    11. `ARIA: dialog ロール`
    12. `ARIA: document ロール`
    13. `ARIA: feed ロール`
    14. `ARIA: figure ロール`
    15. `ARIA: form ロール`
    16. `ARIA: grid ロール`
    17. `ARIA: gridcell ロール`
    18. `ARIA: heading ロール`
    19. `ARIA: list ロール`
    20. `ARIA: listbox ロール`
    21. `ARIA: listitem ロール`
    22. `ARIA: main ロール`
    23. `ARIA: navigation ロール`
    24. `ARIA: option ロール`
    25. `ARIA: region ロール`
    26. `ARIA: row ロール`
    27. `ARIA: rowgroup ロール`
    28. `ARIA: search ロール`
    29. `ARIA: switch ロール`
    30. `ARIA: tab ロール`
    31. `ARIA: table ロール`
    32. `ARIA: term ロール`
    33. `ARIA: textbox ロール`
    34. `group ロールの使用`
    35. `link ロールの使用`
    36. `log ロールの使用`
    37. `presentation ロールの使用`
    38. `progressbar ロールの使用`
    39. `radio ロールの使用`
    40. `slider ロールの使用`
    41. `status ロールの使用`
    42. `toolbar ロールの使用`


presentation ロールの使用 - アクセシビリティ

presentation ロールの使用
===================

このテクニックは、`presentation` ロールの使い方を示し、ブラウザーや支援技術への影響について説明します。

`presentation` ロールは、要素とそれに関連する子要素の意味論的意味を取り除くために使用されます。 例えば、レイアウト目的で使用される表は、表要素に `presentation` ロールを適用して、表要素およびその表に関連する子要素（表のヘッダーや表のデータの要素など）から意味論的意味を取り除けます。 しかし、表に関係のない要素は、その意味論的意味を保持するべきです。

ユーザーエージェントと支援技術への影響
-------------------

**メモ:** 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。

例
-

### Example 1

```html
Code
```

#### 動作する例

注
-

使用された ARIA 属性
-------------

関連する ARIA 技術
------------

互換性
---

TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する

その他のリソース
--------


ARIA: search ロール - アクセシビリティ

ARIA: search ロール
================

検索 (`search`) ランドマークロールは、ページ、サイト、またはサイトのコレクションの検索に使用されるページのセクションを識別するために使用します。

```html
<form role="search">
  <!-- 検索入力 -->
</form>
```

説明
--

検索 (`search`) ロールは、ランドマークです。 ランドマークは、支援技術によって使用され、文書の大きなセクションを素早く識別してナビゲートすることができます。 検索 (`search`) ロールは、全体として組み合わせて検索機能を作成する項目およびオブジェクトを含むコンテナー要素に追加します。 `<form>` が検索フォームの場合、フォーム (`form`) ロールの代わりに検索 (`search`) ロールを使用します。 文書に複数の検索が含まれている場合、それぞれに固有のラベルを持つべきです。 `search` 型の `<input>` 要素はありますが、検索ランドマークを定義する HTML 要素はありません。

例
-

```html
<form id="search" role="search">
  <label for="search-input">このサイトを検索</label>
  <input type="search" id="search-input" name="search" spellcheck="false" />
  <input value="検索する" type="submit" />
</form>
```

アクセシビリティに関する懸念
--------------

ランドマークロールは、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。

ベストプラクティス
---------

### 好ましい HTML

`<form>` 要素を検索ロール (`role="search"`) の宣言と共に使用することで、最大限のサポートが提供されます。

### ランドマークのラベル付け

#### 複数のランドマーク

文書内に複数の検索 (`search`) ランドマークロールがある場合は、各ランドマークにラベルを付けます。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的を素早く理解することができます。

```html
<form id="site-search" role="search" aria-label="サイト全体">
  <!-- 検索入力 -->
</form>

...

<form id="page-search" role="search" aria-label="このページ">
  <!-- 検索入力 -->
</form>
```

#### 繰り返されるランドマーク

文書内で検索 (`search`) ランドマークロールが繰り返され、両方のランドマークのコンテンツが同じ場合は、各ランドマークに同じラベルを使用します。 この例では、ページの上部と下部でサイト全体の検索が繰り返されています。

```html
<header>
  <form id="site-search-top" role="search" aria-label="サイト全体">
    <!-- 検索入力 -->
  </form>
</header>

...

<footer>
  <form id="site-search-bottom" role="search" aria-label="サイト全体">
    <!-- 検索入力 -->
  </form>
</footer>
```

#### 冗長な説明

スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、`aria-label="サイト全体の検索"` を使用した検索ロール (`role="search"`) の宣言は、「サイト全体の検索検索」として重複してアナウンスされることがあります。

### 追加された利点

ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、スクリーンリーダーを使用していないユーザーでも文書の大きなセクションを素早く識別してナビゲートできます。

* ランドマークブラウザー拡張（英語）
仕様
--

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # search |
| Unknown specification  |

スクリーンリーダーのサポート
--------------

TBD

関連情報
----

* <form>: フォーム要素
* <input type="search">
* HTML のセクションとアウトラインの使用
* ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ
* Using WAI-ARIA Landmarks – 2013 | The Paciello Group
* Accessible Landmarks | scottohara.me

1. **WAI-ARIA ロール**
    1. `alertdialog ロールの使用`
    2. `ARIA: alert ロール`
    3. `ARIA: application ロール`
    4. `ARIA: article ロール`
    5. `ARIA: banner ロール`
    6. `ARIA: button ロール`
    7. `ARIA: cell ロール`
    8. `ARIA: checkbox ロール`
    9. `ARIA: complementary ロール`
    10. `ARIA: contentinfo ロール`
    11. `ARIA: dialog ロール`
    12. `ARIA: document ロール`
    13. `ARIA: feed ロール`
    14. `ARIA: figure ロール`
    15. `ARIA: form ロール`
    16. `ARIA: grid ロール`
    17. `ARIA: gridcell ロール`
    18. `ARIA: heading ロール`
    19. `ARIA: list ロール`
    20. `ARIA: listbox ロール`
    21. `ARIA: listitem ロール`
    22. `ARIA: main ロール`
    23. `ARIA: navigation ロール`
    24. `ARIA: option ロール`
    25. `ARIA: region ロール`
    26. `ARIA: row ロール`
    27. `ARIA: rowgroup ロール`
    28. `ARIA: search ロール`
    29. `ARIA: switch ロール`
    30. `ARIA: tab ロール`
    31. `ARIA: table ロール`
    32. `ARIA: term ロール`
    33. `ARIA: textbox ロール`
    34. `group ロールの使用`
    35. `link ロールの使用`
    36. `log ロールの使用`
    37. `presentation ロールの使用`
    38. `progressbar ロールの使用`
    39. `radio ロールの使用`
    40. `slider ロールの使用`
    41. `status ロールの使用`
    42. `toolbar ロールの使用`


radio ロールの使用 - アクセシビリティ

radio ロールの使用
============

### 説明

このテクニックは、`radio` ロールをどのように使用するかを示し、ブラウザーと支援技術に及ぼす影響について説明します。

### ユーザーエージェントと支援技術への影響

**メモ:** 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。

### 例

#### 例 1

MDN ページの基本的なフォームのヒントからの例

```html
<h3 id="rg1\_label">ランチオプション</h3>

<ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1\_label">
  <li id="r1" tabindex="-1" role="radio" aria-checked="false">
    <img role="presentation" src="radio-unchecked.gif" /> タイ
  </li>
  <li id="r2" tabindex="-1" role="radio" aria-checked="false">
    <img role="presentation" src="radio-unchecked.gif" /> サブウェイ
  </li>
  <li id="r3" tabindex="0" role="radio" aria-checked="true">
    <img role="presentation" src="radio-checked.gif" /> ラジオマリア
  </li>
</ul>
```

#### 動作する例

### 注

### 使用された ARIA 属性

### 関連する ARIA 技術

### 互換性

TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する

### その他のリソース


toolbar ロールの使用 - アクセシビリティ

toolbar ロールの使用
==============

### 説明

このテクニックは、`toolbar` ロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。

### ユーザーエージェントと支援技術への影響

**メモ:** 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。

### 例

#### Example 1

```html
Code
```

#### 動作する例

W3C toolbar example

### 注

### 使用された ARIA 属性

### 関連する ARIA 技術

### 互換性

TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する

### その他のリソース


ARIA: figure ロール - アクセシビリティ

ARIA: figure ロール
================

ARIA の図表 (`figure`) ロールは、適切な意味論がまだ存在しないページコンテンツ内の図表を識別するために使用できます。 図表は一般的に、正規のテキストの流れとは異なる方法で情報を伝える、1 つ以上の画像、コードスニペット、またはその他のコンテンツと見なされます。

```html
<div role="figure" aria-labelledby="caption">
  <img src="image.png" alt="画像の完全な代替説明" />
  <p id="caption">図表 1: キャプション</p>
</div>
```

上記の例では、画像とキャプションという 2 つの別々のコンテンツ項目で構成される図表があります。 これは、`role="figure"` を使用してコンテンツを図表として識別する `<div>` 要素で囲まれています。

図表の作成に ARIA を使用する代わりに、ネイティブで意味論的な HTML `<figure>` 要素を `<figcaption>` 要素と共に使用することを検討してください。 以下のベストプラクティスをご覧ください。

説明
--

(画像、動画、音声、コードスニペット、または他のコンテンツを含む可能性がある) 図表としてまとめて消費されるべきコンテンツは、 `role="figure"` を使用して図表として識別できます。

図表のコンテンツをどのように書くべきかについての鉄則はありません。 他のコンテンツと同様にアクセスできることを確認するべきです。 例えば、支援技術のユーザーによって知覚できることや、キーボードやマウスでナビゲートできることなどを確認します。

さまざまな方法で、図表にキャプションやラベルを追加できます。 次のように、図表を説明するコンテンツを含む要素に ID を追加し、その ID を図表の適切な属性内で参照して、図表をラベルに関連付けることができます。

```html
<div role="figure" aria-labelledby="figure-1">
  ...
  <p id="figure-1">図表を説明するテキスト。</p>
</div>
```

* テキストが簡潔なラベルである場合は、`aria-labelledby` を使用してください。
* テキストがより長い説明である場合は、`aria-describedby` を使用してください。

ここでも、ARIA 無しで、HTML の `<figure>` 要素と `<figcaption>` 要素を使用して、意味論的に行うことができます。

```html
<figure>
  ...
  <figcaption>図表を説明するテキスト。</figcaption>
</figure>
```

ラベルを画面に表示したくないが、支援技術のユーザーにわかりやすいラベルを提供したい場合は、図表コンテナーに `aria-label` 属性を使用できます。

```html
<div role="figure" aria-label="図表を説明するテキスト。">...</div>
```

`aria-label` は `<figure>` と一緒に使うことができます。

```html
<figure aria-label="図表を説明するテキスト。">...</figure>
```

一般的には、本文から図表を参照するべきですが、図表は参照元の要素と同じ場所に表示する必要はありません。

**メモ:** 可能な限り、適切な意味論の HTML 要素を使用して図表とそのキャプション (`<figure>` と `<figcaption>`) をマークアップするべきです。 詳しくは、ベストプラクティスを参照してください。

### 関連する WAI-ARIA のロール、ステート、プロパティ

aria-describedby

キャプションとしての参照テキストを含む要素の id。

aria-labelledby

ラベルとしてのテキストを含む要素の id。

aria-label

ラベルになるようなテキストを含む要素がない場合は、図表 (`figure`) ロールを持つ要素や `<figure>` 要素の `aria-label` の値として直接ラベルを追加できます。

### キーボードインタラクション

ロールに固有のキーボードインタラクションはありません。

### 必要な JavaScript 機能

ロールに固有の JavaScript 要件はありません。 HTML の意味論を制御できない場合は、JavaScript でこれらのロールとプロパティを追加することで、HTML のアクセシビリティを向上させることができます。

例
-

次のように、ページの最初の例を拡張して、`aria-labelledby` でその ID を参照することにより、図表の説明的なラベルを提供する段落を特定することもできます。
```

<div role="figure" aria-labelledby="figure-1">
  <img src="diagram.png"
       alt="素晴らしい4つの層と相対的な優先順位を示すダイヤグラム —
            音楽、猫、自然、そしてアイスクリーム">
  <pre><code>
    let awesome = ['音楽', '猫', '自然', 'アイスクリーム'];
  </code></pre>
  <p id="figure-1">図表 1: 素晴らしい4つの層。</p>
</div>
```

ベストプラクティス
---------

必要な場合にのみ `role="figure"` を使用してください。 例えば、HTML を制御できないが、JavaScript を使用して事後に動的にアクセシビリティを向上させることができる場合などです。

可能であれば、適切な意味論の HTML 要素を使用して、図表とそのキャプション (`<figure>` と `<figcaption>`) をマークアップするべきです。 例えば、上記の例は次のように書き直すべきです。

```html
<figure>
  <img
 src="diagram.png"
 alt="素晴らしい4つの層と相対的な優先順位を示すダイヤグラム —
 音楽、猫、自然、そしてアイスクリーム" />
  <pre><code>
    let awesome = ['音楽', '猫', '自然', 'アイスクリーム'];
  </code></pre>
  <figcaption>図表 1: 素晴らしい4つの層。</figcaption>
</figure>
```

仕様
--

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # figure |

スクリーンリーダーのサポート
--------------

TBD

関連情報
----

* Accessibility Object Model
* ARIA in HTML
* HTML <figure> 要素
* HTML <figcaption> 要素

1. **WAI-ARIA ロール**
    1. `alertdialog ロールの使用`
    2. `ARIA: alert ロール`
    3. `ARIA: application ロール`
    4. `ARIA: article ロール`
    5. `ARIA: banner ロール`
    6. `ARIA: button ロール`
    7. `ARIA: cell ロール`
    8. `ARIA: checkbox ロール`
    9. `ARIA: complementary ロール`
    10. `ARIA: contentinfo ロール`
    11. `ARIA: dialog ロール`
    12. `ARIA: document ロール`
    13. `ARIA: feed ロール`
    14. `ARIA: figure ロール`
    15. `ARIA: form ロール`
    16. `ARIA: grid ロール`
    17. `ARIA: gridcell ロール`
    18. `ARIA: heading ロール`
    19. `ARIA: list ロール`
    20. `ARIA: listbox ロール`
    21. `ARIA: listitem ロール`
    22. `ARIA: main ロール`
    23. `ARIA: navigation ロール`
    24. `ARIA: option ロール`
    25. `ARIA: region ロール`
    26. `ARIA: row ロール`
    27. `ARIA: rowgroup ロール`
    28. `ARIA: search ロール`
    29. `ARIA: switch ロール`
    30. `ARIA: tab ロール`
    31. `ARIA: table ロール`
    32. `ARIA: term ロール`
    33. `ARIA: textbox ロール`
    34. `group ロールの使用`
    35. `link ロールの使用`
    36. `log ロールの使用`
    37. `presentation ロールの使用`
    38. `progressbar ロールの使用`
    39. `radio ロールの使用`
    40. `slider ロールの使用`
    41. `status ロールの使用`
    42. `toolbar ロールの使用`


group ロールの使用 - アクセシビリティ

group ロールの使用
============

### 説明

このテクニックは、`group` ロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。

`group` ロールは、`region` とは対照的に、目次やページの要約に含まれないように意図された一連のユーザーインターフェイスオブジェクトを識別するために使用されます（スクリプトや支援技術によって動的に作成される構造のような）。 グループ（group）はページ上で主要な知覚可能なセクションと見なされるべきではありません。 このロールが要素に追加されると、ブラウザーは、アクセス可能なグループイベントを支援技術製品に送り、支援技術製品はそれをユーザーに通知することができます。

グループは、階層内の兄弟の集合を形成するツリーウィジェット内の子供や、ディレクトリ内に同じコンテナを持つ項目の集合のような、関連する機能を持つ項目の論理的集合を形成するために使用されるべきです。 ただし、グループがリストのコンテキストで使用される場合、作者はその子を `listitem` 要素に制限する必要があります。 グループ要素はネストすることができます。

支援技術によるグループの適切な取り扱いは、それが提供されるコンテキストによって決まります。

作者がページの目次に含まれることを保証するためにセクションが重要であると考える場合は、そのセクションに `region` ロールまたは標準的なランドマークロールを割り当てるべきです。

### ユーザーエージェントと支援技術への影響

`group` ロールが要素に追加されるか、またはそのような要素が可視になると、ユーザーエージェントは以下を行うべきです。

* オペレーティングシステムのアクセシビリティ API で `group` ロールを持つものとして要素を公開します。
* オペレーティングシステムのアクセシビリティ API をサポートしている場合は、アクセス可能なグループイベントを発生させます。

支援技術製品は、そのようなイベントをリスンし、それに応じてユーザーに以下を通知するべきです。

* スクリーンリーダーは、フォーカスが最初にその中のコントロールに着くとグループをアナウンスし、もし `aria-describedby` が設定されていれば、その説明が読み上げられます。 これに続いて、フォーカスされたコントロールをアナウンスすることができます。
* スクリーン拡大鏡でグループが拡大されることがあります。

**メモ:** 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。

### 例

#### 例 1: HTML ツリービューでの group ロールの使用

以下のスニペットは、HTML ソースコードに group ロールを直接追加する方法を示しています。

```html
<div id="tree1" role="tree" tabindex="-1">
  <div
 id="animals"
 class="groupHeader"
 role="presentation"
 aria-owns="animalGroup"
 aria-expanded="true">
    <img role="presentation" tabindex="-1" src="images/treeExpanded.gif" />
    <span role="treeitem" tabindex="0">動物</span>
  </div>
  <div id="animalGroup" role="group">
    <div id="birds" role="treeitem">
      <span tabindex="-1">鳥</span>
    </div>
    <div
 id="cats"
 class="groupHeader"
 role="presentation"
 aria-owns="catGroup"
 aria-expanded="false">
      <img role="presentation" tabindex="-1" src="images/treeContracted.gif" />
      <span role="treeitem" tabindex="0">猫</span>
    </div>
    <div id="catGroup" role="group">
      <div id="siamese" role="treeitem">
        <span tabindex="-1">シャム猫</span>
      </div>
      <div id="tabby" role="treeitem">
        <span tabindex="-1">虎猫</span>
      </div>
    </div>
  </div>
</div>
```

#### 例 2: HTML ドロップダウンメニューでの group ロールの使用

以下のスニペットは、HTML ソースコードに group ロールを直接追加する方法を示しています。

```html
<div role="menu">
  <ul role="group">
    <li role="menuitem">受信トレイ</li>
    <li role="menuitem">アーカイブ</li>
    <li role="menuitem">ごみ箱</li>
  </ul>
  <ul role="group">
    <li role="menuitem">カスタムフォルダ 1</li>
    <li role="menuitem">カスタムフォルダ 2</li>
    <li role="menuitem">カスタムフォルダ 3</li>
  </ul>
  <ul role="group">
    <li role="menuitem">新規フォルダ</li>
  </ul>
</div>
```

#### 動作する例

* Unknown Title (`http://test.cita.illinois.edu/aria/tree/tree2.php`) **[broken link]**
### 注

* グループの DOM サブツリーの外側にあるグループメンバーは、そのグループに参加するために明示的な関係を割り当てられている必要があります。
### 使用された ARIA 属性

* group
### 関連する ARIA 技術

* region ロール
### 互換性

TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する

### その他のリソース

* ARIA Best Practices – Directories, Groups and Regions: http://www.w3.org/TR/wai-aria-practices/#kbd\_layout\_groupheading （該当項目は削除されています。）


ARIA: main ロール - アクセシビリティ

ARIA: main ロール
==============

メイン (`main`) ランドマークロールは、文書の主要なコンテンツを示すために使用します。 メインコンテンツ領域は、文書の中心的な話題やアプリケーションの中心的な機能と直接関連したり、それらを拡張するコンテンツで構成されます。

```html
<div id="main" role="main">
  <h1>アボカド</h1>
  <!-- メインセクションのコンテンツ -->
</div>
```

これは、アボカドについて説明する文書のメインセクションです。 この文書のサブセクションでは、その歴史、さまざまな品種、栽培地域などについて説明します。

説明
--

メイン (`main`) ロールは、文書のメインコンテンツを識別する、ナビゲーションに関するランドマークロールです。 ランドマークは、支援技術によって、文書の大きなセクションをすばやく識別してナビゲートするために使用できます。 ページのセクションを分類およびラベル付けすることにより、レイアウトを通じて視覚的に伝えられる構造情報をプログラムで表現することができます。 スクリーンリーダーは、ランドマークロールを使用して、ページの重要なセクションへのキーボードナビゲーションを提供します。 ランドマークロールを介してナビゲートする場合、メインロールは「メインコンテンツへスキップする (Skip to main content) 」リンクの代わりになります。 メイン (`main`) ランドマークロールは、文書ごとに 1 つだけあるべきです。

`<main>` 要素は、メイン (`main`) ロールを持ちます。 開発者は、ARIA を使用するよりも、正しい意味論の HTML 要素を使用することを常に好むべきです。

文書 (`document`) とアプリケーション (`application`) は DOM 内でネストすることができます。 これにより、DOM の子孫として複数のメイン要素を持つことになる可能性があります。 このような場合には、メインとその祖先である文書やアプリケーションとの関係を識別するために `aria-owns` を含めます (訳注: aria-owns は、DOM 階層で親子関係に無い要素において、親に指定することで子でない要素を子として組み込むためのものであり、文書やアプリケーションとメインが DOM 階層で親子関係にあれば必要ありません) 。

例
-

```html
<body>
  <!-- 主要なナビゲーション -->

  <div role="main">
    <h1>第一次インドシナ戦争</h1>
    <!-- 記事のコンテンツ -->
  </div>

  <!-- サイドバーとフッター -->
</body>
```

アクセシビリティに関する懸念
--------------

### 文書ごとに `main` ロールを 1 つのみ使用する

メイン (`main`) ランドマークロールは、文書ごとに 1 回のみ使用するべきです。

JavaScript によってトリガーされたときにページコンテンツを更新するなどで、文書に 2 つのメイン (`main`) ロールが含まれている場合、`hidden` 属性をトグルするなどの手法によって、アクティブでないメイン (`main`) ロールの存在を支援技術から取り除くべきです。

```html
<main>
  <h1>アクティブな <code>main</code> 要素</h1>
  <!-- コンテンツ -->
</main>

<main hidden>
  <h1>隠された <code>main</code> 要素</h1>
  <!-- コンテンツ -->
</main>
```

ベストプラクティス
---------

### 好ましい HTML

`<main>` 要素を使用すると自動的にセクションがメイン (`main`) ロールを持つことを伝えます。 可能な限り、`<main>` 要素を代わりに使用することをお勧めします。

### スキップナビゲーション

スキップナビゲーション (スキップナビ (skipnav) とも呼ばれる) は、支援技術のユーザーが繰り返されるコンテンツの大きなセクション (メインナビゲーション、情報バナーなど) をすばやくバイパスできるようにする手法です。 これにより、ユーザーはページのメインコンテンツにすばやくアクセスできます。 (訳注: このページでも、ページが表示されたらすぐ Tab キーを押すことで、ページ上部にリンクが表示されるようになっています。)

`role="main"` という宣言を持つ要素に `id` 属性を追加すると、それをスキップナビゲーションリンクのターゲットにすることができます。

```html
<body>
  <a href="#main-content">メインコンテンツへスキップする</a>

  <!-- ナビゲーションとヘッダーのコンテンツ -->

  <div id="main-content" role="main">
    <!-- メインページのコンテンツ -->
  </div>
</body>
```

* WebAIM: "Skip Navigation" Links (日本語対訳)
### 追加された利点

ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、スクリーンリーダーを使用していないユーザーでも文書の大きなセクションを素早く識別してナビゲートできます。

* ランドマークブラウザー拡張 (英語)
仕様
--

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # main |
| Unknown specification  |

スクリーンリーダーのサポート
--------------

TBD

関連情報
----

* <main>: メイン要素
* main (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1
* HTML のセクションとアウトラインの使用
* ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ
* Using WAI-ARIA Landmarks – 2013 | The Paciello Group
* Accessible Landmarks | scottohara.me
* The main element | HTML5 Doctor

1. **WAI-ARIA ロール**
    1. `alertdialog ロールの使用`
    2. `ARIA: alert ロール`
    3. `ARIA: application ロール`
    4. `ARIA: article ロール`
    5. `ARIA: banner ロール`
    6. `ARIA: button ロール`
    7. `ARIA: cell ロール`
    8. `ARIA: checkbox ロール`
    9. `ARIA: complementary ロール`
    10. `ARIA: contentinfo ロール`
    11. `ARIA: dialog ロール`
    12. `ARIA: document ロール`
    13. `ARIA: feed ロール`
    14. `ARIA: figure ロール`
    15. `ARIA: form ロール`
    16. `ARIA: grid ロール`
    17. `ARIA: gridcell ロール`
    18. `ARIA: heading ロール`
    19. `ARIA: list ロール`
    20. `ARIA: listbox ロール`
    21. `ARIA: listitem ロール`
    22. `ARIA: main ロール`
    23. `ARIA: navigation ロール`
    24. `ARIA: option ロール`
    25. `ARIA: region ロール`
    26. `ARIA: row ロール`
    27. `ARIA: rowgroup ロール`
    28. `ARIA: search ロール`
    29. `ARIA: switch ロール`
    30. `ARIA: tab ロール`
    31. `ARIA: table ロール`
    32. `ARIA: term ロール`
    33. `ARIA: textbox ロール`
    34. `group ロールの使用`
    35. `link ロールの使用`
    36. `log ロールの使用`
    37. `presentation ロールの使用`
    38. `progressbar ロールの使用`
    39. `radio ロールの使用`
    40. `slider ロールの使用`
    41. `status ロールの使用`
    42. `toolbar ロールの使用`