recursal/MDN huggingface dataset:
ARIA の使用: ロール、ステート、プロパティ
========================

ARIA は、要素に適用できる意味づけを定義しており、これらは **ロール** （ユーザーインターフェイス要素の種類を定義する）と、ロールが対応している **ステート** と **プロパティ** に分けられます。オーナーは、要素がすでに適切な ARIA の意味づけが（適切な HTML 要素を使用することによって）ある場合を除いて、そのライフサイクルの間に要素に ARIA の役割と適切な状態およびプロパティを割り当てる必要があります。ARIA の意味づけは、ブラウザーのアクセシビリティ API に余分な情報を公開するだけで、ページの DOM には影響を与えません。

ロール
---

### ウィジェットロール

* `button`
* `checkbox`
* `gridcell`
* `link`
* `menuitem` (en-US)
* `menuitemcheckbox` (en-US)
* `menuitemradio` (en-US)
* `option`
* `progressbar`
* `radio`
* `scrollbar` (en-US)
* `searchbox` (en-US)
* `separator` (en-US) （フォーカス可能な場合）
* `slider`
* `spinbutton` (en-US)
* `switch`
* `tab`
* `tabpanel` (en-US)
* `textbox`
* `treeitem` (en-US)
### 複合ロール

以下のテクニックでは、それぞれの複合ロールとその必須および任意の子ロールについて説明します。

* `combobox` (en-US)
* `grid` （`row`, `gridcell`, `rowheader` (en-US), `columnheader` (en-US) ロールを含む）
* `listbox` （`option` ロールを含む）
* `menu` (en-US)
* `menubar` (en-US)
* `radiogroup` (en-US) （`radio role` を参照）
* `tablist` (en-US) （`tab` および `tabpanel` (en-US) ロールを含む）
* `tree` (en-US)
* `treegrid` (en-US)
### 文書構造ロール

* `application`
* `article`
* `cell`
* `columnheader` (en-US)
* `definition` (en-US)
* `directory` (en-US)
* `document`
* `feed`
* `figure`
* `group`
* `heading`
* `img` (en-US)
* `list`
* `listitem`
* `math` (en-US)
* `none` (en-US)
* `note` (en-US)
* `presentation`
* `row`
* `rowgroup`
* `rowheader` (en-US)
* `separator` (en-US)
* `table`
* `term`
* `toolbar`
* `tooltip` (en-US)
### ランドマークロール

* `banner`
* `complementary`
* `contentinfo`
* `form`
* `main`
* `navigation`
* `region`
* `search`
### ライブリージョンロール

* `alert`
* `log`
* `marquee` (en-US)
* `status`
* `timer` (en-US)
### ウィンドウロール

* `alertdialog`
* `dialog`
ステートとプロパティ
----------

### ウィジェット属性

* `aria-autocomplete`
* `aria-checked` (en-US)
* `aria-current` (en-US)
* `aria-disabled`
* `aria-errormessage`
* `aria-expanded` (en-US)
* `aria-haspopup` (en-US)
* `aria-hidden` (en-US)
* `aria-invalid` (en-US)
* `aria-label` (en-US)
* `aria-level` (en-US)
* `aria-modal` (en-US)
* `aria-multiline` (en-US)
* `aria-multiselectable` (en-US)
* `aria-orientation` (en-US)
* `aria-placeholder` (en-US)
* `aria-pressed` (en-US)
* `aria-readonly` (en-US)
* `aria-required` (en-US)
* `aria-selected` (en-US)
* `aria-sort` (en-US)
* `aria-valuemax` (en-US)
* `aria-valuemin` (en-US)
* `aria-valuenow` (en-US)
* `aria-valuetext` (en-US)
### ライブリージョン属性

* `aria-live` (en-US)
* `aria-relevant` (en-US)
* `aria-atomic`
* `aria-busy` (en-US)
### ドラッグ＆ドロップ属性

* `aria-dropeffect` (en-US) 
非推奨
* `aria-grabbed` 
非推奨
### 関係属性

* `aria-activedescendant`
* `aria-colcount` (en-US)
* `aria-colindex` (en-US)
* `aria-colspan` (en-US)
* `aria-controls` (en-US)
* `aria-describedby`
* `aria-details` (en-US)
* `aria-errormessage`
* `aria-flowto` (en-US)
* `aria-labelledby`
* `aria-owns` (en-US)
* `aria-posinset` (en-US)
* `aria-rowcount` (en-US)
* `aria-rowindex` (en-US)
* `aria-rowspan` (en-US)
* `aria-setsize` (en-US)
### MicrosoftEdge 固有のプロパティ

* `x-ms-aria-flowfrom` (en-US) 
Non-standard
ARIA ガイド
========

Accessible Rich Internet Applications (**ARIA**) は障がいのある人にとってウェブをもっとアクセシブルにする方法です。それに従ういくつかのガイドラインは、ウィジェットの配置のためのドラッグアンドドロップのように、よりよいアクセシビリティを保証します。

* フォームのエラー処理
* ウィジェットへのラベルづけ
* 複合ウィジェットや領域のラベルづけ
* 複合ウィジェットのフォーカス管理 (aria-activedescendant vs roving tabindex)
* ランドマークロールを使う
* 動的更新とライブ領域を扱う
* AT 製品の仮想と非仮想モード
* ドラッグアンドドロップを使う
* 非 ARIA なスクリーンリーダーのユーザーへの通知
* プレゼンテーションロールの構造を固定する
* レイアウト表を隠す
* モーダルと非モーダルなダイアログを管理する
* HTML5 で ARIA を使う
* ARIA をテストする方法
* モバイル端末での 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` の状態は、ドラッグ＆ドロップ処理で要素が「つかまれた」状態を示します。 
非推奨

解説
--

テキスト選択、画像、リンクは既定でドラッグ可能です。 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` 属性は、 `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-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 ライブリージョンにおいて、グローバルな `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` 属性は、`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` 属性は、そのオブジェクトのエラーメッセージを表示する要素を特定します。

解説
--

ユーザーが作成したエラーがある場合、その存在を知らせ、修正する方法を指示したいものです。 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)
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 年）よりの以前の勧告
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` ロールは、長い時間がかかったり、いくつかの手順で構成されるタスクの進捗状況を表示する要素に使用するべきです。

プログレスバーは、ユーザーの要求を受けて、アプリケーションが要求された操作を完了に向かって進捗していることを示します。 プログレスバーの実際の値が決定できる場合、開発者は `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 製品の組み合わせに関するサポート情報を追加する

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