Skip to content

Commit

Permalink
web/accessibility 以下の Note: Warning: Callout: を日本語に変換 (#8932)
Browse files Browse the repository at this point in the history
  • Loading branch information
mfuji09 authored Oct 3, 2022
1 parent b170b03 commit 1028ec2
Show file tree
Hide file tree
Showing 43 changed files with 76 additions and 76 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ var showTip = function(el) {

### ロールの変化

> **Note:** 作成中
> **メモ:** 作成中
ARIA によって開発者は、誤った意味を持っていたり意味が存在しない要素に対して意味的なロールを宣言することができます。例えばメニューを作るために順番付けがないリストを使用するとき、{{HTMLElement("ul")}} に `menubar`**`role`** を、各々の {{HTMLElement("li")}} に `menuitem`**`role`** を与えるべきです。

Expand All @@ -143,7 +143,7 @@ ARIA によって開発者は、誤った意味を持っていたり意味が存

### 非同期のコンテンツ変更

> **Note:** 作成中です。[Live Regions](/ja/docs/ARIA/Live_Regions) もご覧ください。
> **メモ:** 作成中です。[Live Regions](/ja/docs/ARIA/Live_Regions) もご覧ください。
## キーボードナビゲーション

Expand Down
4 changes: 2 additions & 2 deletions files/ja/web/accessibility/aria/aria_live_regions/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ slug: Web/Accessibility/ARIA/ARIA_Live_Regions

JavaScript を使うと、検索結果のリストを瞬時に更新する、もしくはユーザーの操作を必要としないような控えめなアラートや通知を表示するなど、ページ全体をリロードせずにページの一部を動的に変更することができます。 これらの変更は通常ページを見ることのできるユーザーにとっては視覚的に明らかですが、支援技術ユーザーにとっては明確ではないかもしれません。ARIA ライブリージョンはこのギャップを埋め、動的なコンテンツの変更を支援技術により通知できるやり方で、プログラムによって表出させる方法を提供します。

> **Note:** 支援技術はライブリージョンへのコンテンツの動的な変更を通知します。ライブリージョンはブラウザーと支援技術が認識できるように最初から(かつ空で)存在しなければなりません。続いて後に起こる変更は通知されます。
> **メモ:** 支援技術はライブリージョンへのコンテンツの動的な変更を通知します。ライブリージョンはブラウザーと支援技術が認識できるように最初から(かつ空で)存在しなければなりません。続いて後に起こる変更は通知されます。
>
> 単に読み込まれた最初のマークアップに `aria-live` 属性もしくは 特化したライブリージョン `role` (例えば `role="alert"` など)を含めても何も効果はありません。
>
Expand All @@ -20,7 +20,7 @@ JavaScript を使うと、検索結果のリストを瞬時に更新する、も
1. **`aria-live`**: `aria-live=POLITENESS_SETTING` はスクリーンリーダーがライブリージョンの更新処理の優先度を設定するために使われます。設定は `off``polite``assertive` で、デフォルトは `off` です。この属性は間違いなく最も重要な属性です。
2. **`aria-controls`**: `aria-controls=[IDLIST]` は領域とそれをコントロールするものを関連付けるために使用されます。領域は `div``id` のように識別され、スペースを用いて複数の領域を aria-controls に関連付けることができます。例えば `aria-controls="myRegionID1 myRegionsID2"`

> **Warning:** ライブリージョンの aria-controls の側面が現在の AT に実装されているか、どの AT で実装されているかはわかりません。調査が必要です。
> **警告:** ライブリージョンの aria-controls の側面が現在の AT に実装されているか、どの AT で実装されているかはわかりません。調査が必要です。
通常、`aria-live="polite"` のみが使われます。ユーザーにとって重要な更新を受け取るが、うるさくなるほど速くすべきでない領域にはこの属性を設定すべきです。スクリーンリーダーはユーザーがアイドル状態になったときに読み上げを行います。

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ original_slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedesce

ユーザーエージェントは、検索、レンダリング、およびエンドユーザーとウェブコンテンツとのやりとりを容易にするソフトウェアで、`aria-activedescendant` プロパティを使用して、フォーカスを持っているアクティブな子について支援技術に通知します。 `aria-activedescendant` プロパティを使用するこのアクティブな子は、常に画面上に表示され、ドキュメントオブジェクトモデルのコンテナの子孫でなければなりません。

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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ body {

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

> **Note:** TBD: さらに互換性情報を追加する
> **メモ:** TBD: さらに互換性情報を追加する
## ARIA を使用せずに実現できるか

Expand Down
4 changes: 2 additions & 2 deletions files/ja/web/accessibility/aria/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Accessible Rich Internet Applications **(ARIA)** はウェブコンテンツや

ARIA は、アプリケーションで一般的に使用されている対話操作やウィジェットを、他のメカニズムがない場合に支援技術に渡すことができるように HTML を補完します。例えば ARIA は、 HTML4 のアクセシブルナビゲーションランドマーク、 JavaScript のウィジェット、フォームのヒントやエラーメッセージ、ライブコンテンツの更新などを可能にします。

> **Warning:** これらのウィジェットの多くは、後に HTML5 に組み込まれました。意味的に正しい HTML 要素が存在するのであれば、 **ARIA を使用するよりも、その要素を使用したほうがいいでしょう**。例えば、ネイティブな要素には[キーボードのアクセシビリティ](/ja/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets)や役割、状態が組み込まれています。しかし、 ARIA を使用する場合は、スクリプトで (同等の) ブラウザーの動作を模倣する責任があります。
> **警告:** これらのウィジェットの多くは、後に HTML5 に組み込まれました。意味的に正しい HTML 要素が存在するのであれば、 **ARIA を使用するよりも、その要素を使用したほうがいいでしょう**。例えば、ネイティブな要素には[キーボードのアクセシビリティ](/ja/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets)や役割、状態が組み込まれています。しかし、 ARIA を使用する場合は、スクリプトで (同等の) ブラウザーの動作を模倣する責任があります。
プログレスバーウィジェットのためのマークアップです。

Expand Down Expand Up @@ -38,7 +38,7 @@ function updateProgress(percentComplete) {
}
```

> **Note:** ARIA は HTML4 以降に導入されたため、 HTML4 や XHTML の派生形では検証できません。ただし、技術的に問題があっても、それを上回るアクセシビリティの向上が得られます。
> **メモ:** ARIA は HTML4 以降に導入されたため、 HTML4 や XHTML の派生形では検証できません。ただし、技術的に問題があっても、それを上回るアクセシビリティの向上が得られます。
>
> HTML5 では、すべての ARIA 属性が有効です。新しいランドマーク要素 (`<main>`, `<header>`, `<nav>` など) は ARIA ロールに組み込まれたため、重複指定する必要はありません。
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ original_slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role

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

> **Note:** このロールは、インタラクティブなコントロールに関連付けられているアラートメッセージにのみ使用するべきです。 アラートダイアログに静的コンテンツしか含まれておらず、インタラクティブなコントロールがまったくない場合は、`alertdialog` がここで使用する適切なロールではない可能性があります。 その場合は、代わりに `alert` ロールを使用するべきです([ARIA: `alert` ロール](/ja/docs/Web/Accessibility/ARIA/Roles/Alert_Role)の説明を参照)。
> **メモ:** このロールは、インタラクティブなコントロールに関連付けられているアラートメッセージにのみ使用するべきです。 アラートダイアログに静的コンテンツしか含まれておらず、インタラクティブなコントロールがまったくない場合は、`alertdialog` がここで使用する適切なロールではない可能性があります。 その場合は、代わりに `alert` ロールを使用するべきです([ARIA: `alert` ロール](/ja/docs/Web/Accessibility/ARIA/Roles/Alert_Role)の説明を参照)。
### ユーザーエージェントと支援技術への影響

Expand All @@ -31,7 +31,7 @@ original_slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role

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

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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ slug: Web/Accessibility/ARIA/Roles/Application_Role
- 属性値の変更
- : `aria-activedescendant` は、アプリケーションコンテナー内のフォーカスを管理するために使用します。 フォーカスやインタラクションのポイントを変更するキーボードやその他のアプリケーションのイベントに応じて設定します。

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

Expand Down
4 changes: 2 additions & 2 deletions files/ja/web/accessibility/aria/roles/article_role/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ slug: Web/Accessibility/ARIA/Roles/Article_Role

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

> **Note:** 記事 (`article`) ロールを持つ `<div>` ではなく、`<article>` 要素を使用します。 利用可能な場合は、いつでもネイティブの要素を使用します。
> **メモ:** 記事 (`article`) ロールを持つ `<div>` ではなく、`<article>` 要素を使用します。 利用可能な場合は、いつでもネイティブの要素を使用します。
`role="article"` を使用する代わりに、{{htmlelement("article")}} 要素を使用することができます。

Expand Down Expand Up @@ -63,7 +63,7 @@ slug: Web/Accessibility/ARIA/Roles/Article_Role
- 属性値の変更
- : フィードを作成するときは、各記事 (`article`) ロールの `aria-posinset` 属性と `aria-setsize` 属性を適切な値に設定します。 `aria-posinset` は、1 ベースであることに注意してください。

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

Expand Down
4 changes: 2 additions & 2 deletions files/ja/web/accessibility/aria/roles/button_role/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ slug: Web/Accessibility/ARIA/Roles/button_role
<button id="saveChanges">Save</button>
```

> **Note:** 意味論的な `<button>``<input type="button">` 要素の代わりに role="button" を使用する場合は、要素をフォーカス可能にし、ユーザーの入力を処理するためにクリック ({{event("click")}}) イベントと <kbd>Enter</kbd> キーと <kbd>Space</kbd> キーを含むキーダウン ({{event("keydown")}}) イベントのイベントハンドラーを定義する必要があります。 [公式の WAI-ARIA サンプルコード](https://www.w3.org/TR/wai-aria-practices/examples/button/button.html)を参照してください。
> **メモ:** 意味論的な `<button>``<input type="button">` 要素の代わりに role="button" を使用する場合は、要素をフォーカス可能にし、ユーザーの入力を処理するためにクリック ({{event("click")}}) イベントと <kbd>Enter</kbd> キーと <kbd>Space</kbd> キーを含むキーダウン ({{event("keydown")}}) イベントのイベントハンドラーを定義する必要があります。 [公式の WAI-ARIA サンプルコード](https://www.w3.org/TR/wai-aria-practices/examples/button/button.html)を参照してください。
## 説明

Expand Down Expand Up @@ -221,7 +221,7 @@ function toggleButton(element) {

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

> **Warning:** ボタンロールでリンクをマークアップするときは注意してください。 ボタンは <kbd>Space</kbd> キーや <kbd>Enter</kbd> キーを使用してトリガーされることが期待されますが、リンクは <kbd>Enter</kbd> キーを使用してトリガーされることが期待されます。 つまり、リンクがボタンのように振る舞うために使用される場合、`role="button"` を追加するだけでは不十分です。 ネイティブなボタンとの一貫性を保つために、<kbd>Space</kbd> キーをリッスンするキーイベントハンドラーを追加する必要もあります。
> **警告:** ボタンロールでリンクをマークアップするときは注意してください。 ボタンは <kbd>Space</kbd> キーや <kbd>Enter</kbd> キーを使用してトリガーされることが期待されますが、リンクは <kbd>Enter</kbd> キーを使用してトリガーされることが期待されます。 つまり、リンクがボタンのように振る舞うために使用される場合、`role="button"` を追加するだけでは不十分です。 ネイティブなボタンとの一貫性を保つために、<kbd>Space</kbd> キーをリッスンするキーイベントハンドラーを追加する必要もあります。
ボタン (`button`) ロールを使用すると、スクリーンリーダーは要素をボタンとしてアナウンスします。 通常、「クリック」の後にボタンのアクセス可能な名前が続きます。 アクセス可能な名前は、要素のコンテンツ、または `aria-label` の値、または `aria-labelledby` 属性によって参照される要素、または含まれている場合は説明のいずれかです。

Expand Down
2 changes: 1 addition & 1 deletion files/ja/web/accessibility/aria/roles/cell_role/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ l10n:

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

> **Note:** 可能であれば、ネイティブな HTML 表要素 ({{HTMLElement('table')}} を、表の行要素 ({{HTMLElement('tr')}} および表のセル要素 ({{HTMLElement('td')}} と共に使用することを強く推奨します。
> **メモ:** 可能であれば、ネイティブな HTML 表要素 ({{HTMLElement('table')}} を、表の行要素 ({{HTMLElement('tr')}} および表のセル要素 ({{HTMLElement('td')}} と共に使用することを強く推奨します。
### 関連する WAI-ARIA のロール、ステート、プロパティ

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ function changeCheckbox(event) {

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

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

Expand Down
Loading

0 comments on commit 1028ec2

Please sign in to comment.