複数の部分に分かれたラベル: 内部にフィールドがあるラベルに ARIA を使用 - アクセシビリティ

複数の部分に分かれたラベル: 内部にフィールドがあるラベルに ARIA を使用
=======================================

問題点
---

ユーザーに質問をするフォームがあり、回答が質問文の中にある場合があります。有名なブラウザーの設定項目の例を挙げると、「履歴を x 日後に削除する」という設定です。「履歴を」はテキストボックスの左側にあり、また x は 21 のような数値であり、「日後に削除する」という文言はテキストボックスの後ろにあって、理解しやすい文を構成しています。

スクリーンリーダーを使用している場合、 Firefox でこの設定項目に達すると「履歴を 21 日後に削除する」と伝えられ、その後でテキストボックス内にるので、数値 21 が入っているとと知らされることに気づきます。すばらしいでしょう？単位を見つけるために行き来する必要はありません。「日」は容易に「か月」や「年」に変えることができ、また多くの通常のダイアログではこれを見つけるための方法が、画面の再調査コマンドで行き来する以外にありません。

解決策は、ARIA の **aria-labelledby** という属性にあります。この引数は、ひとつのアクセシブルな名称になるように連結したい HTML 要素の ID で構成される文字列です。

**aria-labelledby** および **aria-describedby** はどちらもラベル付けされる要素、例えば <input> で指定します。どちらの場合もラベルとコントロールの紐付けがあってもかまいませんが、 **aria-labelledby** によって上書きされます。**aria-labelledby** を提供する HTML ページでは、 ARIA に対応していない古いブラウザーにも対応できるように構成したラベルも提供してください。 Firefox 3 では新しい属性により、目の不自由なユーザーが自動的によりよいアクセシビリティを得ることができますが、古いブラウザーのユーザーは、この方法でアクセシビリティがない状態を抜けることができません。

### 例
```

body {
  margin: 1rem;
}
```

```html
<input
 aria-labelledby="labelShutdown shutdownTime shutdownUnit"
 type="checkbox" />

<span id="labelShutdown">Shut down computer after</span>

<input
 aria-labelledby="labelShutdown shutdownTime shutdownUnit"
 id="shutdownTime"
 type="text"
 value="10" />

<span id="shutdownUnit"> minutes</span>
```

JAWS 8 ユーザーへの注意
---------------

JAWS 8.0 はラベルを発見する独自のロジックを持っており、常に HTML 文書で見つけたテキストボックスの accessibleName より優先します。 JAWS 8 で、上記の例からラベルを受け入れるようにする方法は見つかっていません。しかし NVDA や Window-Eyes の動作は良好であり、また Linux での Orca も問題がありません。

**メモ:** TBD: さらに互換性情報を追加する

ARIA を使用せずに実現できるか
-----------------

コミュニティーのメンバーである Ben Millard はブログへの投稿で、単に input を label 内に埋め込むことにより HTML 4 を使用して前出の例のようにコントロールをラベル内に埋め込むことが可能であることを指摘しました。 Ben、情報ありがとうございます。これはとても役に立ち、また長年使用されてきたテクニックには時に権威から逃れるものもあることを示します。このテクニックは Firefox で動作しますが、現時点で IE を含む他の多くのブラウザーでは動作しません。従ってフォームコントロールを埋め込んだラベルについては、**aria-labelledby** を使用することがやはり最善の方法です。


aria-grabbed - アクセシビリティ

aria-grabbed
============

`aria-grabbed` の状態は、ドラッグ＆ドロップ処理で要素が「つかまれた」状態を示します。
非推奨

解説
--

テキスト選択、画像、リンクは既定でドラッグ可能です。 HTML5 の ドラッグ＆ドロップ API の一部であるグローバルな `draggable="true"` 属性と `dragstart` イベントハンドラーを設定するには、任意の DOM ノードもドラッグ可能にすることができます。

`aria-grabbed` 属性は、ドラッグ＆ドロップ処理で要素が「つかまれた」状態かどうかを示すために `aria-grabbed="true"` が使用され、要素はつかまれる可能性があるが、現在はつかまれていない状態を示すために `aria-grabbed="false"` が使用されます。

`aria-grabbed="true"` を設定すると、要素がドラッグのために選択されていることを示しす。 `aria-grabbed="false"` を設定すると、要素がドラッグ＆ドロップ処理でつかまれる可能性があるが、現在はつかまれていないことを示します。

`aria-grabbed` が `true` に設定されている場合、すべてのドロップ対象要素の `aria-dropeffect` (en-US) 属性は、ドロップされたときにつかまれた要素に発生する機能（効果）の種類で更新されなければなりません。要素がつかまれた状態にない場合、すべてのドロップ対象の `aria-dropeffect` 属性を元に戻してください。

`aria-grabbed` プロパティは WAI-ARIA の将来のバージョンで新しい機能に置き換わることが予定されており、非推奨です。

**メモ:** ARIA はアクセシビリティのある機能を実現するものではありません。 ARIA は、機能の意図する動作を伝えるだけです。

値
-

`true`

この要素はドラッグのために選択されています。

`false`

この要素は現在ドラッグするために選択されていませんが、このプロパティを `true` に設定することでドラッグするために利用できるようになります。

`undefined` （既定値）

この要素はドラッグに対応していません。

関連するロール
-------

**ALL** すべてのロールで使用されます。

仕様書
---

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

関連情報
----

* `aria-dropeffect` (en-US)
* HTML の `draggable` グローバル属性
* HTML のドラッグ＆ドロップ API
* `dataTransfer`
* `DataTransfer.dropEffect`
* `dragstart`
* Accessible Drag and Drop by Gez Lemon


aria-autocomplete - アクセシビリティ

aria-autocomplete
=================

`aria-autocomplete` 属性は、 `combobox` (en-US), `searchbox` (en-US), `textbox` において、テキスト入力がユーザーの意図する値の一つ以上の予測を発生させるかどうかを示し、発生した場合にどのように予測を表示するかを指定します。

解説
--

自動補完は、ユーザーが入力を入力する際にインラインで提案するユーザーインターフェイス機能です。フィールドの値を完全に補完するための提案テキストが、入力カーソルの後にフィールドに動的に現れ、ユーザーがタブなどの操作を行い、フィールドからフォーカスが離れると、提案された値が値となります。

`aria-autocomplete` プロパティは、テキストボックス、検索ボックス、またはコンボボックスが、ユーザーがテキスト入力を完了するのを動的に支援するときに使用する自動補完入力対話モデルのタイプを記述します。これは 2 つのモデルを区別します。**インライン**モデル (`aria-autocomplete="inline"`) は 1 つの予測値を表示し、**リスト**モデル (`aria-autocomplete="list"`) は `<datalist>` のように、テキスト入力の横または下にポップアップする別個の要素で使用可能な値の集合を表示します。 3 つ目の値 `aria-autocomplete="both"` は、インターフェイスが予測値も含めてリストを表示します。既定値は `none` で、テキストボックス、検索ボックス、コンボボックスは自動補完の値を提供しません。

`aria-autocomplete` プロパティは、支援技術のための入力要素の予測動作の種類を記述するだけで、機能を提供するものではありません。実際の自動補完は HTML 属性か JavaScript を使用して提供します。

自動補完の提案値が、ユーザーによって指定された入力に依存しない値を提供する場合、すべてのユーザーに対して自動補完を除外することを検討してください。例えば、フィルタリングされていない最近の検索語を表示する検索ボックスの入力は、 e コマースサイトのマーケティングチームには役立つかもしれませんが、スクリーンリーダーのユーザーには役に立たない可能性が高いです。 `aria-autocomplete` の値を指定しないか、 `none` の既定値に設定することが最善である場合は、支援技術以外のユーザーもその機能を必要としていない可能性があります。

自動補完機能を実装する際には、確実に値の提案部分を選択テキストとして表示し、ユーザーの入力と提案を判別できるようにしてください。提案された値が希望する値でない場合、ユーザーは入力し続けることで、提案された値を簡単に削除したり、置き換えたりできるようにしてください。

値のリストを実装する際、提案リストが表示されている間、 DOM のフォーカスはテキスト入力のままにしておく必要があります。

* `aria-controls` (en-US) に、値の提案リストの id の値を設定してください。
* `aria-haspopup` (en-US) には、提案値のリストの集合を含む要素のロールに合うものを入れてください。
* 必要であれば、集合のコンテナーが対応している場合は `aria-activedescendant` を使用してフォーカスを管理してください。
* `aria-expanded` (en-US) の状態を使用して、 `combobox` (en-US) の付いた要素のリストが表示されているかどうかを同期してください。

フィールドのフォーカスが失われたときに自動補完リストの値が自動的に受け入れられる場合、リストは `aria-activedescendant` に対応するロールに格納されていなければなりません。

値
-

`none` (default)

ユーザーが入力しているときは、自動提案は表示されません。

`inline`

`aria-autocomplete="inline"` は、指定された入力を補完する一つの方法を提案するテキストが、キャレットの後に動的に挿入されるかもしれません。

`list`

`aria-autocomplete="list"` は、ユーザーが入力しているとき、指定された入力を補完する値の集合を含む要素が表示されることがあります。

`both`

`aria-autocomplete="both"` は、両方のモデルを同時に提供する入力です。ユーザーが入力を提供しているとき、指定された入力を補完する値の集合を格納する要素が表示されることがあります。表示された場合、集合の中の 1 つの値が自動的に選択され、自動的に選択された値を補完するために必要なテキストが入力のキャレットの後に現れます。

関連するロール
-------

以下のロールで使用されます。

* `combobox` (en-US) ロール
* `textbox` ロール
* inherits from `searchbox` (en-US) ロール
仕様書
---

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

関連情報
----

* `combobox` (en-US) ロール
* `textbox` ロール
* `searchbox` (en-US) ロール
* `<datalist>` 要素と `<input> list` 属性
* `aria-controls` (en-US) 属性
* `aria-haspopup` (en-US) 属性
* `aria-activedescendant` 属性
* `aria-expanded` (en-US) 属性
* Editable Combobox With Both List and Inline Autocomplete Example
* Event.ariaAutoComplete


aria-disabled - アクセシビリティ

aria-disabled
=============

`aria-disabled` 状態は、要素は知覚可能であるが無効であり、編集やその他の操作をすることができないことを示します。

解説
--

`aria-disabled` 属性は、 `true` に設定されると、その属性が設定されている要素や、フォーカス可能なすべての子孫要素が無効状態であることを意味していることを示します。この宣言は、スクリーンリーダーのような支援技術を使用する人々に、そのような要素は編集やその他の操作ができないことを意味していることを知らせます。

HTML の `disabled` 論理属性が、フォームコントロールが意味的に無効であることを伝え、その状態を反映するようにスタイルを変更し、要素の値がフォーム送信に参加することを禁止すると同時にすべての機能を抑制するのとは異なり、 `aria-disabled="true"` は、意味的にこれらの要素が無効であることを公開する**だけ**です。ウェブ開発者は、このような要素が無効状態に公開されたとき、確実にその機能を保持しなければなりません。

ネイティブな HTML フォームコントロールを無効にする必要がある場合、開発者は `disabled` 属性を指定する必要がありますが、これは既定ではコントロールを無効にするために一般的に期待される機能をすべて提供するからです。しかし、要素を無効として公開する必要があるにもかかわらず、 `Tab` キーでナビゲートするときにユーザーが見つけられるようにする場合があります。そうすることで、 `aria-disabled` はそのような要素のフォーカス順を変更しないため、ウェブページのフォーカス順から除去されることがなく、また既定ではブラウザースタイル設定によって要素が薄暗くなることもないため、発見しやすくなります。この方法が有益な例をいくつか挙げます：

* 折りたたみ不可能なアコーディオンパネルに関連するヘッダーボタン要素
* ページのフォーカス順を維持することが重要だが、フォームを送信するなどのアクションが現在利用できないボタン
* 標準のキーボードナビゲーションではスキップされてしまうメニューウィジェットの、一時的に非アクティブになっているアイテム

これらの場合、そのコントロールの機能は制限されているか「無効」になっていますが、標準のキーボードナビゲーションを使ってユーザーにこれらの要素を探してもらいたいと思うかもしれません。開発者は JavaScript を使用して、要素の機能を完全に無効にし、同時に要素の現れ方も変えて、目の見えるユーザーには無効であることがわかるようにする必要があります。

**メモ:** 無効の状態は、 `aria-disabled="true"` を持つ要素と、そのフォーカス可能なすべての子孫要素に適用されます。コンテナー要素にこの属性を使用する場合は注意が必要です。特に、あるコンテナーがフォームコントロールとリンクの両方を持つことができるような場合、フォームコントロールは無効状態であることを公開しますが、リンクは「無効」であることを**伝えない**という意図があるかもしれません。

HTML の `disabled` 属性ではなく `aria-disabled` 属性を使用するもう一つの理由は、無効としてマークする必要があるカスタムコントロールを作成したが、`disabled` 属性を使用できる要素を使用していない場合です。例えば、以下のスニペットでは `<div>` を使用して、無効とマークする必要があるカスタムボタンを作成しています。しかし、 `<div>` 要素は `disabled` 属性を期待しませんし、尊重しません。たとえ `role="button"` が指定されたとしても、公開される ARIA ロールを変更することはできません。このようなカスタムコントロールを無効にするには `aria-disabled` 属性が必要とされます。

```html
<div role="button" aria-disabled="true" tabindex="-1">Edit</div>
```

`aria-disabled="true"` を持つ要素が確実に機能しないように JavaScript を使用する必要があるのと同様に、スタイル設定も必要になります。 HTML の `disabled` 属性を指定するとユーザーエージェントの `:disabled` スタイルが提供されますが、 `aria-disabled="true"` を追加してもスタイル設定はされません。要素は属性セレクターの `[aria-disabled="true"]` でスタイル設定できます。

```css
[aria-disabled="true"] {
  opacity: 0.5;
}
```

あるフォームコントロールがページのキーボードフォーカス順に残れるようにするために、意図的に `aria-disabled` 属性を使う場合、特にその要素がすべてのユーザーが知覚できるようにすべき重要なコンテンツを表す場合、色のコントラストの要件を満たすスタイルを使用する必要があるかもしれません。例えば、折りたたみ不可能なアコーディオンパネルを導入する無効ボタン／見出しは、判読可能でなければならないコンテンツです。

```css
@media (forced-colors: active) {
  [aria-disabled="true"] {
    border-color: GrayText;
    color: GrayText;
  }
}
```

`forced-colors` メディアクエリーは、ユーザーエージェントが強制色モードを有効にしているかどうかを検出します。もしそうなら、テキストと境界の色はどちらもシステム色 `greyText` に設定されます。

ネイティブの HTML 属性ではなく `aria-disabled` を使用する場合、もう一つ留意すべきことは、 ARIA 属性は Windows 高コントラストモードにおいて、要素が無効であることを視覚的に伝えるためには、必要な手動スタイル設定が要求されるということです。

**メモ:** CSS の `pointer-events: none;` を使用して要素をクリックできないようにしている場合は、 JavaScript による対話も無効にしてください。 `pointer-events: none;` はマウスクリックを防ぎますが、キーボードから要素をアクティブにすることを防ぐことはできません。

```js
function onClick(event) {
  event.preventDefault();
}

function toggleDisabled(element, status, update) {
  if (status) {
    //element.input.disabled = false;
    element.setAttribute("aria-disabled", "false");
    update.textContent = "The element is now enabled.";
    element.addEventListener("click", onClick);
  } else {
    //element.input.disabled = true;
    element.setAttribute("aria-disabled", "true");
    update.textContent = "The element is now disabled.";
    element.removeEventListener("click", onClick);
  }
}
```

`aria-disabled="true"` から `"false"` に切り替える場合は、 JavaScript を使用してください：

1. 値を `false` に切り替えます（または属性を完全に除去します）
2. 要素を有効にします
3. これでコントロールが有効になったことをユーザーに知らせます

CSS だけで属性セレクターを使用して無効状態をスタイル設定していた場合、セレクターは一致しなくなり、無効のスタイル設定は効力を失います。

値
-

`true`

要素は無効です。

`false`

要素は無効ではありません。

ARIAMixin API
-------------

`Element.ariaDisabled`

`ariaDisabled` プロパティは `Element` インターフェイスの一部であり、 `aria-disabled` 属性の値を反映します。これは、要素は知覚可能であるが無効であり、編集やその他の処理を行うことができないことを示します。

`ElementInternals.ariaDisabled`

`ariaDisabled` は `ElementInternals` インターフェイスのプロパティで、 `aria-disabled` 属性の値を反映します。

関連するロール
-------

使用しているロール:

* `application`
* `button`
* `composite` (en-US)
* `gridcell`
* `group`
* `input` (en-US)
* `link`
* `menuitem` (en-US)
* `scrollbar` (en-US)
* `separator` (en-US)
* `tab`

継承先のロール:

* `checkbox`
* `columnheader` (en-US)
* `combobox` (en-US)
* `grid`
* `listbox`
* `menu` (en-US)
* `menubar` (en-US)
* `menuitemcheckbox` (en-US)
* `menuitemradio` (en-US)
* `option`
* `radio`
* `radiogroup` (en-US)
* `row`
* `rowheader` (en-US)
* `searchbox` (en-US)
* `select` (en-US)
* `slider`
* `spinbutton` (en-US)
* `switch`
* `tablist` (en-US)
* `textbox`
* `toolbar`
* `tree` (en-US)
* `treegrid` (en-US)
* `treeitem` (en-US)
仕様書
---

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

関連情報
----

* Making disabled buttons more inclusive by Sandrina Pereira
* Styling for Windows high contrast with new standards for forced colors
* disabled
* `Element.ariaDisabled`
* `ElementInternals.ariaDisabled`
* `aria-hidden` (en-US)
* `aria-readonly` (en-US)


aria-describedby - アクセシビリティ

aria-describedby
================

`aria-describedby` はグローバル属性で、その属性が設定されている要素を説明する要素（複数可）を特定します。

解説
--

`aria-describedby` 属性は、オブジェクトを説明する要素の `id` を列挙します。。これは、ウィジェットやグループとそれらを説明するテキストとの関係を確立するために使用します。

`aria-describedby` 属性はあるフォームコントロールに限ったものではありません。ウィジェットや要素のグループ、見出しのある領域、定義などに静的テキストを関連付けるためにも使用することができます。 `aria-describedby` 属性は、意味づけされた HTML 要素や ARIA の `role` を持つ要素で使用することができます。

`aria-describedby` 属性は `aria-labelledby` 属性ととても似ています。 `aria-labelledby` がオブジェクトの本質を記述するラベルや要素の `id` を掲載しているのに対して、 `aria-describedby` はユーザーが必要とするかもしれないより詳細な情報を提供する記述や要素の `id` を掲載しています。 `aria-labelledby` と `aria-describedby` はどちらもテキストの代替を計算するために他の要素を参照しますが、ラベルは簡潔であるべきであるのに対し、説明はより詳細な情報を提供することを意図しています。ラベルはオブジェクトの本質を記述するのに対し、説明文はユーザーが必要とするかもしれないより多くの情報を提供します。

`aria-describedby` によってリンクされた要素は表示されている必要はありません。要素が非表示であっても参照することは可能です。例えば、あるフォームコントロールは既定値では非表示の説明を持つことができ、「詳細情報」アイコンのような開示ウィジェットを使用してリクエストに応じて表示されます。視覚ユーザはアイコンをクリックします。支援技術のユーザーは、 `aria-describedby` で直接そのフォームフィールドから説明を参照します。

`aria-describedby` プロパティは、関連するコンテンツがプレーンテキストとして記述されている場合に適しています。コンテンツが大量のコンテンツ、有益な意味づけを含む場合、またはユーザーナビゲーションを必要とする複雑な構造を持つ場合は、 `aria-details` (en-US) を使用してください。 `aria-details` は、支援技術のユーザーが関連する構造化されたコンテンツにアクセスできるようにし、構造を理解しやすくしたり、情報を小分けにして使いやすくしたりする、追加のナビゲーションコマンドを提供します。

**メモ:** `aria-describedby` のコンテンツは文字列のみであるべきです。コンテンツに重要な意味づけがある場合は、 `aria-details` (en-US) を使用することを検討してください。

例
-

```html
<button aria-describedby="trash-desc">ゴミ箱へ移動</button>
…
<p id="trash-desc">ゴミ箱にあるものは 30 日後に永久に削除されます。</p>
```

**メモ:** `aria-describedby` 属性は外部リソースの記述を参照するようには設計されていません。その値は一つ以上の `id` であり（複数の場合はスペースで区切られます）、同じ DOM 文書内の要素を参照しなければなりません。

値
-

ID reference list

現在の要素を記述する `id` または空白区切りの要素 `id` のリストです。

関連付けられるロール
----------

**すべての**ロールで使用されます。同様にすべての HTML 要素で利用できます。

仕様書
---

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

関連情報
----

* `<label>`
* `aria-labelledby`
* `aria-description` (en-US)
* `aria-details` (en-US)
* Browser and AT support for `aria-describedby`


aria-atomic - アクセシビリティ

aria-atomic
===========

ARIA ライブリージョンにおいて、グローバルな `aria-atomic` 属性は、`aria-relevant` (en-US) 属性で定義された変更通知に基づいて、スクリーンリーダーなどの支援技術が変更された領域をすべて表示するのか、一部だけを表示するのかを示します。

解説
--

ライブリージョンとは、ユーザーの操作の有無にかかわらず、ユーザーのフォーカスが他の場所にあるときに更新されるウェブページの部分のことです。ユーザーのフォーカスの外側で更新されるため、スクリーンリーダーなどの支援技術は、ユーザーに更新を報告するために更新を「見る」ことができません。 WAI-ARIA には、開発者がこれらのライブ領域を識別し、支援技術に処理方法を指示するためのプロパティとして、 `aria-live` (en-US)、`aria-relevant` (en-US)、`aria-busy` (en-US)、`aria-atomic` の 4 つがあります。

ライブリージョンのコンテンツが変更されると、 DOM は変更された要素からその祖先を走査し、 `aria-atomic` が設定された最初の要素を探します。これがユーザーに表示するコンテンツを決定します。

祖先が明示的に `aria-atomic` を設定していない場合、更新されたライブリージョンのコンテンツのノードのみが読み取られます。 `aria-atomic` を完全に除外することと、 ARIA ライブリージョンの祖先ノードを明示的に `aria-atomic="false"` で設定することの違いは、明示的に `aria-atomic="false"` を設定すると、スクリーンリーダーが祖先の連鎖を上がらなくなることです。どちらも更新されたノードだけが読み取られます。 `aria-atomic="true"` に設定すると、更新されたノードの `label` がある場合はそれを含めるために、変更されたリージョン全体が表示されます。

値
-

`false` (既定値)

変更されたノードのみを表示します。

`true`

作者が定義したラベルが存在する場合はそれを含め、変更されたリージョン全体を全体として表示します。

関連付けられたロール
----------

**すべての**ロールで使用されます。

仕様書
---

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

関連情報
----

* Event.ariaAtomic


aria-activedescendant - アクセシビリティ

aria-activedescendant
=====================

`aria-activedescendant` 属性は、`composite` (en-US) ウィジェット、`combobox` (en-US)、`textbox`、`group`、`application`にフォーカスが当たっている時、現在アクティブな要素を特定します。

解説
--

`aria-activedescendant` プロパティは、メニュー、グリッド、ツールバーなど、フォーカス可能な複数の子孫要素を格納する場合に、対話要素上で支援技術のためにフォーカスを管理するメソッドを提供します。スクリーンリーダーが所有する要素間でフォーカスを移動させる代わりに、 `aria-activedescendant` は、現在アクティブな要素を参照するためにコンテナー要素上で使用することができ、フォーカスされたときに現在アクティブな要素を支援技術ユーザーに知らせます。

`aria-activedescendant` を使用すると、ブラウザーは、コンテナー要素またはコンテナー要素を制御する入力要素にDOMフォーカスを維持します。しかし、ユーザーエージェントは、 `aria-activedescendant` によって参照される要素にフォーカスがあるかのように、デスクトップのフォーカスイベントと状態を支援技術に伝えます。

この属性は、`composite` (en-US) ウィジェット、`combobox` (en-US)、`textbox`、`group`、`application`の役割を持ち、 `id` が属性値として参照される要素にのみ関連します。

属性は、どの要素がフォーカスを持つかという情報を支援技術に提供することを管理しますが、実際にフォーカスを作成することはありません。フォーカスの変更と属性値の管理は JavaScript で行います。その属性値を管理することに加えて、フォーカスが当たったときに、現在アクティブな子孫が表示され、視界に入る（または視界にスクロールする）ことを確認してください。

DOM のフォーカスのある要素に `aria-activedescendant` の値を設定するには、確実に自分自身で参照する要素、 DOM にフォーカスのある要素の子孫か、 `aria-owns` (en-US) 属性で示す論理的な子孫を参照します。

DOM フォーカスのある要素がコンボボックス、テキストボックス、検索ボックスの場合、 `aria-activedescendant` に対応している要素を参照するために `aria-controls` (en-US) を含めてください。

`aria-activedescendant` の値は、制御される要素の自分自身で所有している要素を参照します。例えば、コンボボックスでは、コンボボックスにフォーカスが当たったまま、コンボボックス要素の `aria-activedescendant` の値は、コンボボックスによって制御されるポップアップリストボックスの子孫を参照します。

**メモ:** この属性はいくつかのロールにのみ対応しています。例えば、 `dialog` は `aria-activedescendant` に対応していません。コンボボックスがダイアログを開いた場合、DOMフォーカスはコンボボックスからダイアログに移ります。

**メモ:** `listbox`、`grid`、`tree` のポップアップの子孫にフォーカスが当たった場合、DOM フォーカスは combobox に残り、combobox には `aria-activedescendant` が設定され、ポップアップ内でフォーカスされた要素を参照する値が設定されます。

値
-

ID reference

現在フォーカスがある要素の `id` の値を取ります。

関連するロール
-------

以下の役割を持つ要素の属性としてのみ関連します。

* `application`
* `combobox` (en-US)
* `composite` (en-US)
* `group`
* `textbox`
仕様書
---

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

関連情報
----


aria-errormessage - アクセシビリティ

aria-errormessage
=================

オブジェクトの `aria-errormessage` 属性は、そのオブジェクトのエラーメッセージを表示する要素を特定します。

解説
--

ユーザーが作成したエラーがある場合、その存在を知らせ、修正する方法を指示したいものです。 2 つの属性を使用する必要があります。 `aria-invalid="true"` (en-US) を設定してオブジェクトがエラー状態であることを定義し、そして、 `aria-errormessage` 属性を追加し、その値としてそのオブジェクトのエラーメッセージテキストを格納する要素の `id` を指定します。

`aria-errormessage` 属性は、オブジェクトの値が有効でない場合、すなわち `aria-invalid` (en-US) が `true` に設定されている場合にのみ使用しましょう。
 オブジェクトが有効で `aria-errormessage` 属性を記載する場合は、参照する要素が非表示であり、そこに含まれるメッセージには関連がないことを確認してください。

`aria-errormessage` が関連する場合、参照する要素はユーザーがエラーメッセージを見たり聞いたりできるように可視でなければなりません。

多くの場合、エラーメッセージを持つ要素は ARIA ライブ領域であることが望まれます。例えば、ユーザーが無効な値を指定した後にエラーメッセージが表示される場合などです。エラーメッセージは、何が間違っているかを記述し、オブジェクトを有効にするために何が必要かをユーザーに通知する必要があります。 ARIA ライブ領域としてエラーメッセージを追加することは、エラーメッセージが他の方法でユーザーに伝えられなくても、エラーメッセージのコンテンツからユーザーが好ましいことを支援技術に知らせます。

失敗が視覚的に明らかで、エラーの明示的な説明が必要な場合は、目に見えるエラーメッセージを記載し、 `aria-errormessage` 属性で不正なオブジェクトにリンクしてください。

例
-

いくつかのスタイルを作成します。

1. すべてのエラーメッセージを非表示にします。
2. 不正なオブジェクトを不正な外観にします。
3. 不正なオブジェクトの後に来る兄弟要素のエラーメッセージを表示させます。

`aria-invalid="true"` を使用して、不正なオブジェクトを識別します。

```css
.errormessage {
  visibility: hidden;
}

[aria-invalid="true"] {
  outline: 2px solid red;
}

[aria-invalid="true"] ~ .errormessage {
  visibility: visible;
}
```

オブジェクトが不正な場合は、 JavaScript を使用して `aria-invalid="true"` を追加します。上記の CSS は、不正なオブジェクト以下の `.errormessage` が見えるようにします。

```html
<p>
  <label for="email">メールアドレス:</label>
  <input
 type="email"
 name="email"
 id="email"
 aria-invalid="true"
 aria-errormessage="err1" />
  <span id="err1" class="errormessage"
 >有効なメールアドレスを入力してください</span
 >
</p>
```

有効から不正になったとき、この例での JavaScript の変更は、メール入力オブジェクトの `aria-invalid` への更新だけでした。エラーメッセージは入力に従うことで、アクセシビリティツリー上で可視化され利用できるようになるため、この例を単純に保つことができます。また、 `aria-live` (en-US) プロパティを適用したり、 `alert` のようなライブ領域のロールを使用することもできました。

値
-

`id` reference

現在の要素のエラーメッセージを格納する要素の `id` の値。

関連するロール
-------

使用しているロール:

* `application`
* `checkbox`
* `combobox` (en-US)
* `gridcell`
* `listbox`
* `radiogroup` (en-US)
* `slider`
* `spinbutton` (en-US)
* `textbox`
* `tree` (en-US)

継承しているロール:

* `columnheader` (en-US)
* `rowheader` (en-US)
* `searchbox` (en-US)
* `switch`
* `treegrid` (en-US)
仕様書
---

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

関連情報
----

* HTML の `invalid` 属性
* CSS の `:invalid` 擬似クラス
* `aria-invalid` (en-US)
* `aria-describedby`
* `aria-live` (en-US)


aria-labelledby - アクセシビリティ

aria-labelledby
===============

`aria-labelledby` 属性は、適用される要素のラベル付けを行う要素（複数可）を識別します。

解説
--

`aria-labelledby` プロパティによって、アクセシブル名を定義するためにページ上の他の要素を参照することができます。これは、アクセシブル名を提供する要素の関連付けにネイティブ対応していない要素を使用する場合に有益です。

要素によっては、そのアクセシブル名を内部コンテンツから取得するものがあります。例えば、`<button>`、`<a>`、`<td>` のアクセシブル名は開始タグと終了タグの間のテキストから決まります。他にも、フォームの `<textarea>`、`<fieldset>`、`<table>` などの要素は、関連する要素のコンテンツからアクセシブル名を取得します。これらの要素では、アクセシブル名はそれぞれ `for` 属性を持つ `<label>`、`<legend>`、`<caption>` から取得します。

操作可能な要素はすべて、アクセシブル名がなければなりません。 `aria-labelledby` は、要素のアクセシブル名を定義するために別の要素を参照するために使用することができます。

アクセシブル名を作成するために参照できるコンテンツがない場合は、代わりに `aria-label` (en-US) 属性を使用してください。

`aria-labelledby` の目的は `aria-label` と同じです。これはユーザーに対して、インタラクティブ要素に対して認識可能でアクセシブル名を提供します。要素に両方の属性が設定されている場合、 `aria-labelledby` が使用されます。 `aria-labelledby` は `aria-label` や `<label>`、要素の内部テキストなど、アクセシブル名を提供する他のすべてのメソッドよりも優先されます。

`aria-labelledby` および `aria-describedby` 属性は、どちらも代替テキストを計算するために他の要素を参照します。 `aria-labelledby` は要素にアクセシブル名を提供する短いテキストを参照します。 `aria-describedby` は説明を提供する詳しいコンテンツを参照するために使用します。インタラクティブ要素のアクセシブル名に適切な短いラベル付けを提供する要素が DOM にない場合、 `aria-label` を使用してインタラクティブ要素のアクセシブル名を定義します。

**メモ:** アメリカ英語では、この属性は "labeledby" と綴られるとみなされますが、 "labelledby" という綴りが確立されており、アクセシビリティ API で使用されています。

次の例では `aria-labelledby` を用いて、兄弟要素のテキストコンテンツを使用してチェックボックス入力にアクセシブル名を提供しています。

```html
<span
 role="checkbox"
 aria-checked="false"
 tabindex="0"
 aria-labelledby="tac"></span>
<span id="tac">利用規約に同意します。</span>
```

この状況では `aria-labelledby` を使用することは、 HTML の `<label>` 要素を `for` 属性で使用することに似ていますが、大きく異なる点があることに注意してください。 `aria-labelledby` 属性はアクセシブル名を定義するだけです。この属性は `<label>` の他の機能、例えばラベル付け要素をクリックすると関連付けられた入力が有効になるといった機能を提供しません。これは JavaScript で追加する必要があります。

幸いなことに、`type="checkbox"`のHTML `<input>` はネイティブの `<label>` で動作します。使用する場合は以下を使用してください。

```html
<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  利用規約に同意します。
</label>
<p><a href="tac.html">利用規約をお読みください</a>。</p>
```

### 利点（と欠点）

1. `aria-labelledby` プロパティは、ブラウザーがアクセシブル名を計算する際に最も優先されるプロパティです。このプロパティは、 `aria-label` や他の名前付け属性、要素のコンテンツなど、要素に名前を付ける他のメソッドよりも優先されることに注意してください。

```html
<button aria-label="Blue" aria-labelledby="color">Red</button>
<span id="color">Yellow</span>
```

この例では、アクセシブル名は "Yellow "です。
2. `aria-labelledby` プロパティは、値としてスペース区切りの id 参照リストを取ります。これは、複数の要素を単一のアクセシブル名にまとめることができることを示しています。自分自身で要素を参照するために、要素自身の `id` を含めることができます。

```html
<h2 id="attr" class="article-title">13 ARIA attributes you need to know</h2>
<p>
  There are over 50 ARIA states and properties, but 13 of them stand out…
  <a href="13.html" id="rm13" aria-labelledby="rm13 attr">read more</a>
</p>
```

この例では、アクセシブル名は "read more 13 ARIA attributes you need to know" です。
3. `aria-labelledby` プロパティの値の順番は重要です。複数の要素が `aria-labelledby` によって参照されている場合、参照されている各要素のコンテンツは `aria-labelledby` の値で参照されている順番に結合されます。もし、 `aria-labelledby="attr rm13">`と記述していたら、アクセシブル名は "13 ARIA attributes you need to know read more" になっていたでしょう。
4. `aria-labelledby` プロパティはその値の中で `id` が繰り返されると無視します。要素が複数の時点で参照された場合、最初の参照のみが処理されます。 `aria-labelledby="attr attr rm13 rm13">` は `aria-labelledby="attr rm13">` として扱われます。
5. `aria-labelledby` プロパティの値は、表示されていない要素のコンテンツを含めることができます。支援技術のユーザーには、他のすべてのユーザーと同じコンテンツを提供すべきですが、HTML の `hidden` 属性、CSS の `display: none` 属性、CSS の `visibility: hidden` 属性を持つ要素のコンテンツを計算された名前の文字列に含めることができます。
6. `aria-labelledby` プロパティは入力要素の値を取り込みます。値が `<input>` を参照している場合、あるフォームコントロールの現在の値が計算された名前文字列に含まれ、値が更新されると変更されます。
7. `aria-labelledby` プロパティを連鎖させることはできません。 `aria-labelledby` を持つ要素が、これも `aria-labelledby` を持つ他の要素を参照している場合、参照されている要素の `aria-labelledby` 属性は無視されます。

**警告:** `aria-labelledby` で要素の名前を計算するのは複雑で、隠されたコンテンツを参照することがあるため、確実に期待する名前をユーザーに表示していることを支援技術でテストすることはとても重要です。

値
-

ID reference list

現在の要素をラベル付けする要素を参照する、 1 つ以上の ID 値を空白で区切ったリスト。

関連付けられたロール
----------

作者がアクセシブル名を提供できないロールを**除く**ほとんどすべてのロールで使用できます。

`aria-labelledby`属性は以下の場所では対応していません。

* `code` (en-US)
* `caption` (en-US)
* `deletion` (en-US)
* `emphasis` (en-US)
* `generic` (en-US)
* `insertion` (en-US)
* `mark` (en-US)
* `paragraph` (en-US)
* `presentation` / `none` (en-US)
* `strong` (en-US)
* `subscript` (en-US)
* `superscript` (en-US)
* `suggestion` (en-US)
* `term`
* `time` (en-US)
仕様書
---

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

関連情報
----

* HTML の `<label>` 要素
* HTML の `<legend>` 要素
* HTML の `<caption>` 要素
* `aria-label` (en-US)
* `aria-describedby`


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

ARIA: dialog ロール
================

ダイアログ (`dialog`) ロールは、ウェブアプリケーションやウェブページの残りの部分からコンテンツや UI を分離する HTML ベースのアプリケーションのダイアログやウィンドウをマークアップするために使用します。 ダイアログは通常、オーバーレイを使用して残りのページコンテンツの上に配置されます。 ダイアログはノンモーダル (ダイアログ外のコンテンツともやりとり可能) またはモーダル (ダイアログ内のコンテンツのみとやりとり可能) のいずれかになります。

```html
<div
 role="dialog"
 aria-labelledby="dialog1Title"
 aria-describedby="dialog1Desc">
  <h2 id="dialog1Title">あなたの個人情報が更新されました</h2>
  <p id="dialog1Desc">
    情報は、ユーザーアカウントのセクションでいつでも変更できます。
  </p>
  <button>閉じる</button>
</div>
```

説明
--

ダイアログ要素をダイアログ (`dialog`) ロールでマークアップすると、支援技術がダイアログのコンテンツをページコンテンツの残りの部分からグループ化して分離されたものとして識別するのに役立ちます。 ただし、`role="dialog"` だけを追加するだけでは、ダイアログをアクセス可能にするには不十分です。 さらに、次のことを行う必要があります。

* ダイアログには適切なラベルを付ける必要があります。
* キーボードのフォーカスを正しく管理する必要があります。

以下のセクションでは、これら 2 つの要件をどのように満たすことができるかについて説明します。

#### ラベル付け

ダイアログ自体がフォーカスを受け取れる必要はありませんが、それでもラベルを付ける必要があります。 ダイアログに与えられたラベルは、ダイアログ内のインタラクティブコントロールのコンテキスト情報を提供します。 つまり、ダイアログのラベルは、その内部のコントロールのグループ化ラベルのように機能します (`<legend>` 要素が `<fieldset>` 要素内のコントロールのグループ化ラベルを提供する方法と同様です)。

ダイアログにすでに表示されているタイトルバーがある場合、そのバーの中のテキストを使用してダイアログ自体にラベルを付けることができます。 これを達成する最善の方法は、`role="dialog"` 要素に `aria-labelledby` 属性を使用することです。 さらに、ダイアログがダイアログタイトル以外に追加の説明テキストを含んでいる場合、このテキストは `aria-describedby` 属性を使用してダイアログに関連付けることができます。 このアプローチは、次のコードスニペットに示されています。

```html
<div
 role="dialog"
 aria-labelledby="dialog1Title"
 aria-describedby="dialog1Desc">
  <h2 id="dialog1Title">あなたの個人情報が更新されました</h2>
  <p id="dialog1Desc">
    情報は、ユーザーアカウントのセクションでいつでも変更できます。
  </p>
  <button>閉じる</button>
</div>
```

**メモ:** なお、非仮想モードで動作するスクリーンリーダーが認識するために、ダイアログのタイトルと説明のテキストがフォーカス可能である必要はありません。 ARIA のダイアログロールとラベル付けの手法を組み合わせることで、スクリーンリーダーは、フォーカスがダイアログに移動したときにダイアログの情報をアナウンスするべきです。

### 必要な JavaScript 機能

#### フォーカス管理

ダイアログには、キーボードフォーカスをどのように管理するべきかについて、次のような特有の要件があります。

* ダイアログは常に少なくとも 1 つのフォーカス可能なコントロールを持つべきです。 多くのダイアログでは、[閉じる]、[OK]、[キャンセル] などのボタンがあります。 ダイアログには、必要なコントロールに加えて、フォーカス可能な要素をいくつでも含めることができ、フォーム全体やタブのような他のコンテナーウィジェットさえも含めることができます。
* ダイアログが画面に表示されたら、キーボードのフォーカスを、(そのコントロールはダイアログの目的に依存する) ダイアログ内のデフォルトのフォーカス可能なコントロールに移動するべきです。 基本的なメッセージのみを提供するダイアログでは、たぶん [OK] ボタンになります。 フォームを含むダイアログでは、たぶんフォームの最初のフィールドになります。
* ダイアログが閉じられた後、キーボードフォーカスは、ダイアログに移動する前の位置に戻すべきです。 それ以外の場合は、フォーカスをページの先頭に落とすことができます。
* ほとんどのダイアログでは、ダイアログのタブ順序が折り返されることが求められる振る舞いです。 つまり、ユーザーがダイアログ内のフォーカス可能な要素をタブで移動していくと、最後のものに達した後、最初のフォーカス可能な要素にフォーカスが移ります。 言い換えれば、タブ順序は、ダイアログによってダイアログ内に含まれているべきです。
* ダイアログを移動やサイズ変更できる場合、マウスユーザーだけでなくキーボードユーザーもこれらの操作を実行できる必要があります。 同様に、ダイアログがツールバーやコンテキストメニューのような特別な機能を提供する場合、これらはキーボードユーザーも到達可能で操作可能である必要があります。
* ダイアログはモーダル (modal) またはノンモーダル (non-modal、モードレス (modeless) とも) にすることができます。 モーダルダイアログが画面に表示されている時、ダイアログ外にあるページコンテンツとやりとりすることはできません。 つまり、モーダルダイアログが表示されている限り、メインアプリケーションの UI やページコンテンツは一時的に無効になっているとみなされます。 ノンモーダルダイアログでは、ダイアログが表示されている間もダイアログ外のコンテンツとやりとりすることが可能です。 ノンモーダルダイアログでは、開いているダイアログとメインページの間でフォーカスを移動できるグローバルなキーボードショートカットが必要なことに注意してください。
### 関連する ARIA のロール、ステート、プロパティ

`aria-labelledby`

ダイアログにラベルを付けるには、この属性を使用します。 多くの場合、`aria-labelledby` 属性の値は、ダイアログのタイトルに使用される要素の id になります。

`aria-describedby`

この属性を使用して、ダイアログの内容を説明します。

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

ダイアログ (`dialog`) ロールが使用されるとき、ユーザーエージェントは以下を行うべきです。

* オペレーティングシステムのアクセシビリティ API でダイアログとして要素を公開します。

ダイアログが正しくラベル付けされ、フォーカスがダイアログ内の要素 (多くの場合、ボタンなどのインタラクティブな要素) に移動された時、スクリーンリーダーは、フォーカスされた要素をアナウンスするとともに、ダイアログのアクセス可能なロール、名前、および任意で説明をアナウンスするべきです。

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

例
-

#### フォームを含むダイアログ

```html
<div
 role="dialog"
 aria-labelledby="dialog1Title"
 aria-describedby="dialog1Desc">
  <h2 id="dialog1Title">加入申込書</h2>
  <p id="dialog1Desc">私たちは、この情報を第三者と共有することはありません。</p>
  <form>
    <p>
      <label for="firstName">名</label>
      <input id="firstName" type="text" />
    </p>
    <p>
      <label for="lastName">姓</label>
      <input id="lastName" type="text" />
    </p>
    <p>
      <label for="interests">興味</label>
      <textarea id="interests"></textarea>
    </p>
    <p>
      <input type="checkbox" id="autoLogin" />
      <label for="autoLogin">自動ログイン？</label>
    </p>
    <p>
      <input type="submit" value="情報を保存する" />
    </p>
  </form>
</div>
```

#### 動作する例

* jQuery-UI ダイアログ
### 注

**メモ:** キーボードユーザーがダイアログ外の要素にフォーカスを移動するのを防ぐことは可能ですが、スクリーンリーダーのユーザーは、スクリーンリーダーの仮想カーソルを使用してそのコンテンツにナビゲートできるかもしれません。 開発者は、モーダルダイアログがアクティブな間、モーダルダイアログ外のコンテンツに全てのユーザーがアクセスできないようにすることが重要です。

仕様
--

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

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

近日公開

関連情報
----

* ARIA: alertdialog ロール
* alertdialog ロールの使用

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: switch ロール - アクセシビリティ

ARIA: switch ロール
================

ARIA のスイッチ (**`switch`**) ロールは、チェックボックス (`checkbox`) ロールと機能的に同じですが、かなり一般的な意味を持つ「チェックされた」状態と「チェックされていない」状態を表す代わりに、スイッチ (`switch`) ロールは「オン」と「オフ」の状態を表す点が異なります。

この例では、ウィジェットを作成し、それに ARIA のスイッチ (`switch`) ロールを割り当てています。

```html
<button
 type="button"
 role="switch"
 aria-checked="true"
 id="speakerPower"
 class="switch">
  <span>オフ</span>
  <span>オン</span>
</button>
<label for="speakerPower" class="switch">スピーカー出力</label>
```

説明
--

ARIA のスイッチ (**`switch`**) ロールは、チェックボックス (`checkbox`) ロールと同じですが、「チェックされた」や「チェックされていない」ではなく、「オン」と「オフ」のどちらかになります。 チェックボックス (`checkbox`) ロールと同様に、`aria-checked` 属性が必須です。 可能な値は `true` と `false` の 2 つです。 `<checkbox>` やチェックボックスロール (`role="checkbox"`) とは異なり、不確定な状態 (`indeterminate`) や混在した状態 (`mixed`) はありません。 スイッチ (`switch`) ロールは、`aria-checked` 属性に `mixed` という値をサポートしていません。 スイッチ (`switch`) に `mixed` という値を割り当てると、代わりに値が `false` に設定されます。

支援技術では、スイッチのオン/オフの概念を反映するために、スイッチ (`switch`) ウィジェットを特別な表現で表すことを選択できます。

スイッチはインタラクティブなコントロールなので、フォーカス可能でキーボードによりアクセス可能でなければなりません。 このロールがフォーカス可能でない要素に適用されている場合は、`tabindex` 属性を使用してこれを変更してください。 スイッチの値を切り替えるために期待されるキーボードショートカットは`スペース`キーです。 開発者は、スイッチがトグルされたときに、`aria-checked` 属性の値を動的に変更する必要があります。

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

`aria-checked` 属性

`aria-checked` 属性は、スイッチ (`switch`) ロールを使用する場合に**必須**です。 これは、スイッチ (`switch`) ロールが適用されているウィジェットの現在の状態を表すためです。 `true` の値は「オン」状態を表し、`false` の値は「オフ」状態を表します。 `mixed` の値はスイッチロールでサポートされておらず、`false` として扱われます。 デフォルト値は `false` です。 (訳注: ARIA in HTML によると、input type=checkbox 要素では、この属性を使用するべきではなく、checked 属性が使用できるそうです。)

`aria-readonly` 属性

`aria-readonly` 属性は、スイッチ (`switch`) ロールでサポートされています。 これは、ウィジェットの状態がユーザーによって編集可能かどうかを示します。 `false` の値は、ユーザーがウィジェットの状態を変更*できる*ことを意味し、`true` の値は、ユーザーがウィジェットの状態を変更*できない*ことを意味します。 デフォルト値は `false` です。 (訳注: ARIA in HTML によると、この属性は、readonly 属性や contenteditable 属性が使用できる要素と組み合わせる場合は注意が必要だそうです。)

### 必要な JavaScript 機能

`click` イベントのハンドラー

ユーザーがスイッチウィジェットをクリックすると、`click` イベントが発生します。 これは、ウィジェットの状態を変更するために処理する必要があります。

`aria-checked` 属性の変更

スイッチウィジェットで `click` イベントが発生した場合、ハンドラーは `aria-checked` 属性の値を `true` から `false` やその逆に変更する必要があります。

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

スイッチ (`switch`) ロールが要素に追加されると、ユーザーエージェントは次のようにそれを処理します。

* その要素は、スイッチ (`switch`) ロールを持つものとして、システムのアクセシビリティインフラストラクチャに公開されます。
* `aria-checked` 属性の値が変更されると、システムのアクセシビリティ API が使用可能で、それがスイッチ (`switch`) ロールをサポートしている場合、それを使用してアクセス可能なイベントが発生します。
* スイッチ (`switch`) ロールが適用された要素の子孫である全ての要素には、プレゼンテーション (`presentation`) ロールが自動的に割り当てられます。 これにより、スイッチを構築するために使用された要素が、支援技術によって個別にインタラクションされることを防ぎます。 これらの要素内のテキストは、`display: none` または `aria-hidden="true"` を使用して明示的に隠されていない限り、ユーザーエージェントに可視のままであり、読み上げやその他の方法でユーザーに届けられる可能性があります。

支援技術では、スイッチ (`switch`) ロールをサポートしている場合、次のように対応します。

* スクリーンリーダーは、要素をスイッチとしてアナウンスし、任意でスイッチをアクティブ化する方法についての指示を提供するべきです。

**メモ:** 支援技術がこのロールをどのように扱うべきかについては、さまざまな意見があります。 上記は推奨される実践方法の 1 つであり、他の情報源とは異なる場合があります。

例
-

次の例は、スイッチ (`switch`) ロールを適用して使用する方法を理解するのに役立ちます。

### ARIA でのスイッチロールの追加

この単純な例では、ウィジェットを作成して、ARIA のスイッチ (`switch`) ロールを割り当てています。 このボタンは、電源スイッチのオン/オフを連想させるような外観でスタイリングされています。

#### HTML

ここでの HTML はかなり単純です。 スイッチは `<button>` 要素として実装され、`aria-checked` 属性が `"true"` に設定されているため、最初はチェックされています。 スイッチには、「off」と「on」のラベルを含む 2 つの子要素があり、その後にスイッチを識別する `<label>` が続きます。

```html
<button role="switch" aria-checked="true" id="speakerPower" class="switch">
  <span>off</span>
  <span>on</span>
</button>
<label for="speakerPower" class="switch">Speaker power</label>
```

#### JavaScript

この JavaScript コードは、スイッチウィジェットの `click` イベントを処理する関数を定義して適用します。 この関数は、`aria-checked` 属性を `true` から `false` やその逆に変更します。

```js
document.querySelectorAll(".switch").forEach(function (theSwitch) {
  theSwitch.addEventListener("click", handleClickEvent, false);
});

function handleClickEvent(evt) {
  let el = evt.target;

  if (el.getAttribute("aria-checked") == "true") {
    el.setAttribute("aria-checked", "false");
  } else {
    el.setAttribute("aria-checked", "true");
  }
}
```

#### CSS

CSS の目的は、電源スイッチのパラダイムを連想させるスイッチのルックアンドフィールを確立することです。

```css
button.switch {
  margin: 0;
  padding: 0;
  width: 70px;
  height: 26px;
  border: 2px solid black;
  display: inline-block;
  margin-right: 0.25em;
  line-height: 20px;
  vertical-align: middle;
  text-align: center;
  font:
    12px "Open Sans",
    "Arial",
    serif;
}

button.switch span {
  padding: 0 4px;
  pointer-events: none;
}

[role="switch"][aria-checked="false"] :first-child,
[role="switch"][aria-checked="true"] :last-child {
  background: #262;
  color: #eef;
}

[role="switch"][aria-checked="false"] :last-child,
[role="switch"][aria-checked="true"] :first-child {
  color: #bbd;
}

label.switch {
  font:
    16px "Open Sans",
    "Arial",
    sans-serif;
  line-height: 20px;
  user-select: none;
  vertical-align: middle;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}
```

最も興味深いのは、おそらく属性セレクターと `:first-child` と `:last-child` の擬似クラスを使用して、スイッチのオン/オフに応じてスイッチの外観を変えるという面倒な作業を全て行うことです。

#### 結果

結果は次のようになります。

仕様
--

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # switch |
| ARIA in HTML # index-aria-switch |

関連情報
----

* ARIA: checkbox ロール
* `<input type="checkbox">`

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: rowgroup ロール - アクセシビリティ

ARIA: rowgroup ロール
==================

行グループロール (`role="rowgroup"`) を持つ要素は、表形式の構造内の行 (`row`) のグループです。 行グループ (`rowgroup`) には、グリッド (`grid`)、表 (`table`)、ツリーグリッド (`treegrid` (en-US)) 内のセル (`cell`)、グリッドセル (`gridcell`)、列ヘッダー (`columnheader` (en-US))、行ヘッダー (`rowheader` (en-US)) の行が 1 つ以上含まれます。

```html
<div role="table" aria-label="人口" aria-describedby="country\_population\_desc">
  <div id="country\_population\_desc">国別世界人口</div>
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader" aria-sort="descending">国</span>
      <span role="columnheader" aria-sort="none">人口</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="cell">フィンランド</span>
      <span role="cell">550 万</span>
    </div>
    <div role="row">
      <span role="cell">フランス</span>
      <span role="cell">6700 万</span>
    </div>
  </div>
</div>
```

説明
--

行グループ (`rowgroup`) は、所有する行の要素間の関係を確立し、HTML の表ヘッダー (`<thead>`)、表フッター (`<tfoot>`) 、および表本体 (`<tbody>`) の要素と構造的に同等です。 ただし、異なる種類の行グループ間には区別がありません。 それらの要素は、表 (`table`) やグリッド (`grid`) のロールを持つ要素に含まれているか、またはそれらの要素によって所有されている必要があります。 可能な限り、ネイティブな HTML の `<thead>`、`<tfoot>`、`<tbody>` の要素を使用することを強く推奨します。

ARIA の表ヘッダー、表フッター、表本体を作成するには、行グループロール (`role="rowgroup"`) を要素に追加します。 その行グループは、1 つ以上の行のグループを含むグリッド、表、またはツリーグリッド内にネストするべきです。 各行には子のセルが含まれています。 これらのセルには、列や行のヘッダー、プレーンなセルやグリッドセルとさまざまな種類のセルがあります。

**メモ:** 可能な限り、ネイティブな HTML の表要素（`<table>`）を表ヘッダー（`<thead>`）、表フッター（`<tfoot>`）、表本体（`<tbody>`）の要素と共に使用することを強く推奨します。

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

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

role="table"

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

role="grid"

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

role="treegrid" (en-US)

グリッドに似ていますが、ツリー (`tree`) と同じ方法で展開と折りたたみができる行があります (訳注: W3C のツリーグリッドによるメール受信ボックスの例では、行単位でのインタラクションも可能となっています) 。

#### 子孫のロール

role="row"

表形式の構造内のセルの一行。 行には、1 つ以上のセル（`cell`）、グリッドセル（`gridcell`）、または列ヘッダー（`columnheader` (en-US)）が含まれ、場合によっては行ヘッダー（`rowheader` (en-US)）も含まれます。

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

無し

### 必要な JavaScript 機能

無し。

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

例
-

```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 のロール</span>
      <span role="columnheader" aria-sort="none">意味論的な要素</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row" aria-rowindex="11">
      <span role="cell">header</span>
      <span role="cell">h1</span>
    </div>
    <div role="row" aria-rowindex="16">
      <span role="cell">header</span>
      <span role="cell">h6</span>
    </div>
    <div role="row" aria-rowindex="18">
      <span role="cell">rowgroup</span>
      <span role="cell">thead</span>
    </div>
    <div role="row" aria-rowindex="24">
      <span role="cell">term</span>
      <span role="cell">dt</span>
    </div>
  </div>
</div>
```

上記は、表のヘッダーと表の本体を備えた意味論的でない ARIA の表であり、DOM 内には 81 行のうち 5 行が存在しています。 表のヘッダー内に 1 行、表の本体内に 4 行あります。 ヘッダー行は、ヘッダーの行グループ内に単独であり、2 つの列ヘッダーを持ちます。 列はソート可能ですが、`aria-sort` プロパティで示されているように、現在はソートされていません。 表の本体は別の行グループにあり、現在 DOM 内に 4 行あります。 全ての行が DOM 内にあるわけではないため、全ての行に `aria-rowindex` プロパティを含めています。

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

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

```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 のロール</th>
      <th role="columnheader" aria-sort="none">意味論的な要素</th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row" aria-rowindex="11">
      <td role="cell">header</td>
      <td role="cell">h1</td>
    </tr>
    <tr role="row" aria-rowindex="16">
      <td role="cell">header</td>
      <td role="cell">h6</td>
    </tr>
  </tbody>
</table>
```

上記は、表の意味論的な書き方です。 ARIA のロールが必要になるのは、`display` プロパティを `flex` や `grid` に設定するなどして、表のネイティブな意味論、つまり表の行が完全に破壊されてしまう場合だけです (訳注: ここでの grid は、CSS グリッドレイアウトというグリッドロールとは全く別のものであることに注意してください) 。

### 追加された利点

無し

仕様
--

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

関連情報
----

* HTML の表
* HTML の表本体
* HTML の表フッター
* 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: listbox ロール - アクセシビリティ

ARIA: listbox ロール
=================

リストボックス (`listbox`) ロールは、HTML の `<select>` 要素とは異なり、画像を含むことができる、1 つまたは複数の静的な項目をユーザーが選択できるリストに使用します。

説明
--

リストボックス (`listbox`) ロールは、HTML の選択 (`<select>`) 要素と同様に、ユーザーが 1 つまたは複数の静的な項目を選択できるリストを作成する要素を識別するために使用します。 `<select>` とは異なり、リストボックスは画像を含むことができます。 リストボックスのそれぞれの子は、オプション (`option`) ロールを持つべきです。

HTML の選択要素や、1 項目しか選択できない場合はラジオボタンのグループ、複数項目を選択できる場合はチェックボックスのグループを使用することを強くお勧めします。 なぜなら、全ての子孫に対するフォーカスを管理するためには、キーボードでのインタラクティビティがたくさん必要であり、ネイティブの HTML 要素はこの機能を無料で提供してくれるからです。

リストボックス (`listbox`) ロールを持つ要素は、暗黙的な `aria-orientation` の値として垂直 (`vertical`) を持ちます。

リストに `Tab` で移動すると、他に何も選択されていない場合はリストの最初の項目が選択されます。 `上/下矢印`でリストをナビゲートし、`Shift + 上/下矢印`を押すと選択範囲が移動して拡張されます。 1 文字以上をタイプ入力すると、リスト項目をナビゲートします (同じ文字はその文字から始まる各項目に移動し、異なる文字はその文字列全体で始まる最初の項目に移動します) 。 現在の項目に関連付けられたコンテキストメニューがある場合、`Shift + F10` でそのメニューが起動します。 リスト項目がチェック可能である場合、`スペース`を使用してチェックボックス (checkbox) をトグルできます。 選択可能なリスト項目の場合、`スペース`を使用して選択をトグルし、`Shift + スペース`を使用して連続する項目を選択し、`Ctrl + 矢印`を使用して選択せずに移動し、`Ctrl + スペース`を使用して連続しない項目を選択できます。 全ての項目を選択するには、チェックボックス、リンクまたは他の方法を使用することをお勧めします。 `Ctrl + A` は、このためのショートカットキーとして使用できます。 (訳注: 推奨モデルと説明の無い代替モデルの操作方法が混じっているし、それ以外にもキーボードインタラクションに無い説明や異なった説明もあります。)

リストボックスロールが要素に追加されるか、そのような要素が可視になると、スクリーンリーダーは、リストボックスがフォーカスを得たときにリストボックスのラベルとロールをアナウンスします。 オプションや項目がリスト内でフォーカスされると、次にそれがアナウンスされ、スクリーンリーダーがサポートしていれば、続いてリストでの項目の位置が示されます。 リスト内でフォーカスが移動すると、スクリーンリーダーは関連する項目をアナウンスします。

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

#### 関連するロール

option

1 つ以上のネストされたオプションが必要です。 選択された全てのオプションでは、`aria-selected` が `true` に設定されています。 選択されていない全てのオプションでは、`aria-selected` が (訳注: 省略されるか) `false` に設定されています。 オプションが選択可能でない場合は、`aria-selected` を省略します (訳注: オプションでは、aria-selected のデフォルトは、false であり、変更できないことを示すなら、aria-disabled や aria-readonly があります) 。

list

リスト項目 (`listitem`) 要素を含むセクション。

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

aria-activedescendant

リストボックス内で現在アクティブな要素の `id` 文字列を保持します。 それがオプション要素である場合、そのオプションの `aria-selected` の値が `true` であるかどうかに関係なく、それは最後にインタラクトされたオプションの `id` になります。 複数選択可能なリストボックス内であっても、1 つの `id` の値のみを取ります。 `id` がリストボックスの DOM 子孫を参照していない場合、その `id` は `aria-owns` 属性の IDs の中に含まれている必要があります。

aria-owns

これは、リストボックスの DOM 子要素ではない要素 IDs のスペース区切りのリストです。 ここにリストされている IDs は、他の要素の `aria-owns` 属性にもリストできません。

aria-multiselectable

 ユーザーが複数のオプションを選択できる場合は、これを含めて `true` に設定します。 `true` に設定されている場合、選択可能な*全ての*オプションには、`aria-selected` 属性が含まれ、`true` または `false` に設定されているべきです。 選択可能*でない*オプションは、`aria-selected` 属性を持つ*べきではありません*。
 `false` または省略されている場合、いずれかのオプションが選択されているならば、現在選択されているオプションのみが `aria-selected` 属性を必要とし、`true` に設定されている必要があります (訳注: 仕様では、単一選択コンテナーに関する説明が複数選択コンテナーに比べて具体的ではなく曖昧なので、aria-selected を使わない「選択がフォーカスに従う」単一選択コンテナーと aria-selected を使う「選択がフォーカスに従わない」単一選択コンテナーが混ざっているようです) 。

aria-required

空でない文字列値を持つオプションを選択する必要があることを示す論理属性。

aria-readonly

ユーザーは、オプションが選択されているかいないかを変更することはできませんが、リストボックスはそれ以外の操作が可能です。

aria-label

リストボックスを識別する、人間が読むことができる文字列値。 可視のラベルがある場合は、代わりに `aria-labelledby` を使用してそのラベルを参照するべきです。

aria-labelledby

リストボックスを識別する、要素 IDs のスペースで区切られたリストで、1 つ以上の可視の要素を識別します。 可視のラベルがない場合は、代わりに `aria-label` を使用してラベルを含めるべきです。 (注: 2 つの L が付いた「labelled」は、アクセシビリティ API の規約に基づく正しいスペルです。)

aria-roledescription

リストボックスのロールをより明確に識別する、人間が読むことができる文字列値。 スクリーンリーダーは、ラベル (ある場合) を読んだ後に、「リストボックス」と言う代わりに、この値をユーザーに読み上げることがよくあります。

(詳細および ARIA のステートとプロパティの完全なリストについては、ARIA の `listbox` (role) の文書を参照してください。)

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

* 単一選択リストボックスがフォーカスを受け取ったとき、
    + リストボックスがフォーカスを受け取る前にどのオプションも選択されていなかった場合、最初のオプションがフォーカスを受け取ります。 任意で、最初のオプションを自動選択することもできます。
    + リストボックスがフォーカスを受け取る前にオプションが選択されていた場合、フォーカスは選択されているオプションに設定されます。
* 複数選択リストボックスがフォーカスを受け取ったとき、
    + リストボックスがフォーカスを受け取る前にどのオプションも選択されていなかった場合、フォーカスは最初のオプションに設定され、選択状態の自動変更は行われません。
    + リストボックスがフォーカスを受け取る前に 1 つ以上のオプションが選択されていた場合、フォーカスはリストの中で最初に選択されているオプションに設定されます。
* `↓ (下矢印)`
 : 次のオプションにフォーカスを移動します。 任意で、単一選択リストボックスでは、選択もフォーカスと共に移動することがあります。
* `↑ (上矢印)`
 : 前のオプションにフォーカスを移動します。 任意で、単一選択リストボックスでは、選択もフォーカスと共に移動することがあります。
* `Home`
 (任意): 最初のオプションにフォーカスを移動します。 任意で、単一選択リストボックスでは、選択もフォーカスと共に移動することがあります。 5 つ以上のオプションがあるリストでは、このキーをサポートすることを強くお勧めします。
* `End`
 (任意): 最後のオプションにフォーカスを移動します。 任意で、単一選択リストボックスでは、選択もフォーカスと共に移動することがあります。 5 つ以上のオプションがあるリストでは、このキーをサポートすることを強くお勧めします。
* 先行入力は、全てのリストボックス、特に 7 つ以上のオプションがあるリストボックスに対してお勧めします。
    + 文字を入力: フォーカスは、入力された文字で始まる名前を持つ次の項目に移動します。
    + 複数の文字をすばやく続けて入力: フォーカスは、入力された文字列で始まる名前を持つ次の項目に移動します。
* **複数選択**: 作成者は、複数選択をサポートするために 2 つのインタラクションモデルのいずれかを実装することができます。 ユーザーがリストをナビゲートしながら
 `Shift`
 や
 `Ctrl`
 などの修飾キーを押し続けなくてもよい推奨モデルや、選択状態が失われるのを避けるためにナビゲート中に修飾キーを押し続ける必要のある代替モデルがあります。
    + 推奨選択モデル — 修飾キーを押し続ける必要はありません。
        - `スペース`
         : フォーカスされたオプションの選択状態を変更します。
        - `Shift + ↓ (下矢印)`
         (任意): 次のオプションにフォーカスを移動し、選択状態をトグルします。
        - `Shift + ↑ (上矢印)`
         (任意): 前のオプションにフォーカスを移動し、選択状態をトグルします。
        - `Shift + スペース`
         (任意): 直前に選択した項目からフォーカスされた項目までの連続した項目を選択します。
        - `Ctrl + Shift + Home`
         (任意): フォーカスされたオプションから最初のオプションまでの全てのオプションを選択します。 任意で、フォーカスを最初のオプションに移動します。
        - `Ctrl + Shift + End`
         (任意): フォーカスされたオプションから最後のオプションまでの全てのオプションを選択します。 任意で、フォーカスを最後のオプションに移動します。
        - `Ctrl + A`
         (任意): リスト内の全てのオプションを選択します。 任意で、全てのオプションが選択されている場合は、全てのオプションの選択を解除することもできます。
### 必要な JavaScript 機能

#### 単一選択リストボックスでオプションを選択する

ユーザーがオプションを選択すると、以下が起こる必要があります。

1. 前に選択したオプションの選択を解除し、`aria-selected` を `false` に設定するか、属性を完全に削除して、新しく選択を解除したオプションの外観を選択されていないように変更します。
2. 新しく選択したオプションを選択し、オプションに `aria-selected="true"` を設定し、新しく選択したオプションの外観を選択されているように変更します。
3. リストボックスの `aria-activedescendant` の値を、新しく選択したオプションの `id` に更新します。
4. オプションのブラー (blur) 、フォーカス、選択状態を視覚的に処理します。

#### 複数選択リストボックスでオプションの状態をトグルする

ユーザーがオプションをクリックしたり、オプションにフォーカスしているときに`スペース`を押すなどして、オプションの状態をトグルすると、以下が起こる必要があります。

1. 現在フォーカスされているオプションの `aria-selected` ステート (状態) をトグルし、`aria-selected` の状態を `false` なら `true` に、`true` なら `false` に変更します。
2. 選択状態を反映するようにオプションの外観を変更します。
3. オプションを選択の解除へトグルしている場合でも、リストボックスの `aria-activedescendant` の値を、ユーザーが直前にインタラクトしたオプションの `id` に更新します。

**メモ:** ARIA の使用の第一のルールは、要素を転用して ARIA のロール、ステート、プロパティを追加することでアクセス可能にするのではなく、必要としている意味論と振る舞いがすでに組み込まれているネイティブな機能を使用できることです。 `<option>` 要素を子孫に持つ `<select>` 要素は、必要な全てのインタラクションをネイティブに処理します。

例
-

#### 例 1: aria-activedescendant を使用する単一選択リストボックス

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

```html
<p id="listbox1label" role="label">色を選択:</p>
<div
 role="listbox"
 tabindex="0"
 id="listbox1"
 aria-labelledby="listbox1label"
 onclick="return listItemClick(event);"
 onkeydown="return listItemKeyEvent(event);"
 onkeypress="return listItemKeyEvent(event);"
 aria-activedescendant="listbox1-1">
  <div role="option" id="listbox1-1" class="selected" aria-selected="true">
    緑
  </div>
  <div role="option" id="listbox1-2">オレンジ</div>
  <div role="option" id="listbox1-3">赤</div>
  <div role="option" id="listbox1-4">青</div>
  <div role="option" id="listbox1-5">紫</div>
  <div role="option" id="listbox1-6">ペリウィンクル</div>
</div>
```

これは、ネイティブの HTML の `<select>` 要素と `<label>` 要素でより簡単に処理できます。

```html
<label for="listbox1">色を選択:</label>
<select id="listbox1">
  <option selected>緑</option>
  <option>オレンジ</option>
  <option>赤</option>
  <option>青</option>
  <option>紫</option>
  <option>ペリウィンクル</option>
</select>
```

#### より多くの例

* スクロール可能なリストボックスの例: 1 より大きい `size` 属性を持つ HTML の `<select>` と同様な、スクロールしてより多くのオプションを表示する単一選択リストボックス。 (英語)
* 折りたたみ可能なドロップダウンリストボックスの例: 属性 `size="1"` を持つ HTML の `<select>` と同様な、アクティブにすると展開される単一選択の折りたたみ可能なリストボックス。 (英語)
* 並べ替え可能なオプションを持つリストボックスの例: オプションの追加、移動、および削除が可能なツールバーが付属する、単一選択リストボックスと複数選択リストボックスの両方の例。 (英語)
ベストプラクティス
---------

* キーボードからアクセス可能にするために、作成者はこのロールの全ての子孫のフォーカスを管理 (Managing Focus) するべきです。
* リストがフォーカスされていない場合、作成者は選択に異なるスタイリングを使用することをお勧めします。 例えば、アクティブでない選択は、より明るい背景色で表示されることが多いです。
* リストボックスが別のウィジェットの一部でない場合は、`aria-labelledby` プロパティが設定されているべきです。
* 1 つ以上のエントリーがリストボックスの DOM の子でない場合、追加の `aria-*` プロパティを設定する必要があります (ARIA のベストプラクティス (英語) を参照) 。
* リストボックスを展開 (expand) する正当な理由がある場合は、コンボボックス (`combobox` (en-US)) ロールの方がより適切かもしれません。
仕様
--

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

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

TBD

関連情報
----

* HTML `<select>` 要素
* HTML `<label>` 要素
* HTML `<option>` 要素
* ARIA: `combobox` ロール (en-US)
* ARIA: `option` ロール
* ARIA: `list` ロール
* ARIA: `listitem` ロール
* ARIA のベストプラクティス — リストボックス (英語)
* ARIA のロールモデル — リストボックス (英語)

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: row ロール - アクセシビリティ

ARIA: row ロール
=============

行ロール (`role="row"`) を持つ要素は、表形式の構造内に並んだセルの一行です。 行には、1 つ以上のセル、グリッドセル、列ヘッダー、場合によっては行ヘッダーが含まれます。 行は、グリッド (`grid`)、表 (`table`)、ツリーグリッド (`treegrid` (en-US)) 内に含まれ、任意で行グループ (`rowgroup`) 内に含まれることもあります。

```html
<div role="table" aria-label="人口" aria-describedby="country\_population\_desc">
  <div id="country\_population\_desc">国別世界人口</div>
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader" aria-sort="descending">国</span>
      <span role="columnheader" aria-sort="none">人口</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="cell">フィンランド</span>
      <span role="cell">550 万</span>
    </div>
    <div role="row">
      <span role="cell">フランス</span>
      <span role="cell">6700 万</span>
    </div>
  </div>
</div>
```

説明
--

行ロール (`role="row"`) 要素は、グリッド (`grid`)、表 (`table`)、ツリーグリッド (`treegrid` (en-US)) 内の行であり、任意で行グループ (`rowgroup`) 内の行です。 行は、静的な表構造内の 1 つ以上のセル (`cell`)、グリッドセル (`gridcell`)、列ヘッダー (`columnheader` (en-US))、行ヘッダー (`rowheader` (en-US)) のコンテナーです。 可能な限り、ネイティブな HTML の `<tr>` 要素を使用することを強く推奨します。

ARIA の行を作成するには、コンテナー要素に行ロール (`role="row"`) を追加します。 その行は、グリッド、表、ツリーグリッド内にネストするべきです。 行のグループは、グリッド、表、ツリーグリッド内に直接ネストすることも、これらのコンテナー内の行グループ内にネストすることもできます。 それぞれの行には子のセルが含まれています。 これらのセルには、列や行のヘッダー、グリッドや普通のセルとさまざまな種類のセルがあります。

行には、`aria-colindex`、`aria-level`、`aria-rowindex`、`aria-selected` など、行のロールを明確にする多くの属性を含めることができます。

行がツリーグリッド内にある場合、行には `aria-expanded` 属性を含めることができ、この属性を使って現在の (展開、折りたたみ) 状態を示すことができます。 これは、`aria-expanded` 属性が存在しない通常の表やグリッドの場合には当てはまりません。

表形式の構造を持つインタラクティブなウィジェットを作成するには、代わりにグリッドパターンを使用します。 インタラクションが個々のセルの選択状態を提供する場合や、上下左右のナビゲーションを提供する場合や、ユーザーインターフェイスでセルの順序を入れ替えたり、ドラッグアンドドロップなどで個々のセルの順序を変更したりできる場合は、代わりにグリッド (`grid`) やツリーグリッド (`treegrid` (en-US)) を使用してください。

**メモ:** 可能な限り、ネイティブな HTML の表要素 (`<table>`) を表の行要素 (`<tr>`) と共に使用することを強く推奨します。

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

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

role="rowgroup"

任意のコンテキスト上の行の親であり、子孫の行の間の関係を確立します。 これは、HTML の表要素の `thead`、`tfoot`、`tbody` 要素と構造的に同等です。

role="table"

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

role="grid"

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

role="treegrid" (en-US)

グリッドに似ていますが、ツリー (`tree`) と同じ方法で展開と折りたたみができる行があります (訳注: W3C のツリーグリッドによるメール受信ボックスの例では、行単位でのインタラクションも可能となっています) 。

#### 子孫のロール

role="cell"

表形式のコンテナー内の行にあるセル。

role="gridcell"

グリッドやツリーグリッド内の行にあるセル。

role="columnheader"

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

role="rowheader"

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

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

aria-expanded ステート

行の状態を定義する `aria-expanded` 属性は、次の 3 つの値のいずれかを取るか省略することができます。

* `aria-expanded="true`: 行は現在展開されています。
* `aria-expanded="false"`: 行は現在折りたたまれています。
* `aria-expended="undefined"`、または属性がない: 行は展開も折りたたみもできません。

`aria-expanded` 属性を持つ要素が、その要素が「所有」していない別のグループ化コンテナーの展開を制御する場合、作成者は `aria-controls` 属性を使用してそのコンテナーを参照する**べき**です。

aria-selected ステート

グリッドやツリーグリッドなどのインタラクティブなコンテナー内に行がある場合にのみ関連し、表内に行がある場合は関連しません。 `aria-selected` 属性は、次の 3 つの値のいずれかを取るか省略することができます。

* `aria-selected="true`: 行は現在選択されています。
* `aria-selected="false"`: 行は現在選択されていません。
* `aria-selected="undefined"`、または属性がない: 行は選択できません。

aria-colindex 属性

`aria-colindex` 属性は、列が DOM から隠されている場合にのみ必要です。 一般的に、行自体ではなく、行の子に配置されます。 表示される列が連続している場合は、行に配置できます。

この属性は、値として、1 と表、グリッド、ツリーグリッド内の全列数の間の整数をとります。 `aria-colindex` は、行に配置されると、行内の全列数に対する要素の列インデックスまたは位置を定義します。 例えば、表内に 15 列あり、4、5、6 の列のみが DOM にある場合、全ての行に `aria-colindex="4"` を設定できます。

DOM に存在する列のセットが連続して**いない**場合や、複数の行や列にまたがるセルがある場合は、行自体ではなく各行の全ての子に `aria-colindex` を配置します (訳注: 全ての列を 1 から昇順に数えたものを昇順に配置します) 。

全ての列が DOM にある場合、この属性は必要ありません。

aria-rowindex 属性

`aria-rowindex` 属性は、行が DOM から隠されている場合にのみ必要であり、全行のリスト内のどの行が読み込まれているかを示します。 属性は、それぞれの行に一意の値が設定され、値として、1 と表、グリッド、ツリーグリッド内の全行数の間の整数をとり、各行の位置またはインデックスを示します。 例えば、1,500 行ある表で、ヘッダーと 47 行目と 52 行目のみが DOM に存在する場合、ヘッダー行に `aria-rowindex="1"` が設定され、47 行目と 52 行目にそれぞれ `aria-rowindex="47"` と `aria-rowindex="52"` が設定されます (訳注: ヘッダー行も含んだ全ての行を 1 から昇順に数えたものを昇順に配置します) 。

全ての行が DOM に存在する場合、この属性は必要ありません。

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

無し

### 必要な JavaScript 機能

無し。 ソート可能な列については、列ヘッダー (`columnheader` (en-US)) ロールを参照してください。

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

例
-

```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 のロール</span>
      <span role="columnheader" aria-sort="none">意味論的な要素</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row" aria-rowindex="11">
      <span role="cell">header</span>
      <span role="cell">h1</span>
    </div>
    <div role="row" aria-rowindex="16">
      <span role="cell">header</span>
      <span role="cell">h6</span>
    </div>
    <div role="row" aria-rowindex="18">
      <span role="cell">rowgroup</span>
      <span role="cell">thead</span>
    </div>
    <div role="row" aria-rowindex="24">
      <span role="cell">term</span>
      <span role="cell">dt</span>
    </div>
  </div>
</div>
```

上記は、DOM 内に 81 行のうち 5 行が存在する意味論的でない ARIA の表です。 表のヘッダー内に 1 行、表の本体内に 4 行あります。 ヘッダー行は、ヘッダーの行グループ内に単独であり、2 つの列ヘッダーを持ちます。 列はソート可能ですが、`aria-sort` プロパティで示されているように、現在はソートされていません。 表の本体は別の行グループにあり、現在 DOM 内に 4 行あります。 全ての行が DOM 内にあるわけではないため、全ての行に `aria-rowindex` プロパティを含めています。

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

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

```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 のロール</th>
      <th role="columnheader" aria-sort="none">意味論的な要素</th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row" aria-rowindex="11">
      <td role="cell">header</td>
      <td role="cell">h1</td>
    </tr>
    <tr role="row" aria-rowindex="16">
      <td role="cell">header</td>
      <td role="cell">h6</td>
    </tr>
    <tr role="row" aria-rowindex="18">
      <td role="cell">rowgroup</td>
      <td role="cell">thead</td>
    </tr>
    <tr role="row" aria-rowindex="24">
      <td role="cell">term</td>
      <td role="cell">dt</td>
    </tr>
  </tbody>
</table>
```

上記は、表の意味論的な書き方です。 ARIA のロールが必要になるのは、`display` プロパティを `flex` や `grid` に設定するなどして、表のネイティブな意味論、つまり表の行が完全に破壊されてしまう場合だけです (訳注: ここでの grid は、CSS グリッドレイアウトというグリッドロールとは全く別のものであることに注意してください) 。

### 追加された利点

無し

仕様
--

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

関連情報
----

* 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: contentinfo ロール - アクセシビリティ

ARIA: contentinfo ロール
=====================

コンテンツ情報 (`contentinfo`) ランドマークロールは、著作権情報、ナビゲーションリンク、プライバシーステートメントなど、ウェブサイトの各ページの最後に繰り返される情報を識別するために使用します。 このセクションは一般的にフッターと呼ばれます。

```html
<div role="contentinfo">
  <h2>フッター</h2>
  <!-- フッターのコンテンツ -->
</div>
```

これはウェブサイトのフッターです。 代わりに `<footer>` 要素を使用することをお勧めします。

```html
<footer>
  <h2>フッター</h2>
  <!-- フッターのコンテンツ -->
</footer>
```

説明
--

コンテンツ情報 (`contentinfo`) ロールは、ページフッターを識別するためのランドマークです。 ランドマークは、支援技術によって使用され、文書の大きなセクションを迅速に識別してナビゲートすることができます。 ページには、1 ページあたり 1 つのトップレベルのコンテンツ情報 (`contentinfo`) ランドマークロールのみが含まれているべきです。

各ページには、`<footer>` 要素を使用するか、または `role="contentinfo"` を宣言することによって作成されたコンテンツ情報 (`contentinfo`) ランドマークが 1 つだけ含まれているべきです。 `<iframe>` 要素を介して埋め込まれたコンテンツに存在するコンテンツ情報 (`contentinfo`) ランドマークは、この制限に含まれません。

**メモ:** `<footer>` 要素を使用すると、自動的にセクションがコンテンツ情報 (`contentinfo`) ロールを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきで、念のため VoiceOver の既知の問題をテストしてください。

例
-

```html
<body>
  <!-- 他のページのコンテンツ -->

  <div role="contentinfo">
    <h2>MDN Web Docs</h2>
    <ul>
      <li><a href="#">ウェブ技術</a></li>
      <li><a href="#">ウェブ開発について学ぶ</a></li>
      <li><a href="#">MDN について</a></li>
      <li><a href="#">フィードバック</a></li>
    </ul>
    <p>
      © 2005-2018 Mozilla および各貢献者 コンテンツは
      <a href="#">これらのライセンス</a> の下で公開されています。
    </p>
  </div>
</body>
```

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

### 控えめに使用する

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

### ページあたり 1 つの `contentinfo` ランドマーク

#### `<body>` 要素

`<body>` 要素の直接の子孫として使用し、文書ごとに 1 つだけコンテンツ情報 (`contentinfo`) ランドマークが存在するべきです。

#### 巨大フッター

文書のフッターの中に追加の `<footer>` 要素やコンテンツ情報 (`contentinfo`) ランドマークをネストしないでください。 代わりに、他のコンテンツセクショニング要素を使用してください。

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

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

文書に複数のコンテンツ情報 (`contentinfo`) ランドマークロールや `<footer>` 要素がある場合は、各ランドマークの `aria-label` 属性でラベルを指定します。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解することができます。

```html
<body>
  ...

  <article>
    <h2>毎日パッタイ</h2>
    <!-- 記事のコンテンツ -->
    <footer aria-label="毎日パッタイのメタデータ">
      <p>
        <a href="#">リサ</a>によって<time datetime="2018-09-23 12:17"
 >5月16日</time
 >に投稿されました。
      </p>
    </footer>
  </article>

  ...

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

#### 冗長な説明

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

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

### 好ましい HTML

`<body>` 要素の直接の子孫である場合、`<footer>` 要素を使用すると、自動的にセクションがコンテンツ情報 (`contentinfo`) ロールを持つことを伝えます (VoiceOver の既知の問題は別として)。 可能であれば、代わりに `<footer>` を使用することをお勧めします。 `<article>`、`<aside>`、`<main>`、`<nav>`、`<section>` 内にネストされた `<footer>` 要素は、コンテンツ情報 (`contentinfo`) とはみなされないことに注意してください。

### 追加された利点

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

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

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

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

関連情報
----

* `<footer>`: フッター要素
* contentinfo (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1
* HTML のセクションとアウトラインの使用
* ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ
* Using WAI-ARIA Landmarks – 2013 | The Paciello Group
* Accessible Landmarks | scottohara.me
* The Footer Element Update | 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 ロールの使用`


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

status ロールの使用
=============

### 説明

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

`status` ロールは、ライブリージョンの一種であり、内容は `alert` を正当化するほど重要ではないユーザーのためのアドバイザリ情報であり、多くの場合ステータスバーとして表示されます。 ロールが要素に追加されると、ブラウザーは、支援技術製品にアクセス可能なステータスイベントを送信し、ユーザーに通知することができます。

ステータス情報のコンテンツは、ステータスオブジェクト内に提供されなければならず、このオブジェクトがフォーカスを受け取らないようにするべきです。 ページの別の部分がステータスに表示されるものを制御する場合、関係は `aria-controls` 属性を介して明示的に指定するべきです。

支援技術は、ステータスをレンダリングするために点字ディスプレイのいくつかのセルを予約することができます。

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

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

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

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

* スクリーンリーダーは、現在のステータスをアナウンスするための特別なキーを提供することがあり、これはステータスのライブリージョンの内容を提示するべきです。 `aria-live="assertive"` が設定されている場合を除いて、ユーザーがアイドル状態になったときにアナウンスするべきです。
* スクリーン拡大鏡でステータスが拡大されることがあります。

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

### 例

#### 例 1: HTML で status ロールを追加する

以下のスニペットは、`status` ロールが html ソースコードに直接追加される仕組みを示しています。

```html
<p role="status">変更は自動的に保存されました。</p>
```

#### 動作する例

### 注

### 使用された ARIA 属性

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

* alert ロール
* ライブリージョンのロール
* ライブリージョンの属性
### 互換性

* Paciello Group は、2014 年のブログ記事を通じて互換性に関するいくつかのデータを発表しました。 ARIA ライブリージョンのスクリーンリーダーのサポート
* TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する
### その他のリソース

* status ロールの WAI-ARIA 1.0（2014 年）よりの以前の勧告


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

ARIA: gridcell ロール
==================

グリッドセル (gridcell) ロールは、グリッド (grid) やツリーグリッド (treegrid (en-US)) にセルを作成するために使用します。 これは、情報を表スタイルでグループ化する HTML の `td` 要素の機能を模倣することを意図しています。

```html
<div role="gridcell">Potato</div>
<div role="gridcell">Cabbage</div>
<div role="gridcell">Onion</div>
```

`role="gridcell"` が適用されている要素は、行 (`row`) ロールを持つ要素の子である必要があります。

```html
<div role="row">
  <div role="gridcell">Jane</div>
  <div role="gridcell">Smith</div>
  <div role="gridcell">496-619-5098</div>
  …
</div>
```

ARIA の第一のルールは、ネイティブな HTML の要素や属性に必要としている意味論と振る舞いがある場合、要素を転用して ARIA を追加する代わりにネイティブな HTML を使用することです。 次のように、代わりに、ネイティブな HTML の `td` 要素を `contenteditable` 属性と組み合わせて使用します。

```html
<td>Potato</td>
<td>Cabbage</td>
<td>Onion</td>
```

説明
--

### 行と列が動的に追加、非表示、または削除されるグリッドセル

`role="gridcell"` が適用されている要素は、表、グリッド、またはツリーグリッドに行や列を動的に追加、非表示、または削除する機能がある場合、ARIA を使用して表スタイルのグループ化における順序を説明する必要があります。

`aria-colindex` を使用して、列の並びでのグリッドセル (`gridcell`) の順序を説明し、`aria-rowindex` を使用して、行の並びでのグリッドセルの順序を説明します。 `role="grid"` が適用された親要素で `aria-colcount` と `aria-rowcount` を使用して、列または行の総数を設定します。

次のサンプルコードは、3 番目と 4 番目の列が削除された情報の表スタイルでのグループ化を示しています。 `aria-colindex` は行の位置を説明するために使用されており、支援技術を使用している人が特定の行が削除されたことを推測できるようにします。

```html
<div role="grid" aria-colcount="6">
  <div role="rowgroup">
    <div role="row">
      <div role="columnheader" aria-colindex="1">First name</div>
      <div role="columnheader" aria-colindex="2">Last name</div>
      <div role="columnheader" aria-colindex="5">City</div>
      <div role="columnheader" aria-colindex="6">Zip</div>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <div role="gridcell" aria-colindex="1">Debra</div>
      <div role="gridcell" aria-colindex="2">Burks</div>
      <div role="gridcell" aria-colindex="5">New York</div>
      <div role="gridcell" aria-colindex="6">14127</div>
    </div>
  </div>
  …
</div>
```

### 全体的な構造が不明な場合のグリッドセルの位置の説明

コンテンツを表スタイルでグループ化することで列と行に関する情報が提供されない場合、グリッドセルの位置は、`aria-describedby` を使用してプログラムで説明する必要があります。 `aria-describedby` に提供される `id` は、行と列を意図する親要素に対応している必要があります。

`aria-describedby` を介して適用された行ヘッダー (`rowheader` (en-US)) ロールまたは列ヘッダー (`columnheader` (en-US)) ロールを持つ親要素を参照することにより、支援技術は、グリッドセル (`gridcell`) 要素とコンテンツを表スタイルでグループ化した残りとの位置と関係を理解できます。

### インタラクティブなグリッドとツリーグリッド

#### 編集可能なセル

`td` 要素とグリッドセル (`gridcell`) ロールが適用された要素の両方を編集可能にして、スプレッドシートの編集と同様の機能を模倣することができます。 これは、HTML の `contenteditable` 属性を適用することによって行われます。

```html
<td contenteditable="true">Notes</td>

<div role="gridcell" contenteditable="true">Item cost</div>
```

`contenteditable` は、適用される要素を `Tab` キーでフォーカス可能にします。 グリッドセルが条件付きで編集が禁止されている状態に切り替わる場合は、グリッドセル要素で `aria-readonly` を切り替えます。

#### 展開可能なセル

ツリーグリッド (treegrid (en-US)) では、`aria-expanded` 属性を切り替えることでグリッドセルを展開可能にできます。 この属性が指定されている場合、個々のグリッドセルにのみ適用されることに注意してください。

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

grid

親要素が情報を表スタイルまたはツリースタイルでグループ化するものであることを伝えます。

row

グリッドセル (`gridcell`) が情報の表スタイルでのグループ化による行の一部であることを伝えるために必要です。

columnheader

どの要素が関連する列ヘッダーであるかを指定します。

aria-colindex

情報を表スタイルでグループ化した列の残りの部分に対する要素の位置を識別します。

rowheader

どの要素が関連する行ヘッダーであるかを指定します。

aria-rowindex

情報を表スタイルでグループ化した行の残りの部分に対する要素の位置を識別します。

### 例

次の例では、情報を表スタイルでグループ化したものを作成します。

```html
<h3 id="table-title">Jovian gas giant planets</h3>
<div role="grid" aria-describedby="table-title">
  <div role="rowgroup">
    <div role="row">
      <div role="columnheader">Name</div>
      <div role="columnheader">Diameter (km)</div>
      <div role="columnheader">Length of day (hours)</div>
      <div role="columnheader">Distance from Sun (10<sup>6</sup>km)</div>
      <div role="columnheader">Number of moons</div>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <div role="gridcell">Jupiter</div>
      <div role="gridcell">142,984</div>
      <div role="gridcell">9.9</div>
      <div role="gridcell">778.6</div>
      <div role="gridcell">67</div>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <div role="gridcell">Saturn</div>
      <div role="gridcell">120,536</div>
      <div role="gridcell">10.7</div>
      <div role="gridcell">1433.5</div>
      <div role="gridcell">62</div>
    </div>
  </div>
</div>
```

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

グリッドセル (`gridcell`) および特定のグリッドセル (`gridcell`) 関連の ARIA のロールとプロパティのサポートは、支援技術ではサポートが不十分です。 可能であれば、代わりにネイティブな HTML の表のマークアップを利用してください。

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

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

関連情報
----

* 表要素
* ARIA: grid ロール
* Grid Role - Maxability
* 表の行要素
* ARIA: row ロール
* Row Role - Maxability
* aria-rowcount - Maxability
* ARIA: rowgroup ロール
* Rowgroup Role - Maxability
* 表のヘッダー要素
* Columnheader - Maxability
* aria-colcount - Maxability
* 表のデータセル要素
* gridcell: Accessible Rich Internet Applications (WAI-ARIA) 1.1
* Gridcell Role - Maxability

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: button ロール - アクセシビリティ

ARIA: button ロール
================

`button` ロールは、ユーザーによってアクティブ化されたときに反応を引き起こすクリック可能な要素のためのものです。 `role="button"` を追加すると、この要素がボタンであるものの、ボタンの機能を提供していないことをスクリーンリーダーに伝えます。代わりに `<button>` または `<input>` に `type="button"` を付けたものを使用してください。

解説
--

button ロールは、スクリーンリーダーなどの支援技術に対して、要素をボタンとして識別するものです。ボタンは、フォームを送信する、ダイアログを開く、アクションを取り消す、新しいレコードを挿入する、情報を表示するなどのコマンドを実行するために使用されるウィジェットです。 `role="button"` を追加すると、その要素がボタンであることを支援技術に指示しますが、ボタンの機能は提供しません。代わりに `<button>` または `<input>` に `type="button"` を付けたものを使用してください。

`button` ロールは `aria-pressed` (en-US) 属性との組み合わせで、トグルボタンを生成するために使用することができます。

```html
<div id="saveChanges" tabindex="0" role="button" aria-pressed="false">Save</div>
```

上記の例ではフォーカス可能なボタンを作成していますが、ボタンの外観や機能を含めるには、 JavaScript と CSS が必要です。 `<button>` や `<input>` に `type="button"` を付けた要素を使用すると、これらの機能が既定で提供されます。

```html
<button type="button" id="saveChanges">Save</button>
```

**メモ:** `role="button"` を意味論的な `<button>` や `<input type="button">` 要素の代わりに使用する場合は、要素をフォーカス可能にし、 `click` イベントと `keydown` イベントのイベントハンドラーを定義する必要があります。これは、あらゆる形のユーザー入力を処理するために、 `Enter` キーと `Space` キーを取り扱うことを含みます。公式の WAI-ARIA サンプルコードを参照してください。

通常のボタンウィジェットに加えて、ボタン以外の要素を使用してトグルボタンまたはメニューボタンを作成する場合は、`role="button"` を含める必要があります。

トグルボタンは、オフ (押されていない) またはオン (押されている) のいずれかが可能な 2 つの状態のボタンです。 `aria-pressed` (en-US) 属性の `true` または `false` の値で、ボタンをトグルボタンとして認識します。

メニューボタンは、メニューを制御するボタンであり、 `aria-haspopup` (en-US) プロパティ属性に `menu` または `true` が設定されています。

### すべての子孫が表示用途になる

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

例えば、見出しを含む以下の `button` 要素を考えてみましょう。

```html
<div role="button"><h3>Title of my button</h3></div>
```

`button` の子孫は表示用途になるので、以下のコードと等価になります。

```html
<div role="button"><h3 role="presentation">Title of my button</h3></div>
```

支援技術のユーザーの視点からは、見出しが存在しないことになります。上記のコード片は以下のものとアクセシビリティツリー上では同じになるからです。

```html
<div role="button">Title of my button</div>
```

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

`aria-pressed` (en-US)

ボタンをトグルボタンとして定義します。 `aria-pressed` の値は、ボタンの状態を表します。 値には、ボタンが現在押されていない場合は `aria-pressed="false"`、ボタンが現在押されていることを示す `aria-pressed="true"`、ボタンが部分的に押されていると見なされる場合は `aria-pressed="mixed"` が含まれます。 属性が省略されているか、デフォルト値の `aria-pressed="undefined"` に設定されている場合、要素は押されている状態をサポートしません。

`aria-expanded` (en-US)

ボタンが他の要素のグループ化を制御している場合、`aria-expanded` 状態は、制御されているグループ化が現在展開されているか折りたたまれているかを示します。 ボタンに `aria-expanded="false"` が設定されている場合、グループ化は現在展開されていません。 ボタンに `aria-expanded="true"` が設定されている場合、現在展開されています。 ボタンに `aria-expanded="undefined"` が設定されているか、属性が省略されている場合、展開不可能です。

### 基本的なボタン

ボタンには常にアクセス可能な名前を付ける必要があります。 ほとんどのボタンでは、この名前はボタン内のテキストと同じになります。 場合によっては、例えばアイコンで表されるボタンの場合、アクセス可能な名前は `aria-label` (en-US) または `aria-labelledby` 属性から提供される場合があります。

### トグルボタン

トグルボタンには通常、押された状態と押されていない状態の 2 つの状態があります。 3 番目の混合 (mixed) 状態は、他のトグルボタンやチェックボックスなど、すべてが同じ値を共有するわけではない他の要素を制御するトグルボタンで使用できます。 要素がトグルボタンであるかどうかは、 (要素がネイティブなボタン要素でない場合に) ボタン (`button`) ロールに加えて `aria-pressed` (en-US) 属性で示すことができます。

* `aria-pressed` が使用されていない場合、または "undefined" 状態に設定されている場合、ボタンはトグルボタンではありません。
* `aria-pressed="false"` が使用されている場合、ボタンは現在押されていないトグルボタンです。
* `aria-pressed="true"` が使用されている場合、ボタンは現在押されているトグルボタンです。
* `aria-pressed="mixed"` が使用されている場合、ボタンは部分的に押されていると見なされます。

例として、「ミュート」というラベルの付いたオーディオプレーヤーのミュートボタンは、`aria-pressed` 状態を true に設定することで、音がミュートされていることを示します。 トグルボタンのラベルは、その状態が変化しても変更してはいけません。 この例では、ラベルは「ミュート」のままで、スクリーンリーダーは、`aria-pressed` の値に応じて、「ミュートトグルボタンが押されました」や「ミュートトグルボタンが押されていません」と読み上げます。 ボタンのラベルを「ミュート」から「ミュート解除」に変わるようなデザインであれば、トグルボタンは適切ではないため、`aria-pressed` 属性は省略されます。

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

| キー | 機能 |
| --- | --- |
| `Enter` | ボタンをアクティブ化する。 |
| `Space` | ボタンをアクティブ化する。 |

ボタンのアクティブ化に続いて、ボタンが実行するアクションの種類に応じてフォーカスが設定されます。 例えば、ボタンをクリックしてダイアログを開いた場合、フォーカスはダイアログに移動する必要があります。 ボタンがダイアログを閉じる場合、ダイアログのコンテキストで実行された機能が論理的に別の要素につながる場合を除いて、フォーカスはダイアログを開いたボタンに戻る必要があります。 オーディオファイルのミュートやミュート解除など、ボタンが現在のコンテキストを変更する場合、通常はボタンにフォーカスが残ります。

### 必要な JavaScript 機能

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

ボタンは、マウス、タッチ、およびキーボードのユーザーが操作できます。 ネイティブな HTML の `<button>` 要素の場合、ボタンの `onclick` イベントは、マウスクリックの場合、およびボタンにフォーカスがあるときにユーザーが `Space` または `Enter` を押した場合に発生します。 ただし、別のタグを使用してボタンを作成すると、`role="button"` が使用されている場合でも、`onclick` イベントはマウスカーソルでクリックされたときにのみ発生します。 このため、`Space` キーまたは `Enter` キーが押されたときにボタンがトリガーされるように、個別のキーイベントハンドラーを要素に追加する必要があります。

`onclick`

マウスクリックイベントやタッチイベントを使用してボタンがアクティブ化されたときに発生するイベントを処理します。

`onKeyDown`

キーボードの Enter キーまたは Space キーを使用してボタンがアクティブ化されたときに発生するイベントを処理します。 (非推奨の onKeyPress ではないことに注意してください)

例
-

### 基本的なボタンの例

この例では、 span 要素にボタン (`button`) ロールが与えられています。 `<span>` 要素が使用されるため、ボタンをフォーカス可能にし、ページのタブ順序の一部にするために、`tabindex` 属性が必要です。 含まれている CSS スタイルは、`<span>` 要素をボタンのように見せ、ボタンにフォーカスがあるときに視覚的な合図を提供するために提供されています。

`handleBtnClick` イベントハンドラーと `handleBtnKeyDown` イベントハンドラーは、マウスクリックまたは `Space` キーや `Enter` キーを使用してアクティブ化されると、ボタンのアクションを実行します。 この場合のアクションは、名前のリストに新しい名前を追加することです。

テキストボックスに名前を入れて、例を試してください。 ボタンを押すと、名前がリストに追加されます。

#### HTML

```html
<h1>ARIA Button Example</h1>
<ul id="nameList"></ul>
<label for="newName">Enter your Name: </label>
<input type="text" id="newName" />
<span
 role="button"
 tabindex="0"
 onclick="handleCommand(event)"
 onKeyDown="handleCommand(event)"
 >Add Name</span
>
```

#### CSS

```css
[role="button"] {
  padding: 2px;
  background-color: navy;
  color: white;
  cursor: default;
}
[role="button"]:hover,
[role="button"]:focus,
[role="button"]:active {
  background-color: white;
  color: navy;
}
ul {
  list-style: none;
}
```

#### JavaScript

```js
function handleCommand(event) {
  // マウスクリックと Enter または Space での
  // キーボードアクティブ化の両方を処理します

  // Enter と Space 以外のキー押下ではコマンドを起動しない
  if (
    event instanceof KeyboardEvent &&
    event.key !== "Enter" &&
    event.key !== " "
  ) {
    return;
  }

  // input 要素から新しい名前の値を取得します
  const newNameInput = document.getElementById("newName");
  const name = newNameInput.value;
  newNameInput.value = ""; // テキストフィールドをクリアします
  newNameInput.focus(); // テキストフィールドにフォーカスを与えて、追加する名前を入力できるようにします。

  // リストに空白のエントリーを追加しません。
  if (name.length > 0) {
    const listItem = document.createElement("li");
    listItem.appendChild(document.createTextNode(name));

    // 新しい名前をリストに追加します。
    const list = document.getElementById("nameList");
    list.appendChild(listItem);
  }
}
```

#### 結果

### トグルボタンの例

このスニペットでは、`<span>` 要素がボタン (`button`) ロールと `aria-pressed` 属性を使用してトグルボタンに変換されます。 ボタンがアクティブ化すると、`aria-pressed` の値の状態が切り替わり、`true` から `false` になり、そしてまた元に戻ります。

#### HTML

```html
<button
 type="button"
 onclick="handleBtnClick(event)"
 onKeyDown="handleBtnKeyDown(event)">
  Mute Audio
</button>

<span
 role="button"
 tabindex="0"
 aria-pressed="false"
 onclick="handleBtnClick(event)"
 onKeyDown="handleBtnKeyDown(event)">
  Mute Audio
</span>

<audio
 id="audio"
 src="https://soundbible.com/mp3/Tyrannosaurus%20Rex%20Roar-SoundBible.com-807702404.mp3">
  Your browser does not support the `audio` element.
</audio>
```

#### CSS

```css
button,
[role="button"] {
  padding: 3px;
  border: 2px solid transparent;
}

button:active,
button:focus,
[role="button"][aria-pressed="true"] {
  border: 2px solid #000;
}
```

#### JavaScript

```js
function handleBtnClick(event) {
  toggleButton(event.target);
}

function handleBtnKeyDown(event) {
  // スペースや Enter が押されたかどうかを確認します
  // "Spacebar" は IE11 に対応するため
  if (event.key === " " || event.key === "Enter" || event.key === "Spacebar") {
    // 既定のアクションを防止して Space が押されたときにスクロールするのを止める
    event.preventDefault();
    toggleButton(event.target);
  }
}

function toggleButton(element) {
  const audio = document.getElementById("audio");

  // ボタンが押されているかを確認します
  const pressed = element.getAttribute("aria-pressed") === "true";

  // aria-pressed を反対の状態に変更します
  element.setAttribute("aria-pressed", !pressed);

  // オーディオファイルの再生状態を切り替えます
  if (pressed) {
    audio.pause();
  } else {
    audio.play();
  }
}
```

#### 結果

アクセシビリティの考慮
-----------

ボタンはインタラクティブなコントロールであるため、フォーカス可能です。 ボタン (`button`) ロールがそれ自体ではフォーカスできない要素 (`<span>`、`<div>`、`<p>` など) に追加された場合、ボタンをフォーカス可能にするには `tabindex` 属性を使用する必要があります。

**警告:** ボタンロールでリンクをマークアップするときは注意してください。 ボタンは `Space` キーや `Enter` キーを使用して操作することが期待されますが、リンクは `Enter` キーを使用して操作することが期待されます。つまり、リンクをボタンのような振る舞いで使用する場合、 `role="button"` を追加するだけでは不十分です。 ネイティブなボタンとの一貫性を保つために、`Space` キーを待ち受けするキーイベントハンドラーを追加する必要もあります。

ボタン (`button`) ロールを使用すると、スクリーンリーダーは要素をボタンとしてアナウンスします。 通常、「クリック」の後にボタンのアクセス可能な名前が続きます。 アクセス可能な名前は、要素のコンテンツ、または `aria-label` の値、または `aria-labelledby` 属性によって参照される要素、または含まれている場合は説明のいずれかです。

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

リンクがボタンのアクションを実行する場合、要素に `role="button"` を指定すると、支援技術のユーザーが要素の機能を理解するのに役立ちます。 ただし、より良い解決策は、機能と ARIA のロールに一致するようにビジュアルデザインを調整することです。 可能な場合は、ボタン (`button`) ロールではなく、ネイティブな HTML のボタン (`<button>`、`<input type="button">`、`<input type="submit">`、`<input type="reset">`、および　`<input type="image">`) を使用することをお勧めします。 ネイティブな HTML のボタンは、すべてのユーザーエージェントと支援技術によってサポートされており、追加のカスタマイズを必要とせずに、デフォルトでキーボードとフォーカスの要件を提供します。

仕様書
---

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

関連情報
----

* `<button>` 要素
* `<input>` 要素
* `<input type="button">`
* `<input type="submit">`
* `<input type="reset">`
* `aria-pressed`
* `aria-expanded`
* `aria-haspopup`
* Strong native semantics in HTML5
* Notes on Using ARIA in HTML
* Official WAI-ARIA example code


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

ARIA: table ロール
===============

ARIA の role 属性の table 値は、このロールを含む要素を、ネイティブの `<table>` HTML 要素と同様に、行と列に配置されたデータを含む非インタラクティブな表構造を持つものとして識別します。

```html
<div
 role="table"
 aria-label="意味論的な表の要素"
 aria-describedby="semantic\_table\_desc">
  <div id="semantic\_table\_desc">
    ARIA の table ロールの代わりに使用する意味論的な要素
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader">ARIA の table ロール</span>
      <span role="columnheader">意味論的な要素</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="cell">table</span>
      <span role="cell">table</span>
    </div>
    <div role="row">
      <span role="cell">rowgroup</span>
      <span role="cell">thead, tbody, or tfoot </span>
    </div>
  </div>
</div>
```

説明
--

`role="table"` を持つ要素はセルを含む行を持つ静的な表構造です。 表の個々のセル内のウィジェットはインタラクティブになることがありますが、セルはフォーカス可能または選択可能ではありません。 可能な限りネイティブの HTML `<table>` 要素を使用することを強くお勧めします。

**警告:** 表が選択状態を維持している場合、2 次元ナビゲーションを使用している場合、またはユーザーがセルの順序を並べ替えることができる場合は、代わりにグリッド（`grid`）またはツリーグリッド（`treegrid`）を使用します。

ARIA の表を作成するには、`role="table"` をコンテナ要素に追加します。 そのコンテナ内では、各行に `role="row"` を設定し、子セルを含ませます。 各セルには、列ヘッダー（`columnheader`）、行ヘッダー（`rowheader`）、または単なるセル（`cell`）のいずれかのロールがあります。 行は、表の子になることも、行グループ（`rowgroup`）内になることもあります。

表のキャプションは、`aria-labelledby`、`aria-label`、または `aria-describeby` によって定義できます。 `<tbody>`、`<thead>`、`<tr>`、`<th>`、`<td>` など、他のすべての意味論的な表の要素は、`rowgroup`、`row`、`columnheader`、`cell` などの関連するロールを介して追加する必要があります。

表にソート可能な列または行が含まれる場合は、`aria-sort` 属性をヘッダーのセル要素に追加する必要があります（表自体ではありません）。 ある行または列が隠されている場合は、それぞれのセルの `aria-colindex` または `aria-rowindex` とともに、それぞれ列または行の総数を示す `aria-colcount` または `aria-rowcount` を含める必要があります。 `aria-colindex` または `aria-rowindex` は、それぞれ行または列内のセルの位置に設定します。 表に複数行または複数列にわたるセルが含まれる場合は、`aria-rowspan` または `aria-colspan` も含める必要があります。 すべての支援技術でサポートされているすべての関連する意味論的な要素および属性と共に、`<table>` 要素を単純に使用する方がはるかに簡単です。

表構造を持つインタラクティブなウィジェットを作成するには、代わりにグリッドパターンを使用してください。 インタラクションが個々のセルの選択状態を提供する場合、左から右へ、上から下へのナビゲーションを提供する場合、またはユーザーインターフェイスでセルの順序の並べ替えやドラッグアンドドロップなどの個々のセルの順序の変更を許可する場合、代わりに `grid` または `treegrid` を使用してください。

**メモ:** 可能な限りネイティブの HTML の表要素を使用することを強くお勧めします。

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

role="rowgroup"

表のオプションの子である行グループは、`<thead>`、`<tbody>`、および `<tfoot>` と同様に、行のグループをカプセル化します。

role="row"

表内の行、およびオプションで行グループ（`rowgroup`）内の行、つまり 1 つ以上のセル（`cell`）、列ヘッダー（`columnheader`）、または行ヘッダー（`rowheader`）のコンテナです。

aria-describedby 属性

値として、表のキャプションとして機能する要素の `id` を取ります。

aria-label 属性

`aria-label` は、表にアクセス可能な名前を提供します。

aria-colcount 属性

この属性は、ある列が常に DOM に存在しない場合にのみ必要です。 全表の列数を明示的に示します。 値を全表の列の総数に設定します。 不明な場合は、`aria-colcount="-1"` を設定してください。

aria-rowcount 属性

この属性は、DOM ノードの数を最小限に抑えるために行を再利用するスクロール可能な表など、ある行が常に DOM に存在しない場合にのみ必要です。 全表の行数を明示的に示します。 値を全表の行の総数に設定します。 不明な場合は、`aria-rowcount="-1"` を設定してください。

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

無し

### 必要な JavaScript 機能

無し。 ソート可能な列については、 `columnheader` (en-US) ロールを参照してください。

**メモ:** ARIA の最初のルールは、要素を再定義し、ARIA のロール、ステート、プロパティを**追加して**アクセス可能にするのではなく、すでに組み込まれている意味論と挙動を持つネイティブな機能を使用できることです。 可能な限り、ARIA の `table` ロールの代わりに HTML の `<table>` 要素を使用してください。

例
-

```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 のロール</span>
      <span role="columnheader" aria-sort="none">意味論的な要素</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row" aria-rowindex="11">
      <span role="cell">header</span>
      <span role="cell">h1</span>
    </div>
    <div role="row" aria-rowindex="16">
      <span role="cell">header</span>
      <span role="cell">h6</span>
    </div>
    <div role="row" aria-rowindex="18">
      <span role="cell">rowgroup</span>
      <span role="cell">thead</span>
    </div>
    <div role="row" aria-rowindex="24">
      <span role="cell">term</span>
      <span role="cell">dt</span>
    </div>
  </div>
</div>
```

上記は表の一部です。 `aria-rowcount` プロパティで示されるように、全表には 81 のエントリがありますが、現在表示されているのは 4 つだけです。 列ヘッダーの `aria-sort` プロパティで示されるように、列はソート可能ですが、現在はソートされていません。

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

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

### 追加された利点

無し

仕様
--

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

関連情報
----

* HTML の表要素
* ARIA: grid ロール


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

ARIA: document ロール
==================

複雑な複合ウィジェット (en-US)やアプリケーションで一般的に使用される文書 (`document`) ロールは、コンテキストを読み取りモードに切り替えることを支援技術を知らせることができます。 文書 (`document`) ロールは、読み取りモードまたは閲覧モードを持つ支援技術に、この要素に含まれるコンテンツを文書モードを使用して読み取るように指示します。

```html
<div role="dialog">
  ...
  <div id="InfoText" role="document" tabindex="0">
    <p>いくつかの情報テキストがここに入ります。</p>
  </div>
  ...
  <button>閉じる</button>
</div>
```

この例は、いくつかのコントロールと、支援技術のユーザーがタブ移動で読むことができる情報テキストを含むセクションを備えたダイアログウィジェットを示しています。

説明
--

デフォルトでは、ウェブページは文書 (document、ドキュメント) として扱われ、支援技術 (AT) は、新しいウェブページに入るとき閲覧モードまたは読み取りモードにします。 このモードは、ウィジェットロールやアプリケーション (`application`) ロールなど、さまざまなロールを通じて変更できます。 文書 (`document`) ロールは、AT を閲覧モードまたは読み取りモードに戻します。

一般的に、アプリケーションロールまたは他のインタラクティブなウィジェットロール内に配置される文書 (`document`) ロールは、利用可能な場合、支援技術のユーザーが閲覧モードまたは仮想読み取りモードを使用して読むべきである複雑な複合ウィジェットのセクションを示すために使用します。

読み取りモードを持つ AT は、ウィジェットロールまたはアプリケーションロールの設定を持つ要素を除くすべての要素に対して読み取りモードをデフォルトとしているため、文書ロールは、静的リッチテキストとして読むべきであるウィジェットまたはアプリケーション内のフォーカス可能な要素に対してのみ役立ちます。 ウィジェット内のテキストを含む要素に `role="document"` と `tabindex="0"` を追加すると、スクリーンリーダーのユーザーは `Tab` キーを押して文書要素にフォーカスを置き、スクリーンリーダーの読み取りカーソルでテキストを読むことができます。

支援技術は、コンテキストを文書モードに戻すべきであり、場合によっては、親の動的コンテキスト用に配線されたコントロールから横取りすることで、`上矢印`や`下矢印`のキーボードイベントなどの標準入力イベントを再度有効にして、読み取りカーソルを制御します。

記事 (`article`) ロールとは対照的に、文書 (`document`) ロールは、文書ロールを持つ他の要素との関係はなく、単にそれ含む複合ウィジェットとの関係があるだけです。 記事は関連記事を持つことができます。

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

`aria-expanded`

文書要素が折りたたみ可能である場合は、`true` または `false` の値を含み、文書が現在展開されているか折りたたまれているかを示します。 他の値には、文書が折りたたまれないことを意味するデフォルトの `undefined` が含まれます。

`tabindex="0"`

支援技術のユーザーがそれにタブ移動してすぐに読み始められるように、それをフォーカス可能にするために使用します。

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

`tabindex="0"` 属性/値のペアを設定することで、要素をフォーカス可能にするべきです。 これにより、ユーザーはそれにタブ移動でき、自動的に読み取りモードが起動し、内容をすぐに読むことができるようになります。

### 必要な JavaScript 機能

なし (任意の属性が必要とする場合を除く。 例えば、文書 (`document`) が折りたたみ可能である場合、`aria-expanded` のステートと値を維持する必要があります。)

例
-

例として、Gmail と 1 つの会話ビューがあります。 GMail はウェブアプリケーションです。 Gmail の場合、ユーザーエージェントとのやりとりのほとんどがアプリケーションによって奪われます。 ただし、会話の主題を含む 1 つの会話の開始見出しにキーボードフォーカスが設定されている場合、スクリーンリーダーのユーザーは読み取りモードのコマンドを使用してメッセージを読んだり、展開したり、折りたたんだり、操作したりできます。 [戻る] ボタンをアクティブ化するか、関連するキーを押すことによって、フォーカスがメッセージリストに戻ると、アプリケーションとの直接やりとりモードが再び起動し、`矢印`キーを使用してリスト内の別の会話に移動できます。

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

`tabindex` 属性に値 0 を設定することにより、文書ロールを持つ項目がフォーカス可能であることを常に確認してください。 これにより、項目がタブ順序にも含まれるようになります。

### 追加の利点

文書ロールは、ユーザーがスクリーンリーダーの標準コマンドで読むべき内容であることを明確に示すことによって、支援技術の振る舞いを間接的に制御する簡単な方法です。

仕様
--

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

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

関連情報
----

* ARIA: widget ロール (en-US)
* ARIA: application ロール

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: textbox ロール - アクセシビリティ

ARIA: textbox ロール
=================

`textbox` ロールは、自由形式テキストの入力を可能にする要素を識別するために使用されます。 可能であれば、このロールを使用するのではなく、単一行入力の場合は `type="text"` の `<input>` 要素を使用し、複数行入力の場合は `<textarea>` 要素を使用してください。

説明
--

要素に `textbox` ロールがある場合、ブラウザーはアクセス可能なテキストボックスイベントを支援技術に送信し、ユーザーにそのことを通知できます。

デフォルトは単一行入力で、`Return` や `Enter` はフォームを送信します。 この場合、 `type="text"` の HTML の `<input>` を使用することをお勧めします。 HTML の `<textarea>` のように改行をサポートする複数行のテキストボックスを作成するには、`aria-multiline="true"` を設定します。 HTML の `contenteditable` 属性を含めると、テキストノードが確実に編集可能になります。

```html
<!-- 単純なテキスト入力フィールド -->
<div id="txtboxLabel">5桁の郵便番号を入力してください</div>
<div
 role="textbox"
 contenteditable="true"
 aria-placholder="5-digit zipcode"
 aria-labeledby="txtboxLabel"></div>

<!-- 複数行のテキスト領域 -->
<div id="txtboxMultilineLabel">記事のタグを入力してください</div>
<div
 role="textbox"
 contenteditable="true"
 aria-multiline="true"
 aria-labeledby="txtboxMultilineLabel"
 aria-required="true"></div>
```

意味論的な要素はより簡潔であり、テキストボックス機能をサポートするために JavaScript を必要としません。

```html
<label for="txtbox">5桁の郵便番号を入力してください</label>
<input type="text" placholder="5-digit zipcode" id="txtbox"/>

<!-- 複数行のテキスト領域 -->
<label for="txtboxMultiline">記事のタグを入力してください</lable>
<textarea id="txtboxMultiline" required></textarea>
```

テキストフィールドが読み取り専用の場合、要素に対して `aria-readonly="true"` と設定することでこれを示します。

### 関連する ARIA のプロパティ

`aria-activedescendent` 属性

その値として、ID は DOM のフォーカスを持つ要素の子孫であるか、または `aria-owns` 属性で指定された論理的子孫であり、`combobox` などの複合ウィジェットの一部であるときに、その要素にフォーカスがあるときを示します。 たとえば、コンボボックスでは、テキストボックスにフォーカスが残ることがありますが、`textbox` 要素の `aria-activedescendant` の値は、テキストボックスによって制御されるポップアップリストボックスの子孫を参照します。 この属性は、フォーカスが変更されるとプログラムで更新する必要があります。

`aria-autocomplete` 属性

フィールドへのユーザーの入力が、意図した値の予測の表示をトリガーできるかどうか、およびその方法を示します。 これは以下の値をサポートしています。

* `inline`: 予測されたテキストがキャレットの後に挿入されます。
* `list`: 予測されたテキストは、値の集まりとして提示されます。
* `both`: 予測されたテキストは、値の集まりとして提示され、補完に必要なテキストの 1 つの値がキャレットの後に挿入されます。
* `none`（デフォルト）: 予測されたテキストは提供されません。

`list` または `both` が設定されている場合は、`aria-controls` 属性と `aria-haspopup` 属性も含める必要があります。 `aria-controls` の値は、提案値のリストを含む要素の ID です。 さらに、テキストボックスまたは `combobox` ロールを含む包含要素のいずれかに、提案値のリストを含む要素のロールに一致する `aria-haspopup` の値を持ちます。

`aria-multiline` 属性

`aria-multiline="true"` が設定されている場合、支援技術は、テキストボックスが複数行入力をサポートしていることをユーザーに知らせます。

`Enter`

や

`Return`

はフォームを送信するのではなく改行を作成します。 ARIA は要素の動作を変更しません。 むしろ、この機能は開発者によって制御されなければなりません。 `false` が設定されている場合、または属性が省略されていて `false` がデフォルトの場合、ユーザーはコントロールが単一行のテキストボックスであり、

`Enter`

や

`Return`

がフォームを送信することを期待しています。

`aria-placeholder` 属性

テキストフィールドに何を入力するかについてのヒント（単語またはフレーズ）をユーザーに示します。 ヒントは、サンプル値または期待されるフォーマットの簡単な説明であるべきです。 この情報は、ラベルの代用として使用するべきではありません。 ラベルはフォーカス可能で永続的で、どのような情報が期待されているかを示し、プレースホルダーのテキストは期待値を一時的に示唆しているだけで、誤って実装するとアクセシビリティが低下する可能性があります。 プレースホルダーは、コントロールが最初にフォーカスを受け取ったときやユーザーが以前に入力した値を削除したときなど、コントロールの値が空の文字列のときに表示するべきです。 `aria-placeholder` を使用する代わりに、意味論的な `<input type="text">` や `<textarea>` に `placeholder` 属性を使用します。

`aria-readonly` 属性

ユーザーがテキストフィールドの値を変更できないことを示します。 `aria-readonly` を使用する代わりに、意味論的な `<input type="text">` や `<textarea>` に `readonly` 属性を使用します。

`aria-required` 属性

フィールドが送信される前にフィールドに値を指定する必要があることを示します。 `aria-required` を使用する代わりに、意味論的な `<input type="text">` や `<textarea>` に `required` 属性を使用します。

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

単一行での使用（`aria-multiline` が `false` または使用されていない場合）では、`Return` キーや `Enter` キーがフォームを送信します。 複数行での使用（`aria-multiline` が `true` の場合）では、`Return` キーや `Enter` キーを押すと改行が挿入されます。

### 必要な JavaScript 機能

すべてのプロパティとステートに関連するすべての機能を維持する必要があります。 また、単一行のテキストボックスにおいて `Enter` や `Return` でフォームを送信する必要があります。

フォーカスイベントハンドラと aria-activedescendent 属性

テキストボックスとリストボックスで構成されるコンボボックスなどの複合ウィジェットを実装する場合は、ハンドラを使用して `aria-activedescendent` 属性を管理する必要があります。 この手法を使用する前に、ターゲットとするブラウザーが現在サポートしていることを確認してください。 詳細については、aria-descendent の仕様（英語）を参照してください。

**メモ:** ARIA の `textbox` ロールの代わりに `type="text"` の `<input>` 要素、または `<textarea>` 要素を使用する方が良い方法です。 どちらの意味論的な要素を使用する場合でも、ARIA の `textbox` ロールは必要ありません。 HTML で ARIA を使用する場合の注意（英語）を参照してください。

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

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

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

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

* スクリーンリーダーは、フォーカスが最初にテキストボックスに着くと、そのラベルとロールをアナウンスするべきです。 コンテンツも含まれている場合は、これを通常のテキストボックスの場合と同様にアナウンスするべきです。
* スクリーン拡大鏡でテキストボックスが拡大されることがあります。

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

例
-

### 例 1: 単一行入力の HTML コードにロールを追加する

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

```html
<div role="textbox" contenteditable="true"></div>
```

### 例 2: 複数行入力の HTML コードにロールを追加する

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

```html
<div role="textbox" contenteditable="true" aria-multiline="true"></div>
```

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

* このロールが適用される HTML 要素に `contenteditable="true"` 属性を必ず追加してください。 `aria-readonly` を `true` に設定した場合でもそうします。 このようにして、読み取り専用でない場合は、コンテンツを編集可能にすることを通知します。
関連情報
----

* ARIA: search ロール


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

alertdialog ロールの使用
==================

### 説明

このテクニックは、`alertdialog` ロールの使用方法を示しています。

`alertdialog` ロールは、ユーザーの即時の注意を要する緊急情報をユーザーに通知するために使用されます。 その名前が示すように、`alertdialog` は一種のダイアログです。 これは、「ARIA: `dialog` ロール」で提供されているほとんどの指示が `alertdialog` ロールにも適用できることを意味します。

* アラートダイアログには常に（`aria-labelledby` または `aria-label` を通じて）アクセス可能な名前を付ける必要があります。 ほとんどの場合、アラートテキストはアラートダイアログのアクセス可能な説明としてマークアップする必要があります（`aria-describeby` を使用）。
* 通常のアラートとは異なり、アラートダイアログには少なくとも 1 つのフォーカス可能なコントロールがあり、アラートダイアログが表示されたらフォーカスをそのコントロールに移動する必要があります。 一般にアラートダイアログには、フォーカスを移動するために使用できる[確認]、[閉じる]、または[キャンセル]ボタンが少なくともあります。 さらに、アラートダイアログには、テキストフィールド、タブ、チェックボックスなどの他のインタラクティブなコントロールを含めることができます。 どの特定のコントロールにフォーカスに移動するべきかは、ダイアログの目的によって異なります。
* アラートダイアログ内のタブ順序は折り返す必要があります。

通常のダイアログとの違いは、`alertdialog` ロールはアラート、エラー、またはワーニングが発生した場合にのみ使用するべきであることです。 言い換えれば、ダイアログの情報とコントロールがユーザの即時の注意を必要とするとき、`dialog` の代わりに `alertdialog` が使用されるべきです。 この区別をするのは開発者次第です。

その緊急性のために、アラートダイアログは常にモーダルでなければなりません。

**メモ:** このロールは、インタラクティブなコントロールに関連付けられているアラートメッセージにのみ使用するべきです。 アラートダイアログに静的コンテンツしか含まれておらず、インタラクティブなコントロールがまったくない場合は、`alertdialog` がここで使用する適切なロールではない可能性があります。 その場合は、代わりに `alert` ロールを使用するべきです（ARIA: `alert` ロールの説明を参照）。

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

`alertdialog` ロールが使用されるとき、ユーザーエージェントは以下を行うべきです。

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

アラートダイアログが表示されたら、スクリーンリーダーはアラートをアナウンスするべきです。

アラートダイアログが正しくラベル付けされ、ダイアログ内のコントロールにフォーカスが移動したら、スクリーンリーダーは、フォーカスが当たっている要素をアナウンスする前に、ダイアログのアクセス可能なロール、名前、およびオプションの説明をアナウンスするべきです。

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

### 例

#### 例 1: 基本的なアラートダイアログ

以下のコードスニペットは、メッセージと[OK]ボタンだけを提供するアラートダイアログをマークアップする方法を示しています。

```html
<div
 role="alertdialog"
 aria-labelledby="dialog1Title"
 aria-describedby="dialog1Desc">
  <div role="document" tabindex="0">
    <h2 id="dialog1Title">
      あなたのログインセッションは期限切れになりそうです
    </h2>
    <p id="dialog1Desc">
      セッションを延長するには、[OK]ボタンをクリックしてください。
    </p>
    <button>OK</button>
  </div>
</div>
```

#### 動作する例

TBD

### 注

### 使用された ARIA 属性

* alertdialog
* aria-labelledby
* aria-describedby
### 関連する ARIA 技術

* ARIA: `dialog` ロール
* ARIA: `alert` ロール
### 互換性

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

### その他のリソース


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

progressbar ロールの使用
==================

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

`progressbar` ロールは、長い時間がかかったり、いくつかの手順で構成されるタスクの進捗状況を表示する要素に使用するべきです。

プログレスバーは、ユーザーの要求を受けて、アプリケーションが要求された操作を完了に向かって進捗していることを示します。 プログレスバーの実際の値が決定できる場合、開発者は `aria-valuenow`、`aria-valuemin`、`aria-valuemax` 属性を使用してこの進捗状況を示す必要があります。 進捗値が不確定な場合、開発者は `aria-valuenow` 属性を省略するべきです。

タスクが進捗するにつれて、`aria-valuenow` 値は、この進捗を支援技術製品に示すために動的に更新されなければならない。

プログレスバーがページの特定の領域のロード進捗状況を説明している場合、作者は、aria-describedby を使用してステータスを指し示すべきであり、ロードが完了するまで領域の aria-busy 属性を `true` に設定する**べき**です（SHOULD）。 これは常に読み取り専用なので、ユーザーはプログレスバーの値を変更することはできません。

**メモ:** 支援技術は、aria-valuetext が指定されていない限り、`aria-valuemin` の値と `aria-valuemax` の値の間の範囲のパーセントとして、`aria-valuenow` の値を一般にレンダリングします。 この計算に適した方法で、`aria-valuemin`、`aria-valuemax`、`aria-valuenow` の値を設定することをお勧めします。

**メモ:** `progressbar` ロールを持つ要素の暗黙の `aria-readonly` の値は `true` です。

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

スクリーンリーダーは進捗状況の更新が発生したときにアナウンスするべきです。 プログレスバーにラベルが付いている場合は、ラベルテキストも同様に述べるべきです。

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

例
-

### 例 1: パーセンテージ値を持つ基本的なプログレスバー

```html
<div
 role="progressbar"
 aria-valuenow="20"
 aria-valuemin="0"
 aria-valuemax="100">
  20 %
</div>
```

### 例 2: aria-valuetext の使用

```html
<div
 role="progressbar"
 aria-valuenow="20"
 aria-valuemin="0"
 aria-valuetext="ステップ 2: ファイルをコピーしています... "
 aria-valuemax="100">
  ステップ 2: ファイルをコピーしています...
</div>
```

### 動作する例

注
-

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

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

互換性
---

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

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