recursal/MDN huggingface dataset:
link ロールの使用
===========

### 説明

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

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

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

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

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

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

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

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

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

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

### 例

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

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


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


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


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

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

### 注

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

### 使用された ARIA 属性

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

* button ロール
### 互換性

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

### その他のリソース

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

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


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

説明
--

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

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

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

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

list

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

group

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

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

無し

### 必要な JavaScript 機能

無し

例
-

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

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

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

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


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


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


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


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

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

仕様
--

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

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

TBD

関連情報
----

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

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

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

解説
--

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

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

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

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

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

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

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

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


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


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


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


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


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

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

#### 関連するロール

`listbox`

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

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

`aria-selected` (en-US)

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

`aria-checked` (en-US)

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

`aria-posinset` (en-US)

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

`aria-setsize` (en-US)

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

`aria-disabled`

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

`aria-hidden` (en-US)

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

`aria-invalid` (en-US)

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

`aria-busy` (en-US)

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

`aria-labelledby`

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

`aria-label` (en-US)

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

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

仕様書
---

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

関連情報
----

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

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

説明
--

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

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

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

例
-

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


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


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


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



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

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

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

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

仕様
--

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

関連情報
----

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

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

### 説明

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

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

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

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

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

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

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

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

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

### 例

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

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


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


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

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


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


#### 動作する例

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

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

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

* marquee ロール
### 互換性

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

### その他のリソース

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

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

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

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

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

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

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

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

例
-

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

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


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


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

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

### 例 2: テキスト値

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


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


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


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

注
-

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

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

互換性
---

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

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

* slider ロールの WAI-ARIA 仕様（英語）
presentation ロールの使用
===================

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

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

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

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

例
-

### Example 1


```html
Code
```


#### 動作する例

注
-

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

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

互換性
---

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

その他のリソース
--------
radio ロールの使用
============

### 説明

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

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

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

### 例

#### 例 1

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


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

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


#### 動作する例

### 注

### 使用された ARIA 属性

### 関連する ARIA 技術

### 互換性

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

### その他のリソース
toolbar ロールの使用
==============

### 説明

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

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

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

### 例

#### Example 1


```html
Code
```


#### 動作する例

W3C toolbar example

### 注

### 使用された ARIA 属性

### 関連する ARIA 技術

### 互換性

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

### その他のリソース
group ロールの使用
============

### 説明

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

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

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

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

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

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

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

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

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

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

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

### 例

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

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


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


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

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


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


#### 動作する例

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

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

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

* region ロール
### 互換性

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

### その他のリソース

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

`term` ロールは、オプションで対応する `definition` (en-US) を持つ単語やフレーズに使用することができます。

解説
--

`term` ロールは、オプションで対応する `definition` (en-US) を持つ単語やフレーズに使用することができます。 HTML の `<dfn>` 要素や定義リスト（`<dl>`）内の定義項（`<dt>`）要素と意味づけは同じです。

`term` ロールは、作成者によって定義が提供された、またはユーザーによって提供されることが期待されている単語または語句を明示的に識別するために使用します。既存の定義、または定義を入力するフォームやフォームコントロールがある場合、作者は `aria-details` (en-US) を設定し、関連の要素を指すようにすべきです (SHOULD)。

`role="term"` をリンクのような対話的要素に使用しないでください。支援技術ユーザーが要素と対話するのを妨害する可能性があるからです。また、用語そのものがアクセシビリティ名なので、 `aria-label` (en-US) や `aria-labelledby` は使用しないでください。

**警告:** アクセシブル名は用語そのものでなければなりませんので、`aria-label` や `aria-labelledby` は使用しないでください。

### 関連付けられる WAI-ARIA ロール、ステート、プロパティ

なし。

### キーボード操作

なし。

### 必要な JavaScript 機能

なし。

例
-


```html
<p>
  <span role="term">Mansplaining</span>,
  <span role="definition"
 >a portmanteau of "man" and "explain", is the patronizing act of explaining
    without being asked to do so, to someone already learned on the topic, often
    after someone has already explained it</span
 >.
</p>
```


より良い意味づけをするために、上記は次のように書くこともできます。


```html
<p>
  <dfn role="term">Mansplaining</dfn>,
  <span role="definition"
 >a portmanteau of "man" and "explain", is the patronizing act of explaining
    without being asked to do so, to someone already learned on the topic, often
    after someone has already explained it</span
 >.
</p>
```


または ARIA なしで書くとこうなります（ただし、表示したいように表示されない可能性があります）。


```html
<dl>
  <dt>Mansplaining</dt>
  <dd>
    A portmanteau of "man" and "explain", is the patronizing act of explaining
    without being asked to do so, to someone already learned on the topic, often
    after someone has already explained it.
  </dd>
</dl>
```

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

`role="term"` は、支援技術ユーザーが要素と対話するのを妨げる可能性があるので、リンクのような対話要素には使用しないでください。

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

用語自体がアクセシブル名を定義できるようにしてください。 `aria-label` や `aria-labelledby` は使用しないでください。

### 推奨される HTML

仕様書
---

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

関連情報
----

* ARIA: `definition` ロール (en-US).
* HTML の `<dfn>` 要素