Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

表記ゆれの修正 #22876

Merged
merged 1 commit into from
Aug 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ Windows 10 オペレーティングシステムでは、ユーザーはアニメ

外傷性脳損傷 (TBI) を負った人は、色に対して非常に敏感であることがあります。色に対して非常に大きな「認知エネルギーの投資」を要求されることがあり、他の日常課題のためのエネルギーがなくなります。コンテンツのグレースケール表示を説明しています。他にも障碍を持つユーザーを支援するかもしれません。グレースケールを使用することの好ましいことに関するユーザーによる興味深い議論は、ディスカッションスレッド「[アクセシビリティオプションの「グレースケール」設定とは](https://ask.metafilter.com/312049/What-is-the-grayscale-setting-for-in-accessibility-options)」で得ることができます。具体的な関心事は、光刺激性てんかんのあるユーザーで、「発作的」と感じたときに使用しています。

ほとんどのオペレーティングシステムには、ユーザーがワークステーション上で調整できる方法があります。下記のスクリーンショットでは、 Windows 10 のアクセシビリティ設定で色フィルタを設定する例を示しています。色フィルタボタンを「オン」に切り替えると、グレースケールが有効になります。
ほとんどのオペレーティングシステムには、ユーザーがワークステーション上で調整できる方法があります。下記のスクリーンショットでは、 Windows 10 のアクセシビリティ設定で色フィルターを設定する例を示しています。色フィルターボタンを「オン」に切り替えると、グレースケールが有効になります。

![グレイスケールの Windows 10 アクセシビリティ設定を表示](colorfiltersgrayscaleinwindows.png)

Expand Down
2 changes: 1 addition & 1 deletion files/ja/web/accessibility/aria/roles/feed_role/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ slug: Web/Accessibility/ARIA/Roles/feed_role

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

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

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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ slug: Web/Accessibility/ARIA/Roles/group_role

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

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

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

Expand Down
4 changes: 2 additions & 2 deletions files/ja/web/accessibility/aria/roles/table_role/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ ARIA の role 属性の table 値は、このロールを含む要素を、ネ
> [!WARNING]
> 表が選択状態を維持している場合、2 次元ナビゲーションを使用している場合、またはユーザーがセルの順序を並べ替えることができる場合は、代わりにグリッド([`grid`](/ja/docs/Web/Accessibility/ARIA/Roles/grid_role))またはツリーグリッド([`treegrid`](/ja/docs/Web))を使用します。

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

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

Expand All @@ -57,7 +57,7 @@ ARIA の表を作成するには、`role="table"` をコンテナ要素に追加
- [role="rowgroup"](/ja/docs/Web/Accessibility/ARIA/Roles/rowgroup_role)
- : 表のオプションの子である行グループは、{{htmlelement("thead")}}、{{htmlelement("tbody")}}、および {{htmlelement("tfoot")}} と同様に、行のグループをカプセル化します。
- [role="row"](/ja/docs/Web/Accessibility/ARIA/Roles/row_role)
- : 表内の行、およびオプションで行グループ(`rowgroup`)内の行、つまり 1 つ以上のセル(`cell`)、列ヘッダー(`columnheader`)、または行ヘッダー(`rowheader`)のコンテナです
- : 表内の行、およびオプションで行グループ(`rowgroup`)内の行、つまり 1 つ以上のセル(`cell`)、列ヘッダー(`columnheader`)、または行ヘッダー(`rowheader`)のコンテナーです
- aria-describedby 属性
- : 値として、表のキャプションとして機能する要素の `id` を取ります。
- aria-label 属性
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -133,9 +133,9 @@ l10n:

### テクニック 2: `aria-activedescendant`

このテクニックでは、単一のイベントハンドラーをコンテナウィジェットにバインドし、`aria-activedescendant` を使用して「仮想」フォーカスを追跡します。 (ARIA に関する詳細は、[アクセス可能なウェブアプリケーションとウィジェットの概要](/ja/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets)を参照してください。)
このテクニックでは、単一のイベントハンドラーをコンテナーウィジェットにバインドし、`aria-activedescendant` を使用して「仮想」フォーカスを追跡します。 (ARIA に関する詳細は、[アクセス可能なウェブアプリケーションとウィジェットの概要](/ja/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets)を参照してください。)

`aria-activedescendant` プロパティは、現在仮想フォーカスを持っている子孫要素の ID を識別します。 コンテナのイベントハンドラーは、`aria-activedescendant` の値を更新し、(例えば、境界線や背景色で)現在の項目が適切にスタイル設定されていることを確実にすることで、キーイベントおよびマウスイベントに応答する必要があります。
`aria-activedescendant` プロパティは、現在仮想フォーカスを持っている子孫要素の ID を識別します。 コンテナーのイベントハンドラーは、`aria-activedescendant` の値を更新し、(例えば、境界線や背景色で)現在の項目が適切にスタイル設定されていることを確実にすることで、キーイベントおよびマウスイベントに応答する必要があります。

### 一般的なガイドライン

Expand Down