From 59a784ac4c45767dc4c80863ce8b27ec7170003e Mon Sep 17 00:00:00 2001 From: p_craft Date: Thu, 10 Oct 2024 23:23:57 +0900 Subject: [PATCH 1/4] =?UTF-8?q?=E6=9C=80=E6=96=B0=E7=89=88=E3=81=AB?= =?UTF-8?q?=E8=BF=BD=E5=BE=93=20(Read=20Me=20First)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../practices/read-me-first/read-me-first-practice.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/content/practices/read-me-first/read-me-first-practice.html b/content/practices/read-me-first/read-me-first-practice.html index 716939ef..a2ae3f25 100644 --- a/content/practices/read-me-first/read-me-first-practice.html +++ b/content/practices/read-me-first/read-me-first-practice.html @@ -10,11 +10,12 @@ - +

Read Me First

+

No ARIA is better than Bad ARIA

@@ -58,8 +59,8 @@

Principle 2: ARIA Can Both Cloak and Enhance, Creating Both Power and Danger </table> <ul role="navigation"> <!-- This is a navigation region, not a list. --> - <li><a href="uri1">nav link 1</li> - <li><a href="uri2">nav link 2</li> + <li><a href="uri1">nav link 1</a></li> + <li><a href="uri2">nav link 2</a></li> <!-- ERROR! Previous list items are not in a list! --> </ul>

From e2af1cb244469ad5730f890f0b1b6cdb405709fe Mon Sep 17 00:00:00 2001 From: p_craft Date: Thu, 10 Oct 2024 23:32:36 +0900 Subject: [PATCH 2/4] =?UTF-8?q?LLM=E3=81=A7=E7=B2=97=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../read-me-first/read-me-first-practice.html | 89 +++++++++---------- 1 file changed, 44 insertions(+), 45 deletions(-) diff --git a/content/practices/read-me-first/read-me-first-practice.html b/content/practices/read-me-first/read-me-first-practice.html index a2ae3f25..01d53127 100644 --- a/content/practices/read-me-first/read-me-first-practice.html +++ b/content/practices/read-me-first/read-me-first-practice.html @@ -1,9 +1,9 @@ - + - Read Me First + 最初にお読みください @@ -14,80 +14,79 @@
-

Read Me First

+

最初にお読みください

No ARIA is better than Bad ARIA

- Functionally, ARIA roles, states, and properties are analogous to a CSS for assistive technologies. - For screen reader users, ARIA controls the rendering of their non-visual experience. - Incorrect ARIA misrepresents visual experiences, with potentially devastating effects on their corresponding non-visual experiences. + 機能的には、ARIA のロール、状態、およびプロパティは支援技術のための CSS に類似しています。 + スクリーンリーダー利用者にとって、ARIA は非視覚的な体験のレンダリングを制御します。 + 不正確な ARIA は視覚的な体験を誤って表現し、それに対応する非視覚的な体験に壊滅的な影響を与える可能性があります。

-

Before using ARIA or any of the guidance in this document, please take time to understand the following two essential principles.

-

Principle 1: A role is a promise

-

This code:

- 
<div role="button">Place Order</div>
+

ARIA またはこの文書のガイダンスを使用する前に、次の 2 つの重要な原則を理解するための時間を取ってください。

+

原則 1: ロールは約束です

+

このコード:

+ 
<div role="button">注文する</div>

- Is a promise that the author of that <div> has also incorporated JavaScript that provides the keyboard interactions expected for a button. - Unlike HTML input elements, ARIA roles do not cause browsers to provide keyboard behaviors or styling. + この <div> のコンテンツ制作者が、ボタンに期待されるキーボード操作を提供する JavaScript を組み込んでいるという約束です。 + HTML の input 要素とは異なり、ARIA のロールはブラウザがキーボードの動作やスタイリングを提供することを引き起こしません。

-

Using a role without fulfilling the promise of that role is similar to making a "Place Order" button that abandons an order and empties the shopping cart.

-

One of the objectives of this guide is to define expected behaviors for each ARIA role.

-

Principle 2: ARIA Can Both Cloak and Enhance, Creating Both Power and Danger

+

ロールの約束を果たさずにロールを使用することは、注文を放棄し、ショッピングカートを空にする「注文する」ボタンを作ることに似ています。

+

このガイドの目的の 1 つは、各 ARIA ロールの期待される動作を定義することです。

+

原則 2: ARIA は隠蔽と強化の両方を行い、力と危険の両方を生み出します

- The information assistive technologies need about the meaning and purpose of user interface elements is called accessibility semantics. - From the perspective of assistive technologies, ARIA gives authors the ability to dress up HTML and SVG elements with critical accessibility semantics that the assistive technologies would not otherwise be able to reliably derive. + ユーザーインターフェース要素の意味と目的に関する支援技術が必要とする情報はアクセシビリティセマンティクスと呼ばれます。 + 支援技術の観点から、ARIA は支援技術が信頼できる方法で解釈できない HTML および SVG 要素に重要なアクセシビリティセマンティクスを追加する能力をコンテンツ制作者に与えます。

-

Some of ARIA is like a cloak; it covers up, or overrides, the original semantics or content.

- 
<a role="menuitem">Assistive tech users perceive this element as an item in a menu, not a link.</a>
-  <a aria-label="Assistive tech users can only perceive the contents of this aria-label, not the link text">Link Text</a>
-

On the other hand, some uses of ARIA are more like suspenders or belts; they add meaning that provides essential support to the original content.

- 
<button aria-pressed="false">Mute</button>
+

ARIA の一部は隠蔽のようなもので、元のセマンティクスやコンテンツを覆い隠します。

+ 
<a role="menuitem">支援技術の利用者はこの要素をリンクではなくメニューの項目として認識します。</a>
+  <a aria-label="支援技術の利用者はリンクテキストではなくこの aria-label の内容のみを認識します">リンクテキスト</a>
+

一方、ARIA の一部の使用はサスペンダーやベルトのようなもので、元のコンテンツに重要なサポートを提供する意味を追加します。

+ 
<button aria-pressed="false">ミュート</button>

- This is the power of ARIA. - It enables authors to describe nearly any user interface component in ways that assistive technologies can reliably interpret, thus making components accessible to assistive technology users. + これが ARIA の力です。 + それは、コンテンツ制作者がほぼすべてのユーザーインターフェースコンポーネントを支援技術が信頼できる方法で解釈できるように記述することを可能にし、したがって支援技術利用者にコンポーネントをアクセス可能にします。

- This is also the danger of ARIA. - Authors can inadvertently override accessibility semantics. + これが ARIA の危険でもあります。 + コンテンツ制作者は誤ってアクセシビリティセマンティクスを上書きする可能性があります。 

<table role="log">
   <!--
-    Table that assistive technology users will not perceive as a table.
-    The log role tells browser this is a log, not a table.
+    支援技術の利用者がテーブルとして認識しないテーブル。
+    log ロールはブラウザにこれはテーブルではなくログであることを伝えます。
   -->
 </table>
 <ul role="navigation">
-  <!-- This is a navigation region, not a list. -->
-  <li><a href="uri1">nav link 1</a></li>
-  <li><a href="uri2">nav link 2</a></li>
-  <!-- ERROR! Previous list items are not in a list! -->
+  <!-- これはリストではなくナビゲーション領域です。 -->
+  <li><a href="uri1">ナビリンク 1</a></li>
+  <li><a href="uri2">ナビリンク 2</a></li>
+  <!-- エラー！前のリスト項目はリストに含まれていません！ -->
 </ul>
-

Browser and Assistive Technology Support

+

ブラウザ及び支援技術のサポート

- Testing assistive technology interoperability is essential before using code from this guide in production. - Because the purpose of this guide is to illustrate appropriate use of ARIA 1.2 as defined in the ARIA specification, the design patterns, reference examples, and sample code intentionally do not describe and implement coding techniques for working around problems caused by gaps in support for ARIA 1.2 in browsers and assistive technologies. - It is thus advisable to test implementations thoroughly with each browser and assistive technology combination that is relevant within a target audience. + このガイドのコードを本番環境で使用する前に、支援技術の相互運用性をテストすることが不可欠です。 + このガイドの目的は、ARIA 1.2 の適切な使用方法を ARIA 仕様で定義された通りに示すことです。そのため、デザインパターン、参考例、およびサンプルコードは、ブラウザおよび支援技術における ARIA 1.2 のサポートのギャップによって引き起こされる問題を回避するためのコーディングテクニックを意図的に説明および実装していません。 + したがって、ターゲットオーディエンス内の各ブラウザおよび支援技術の組み合わせで実装を徹底的にテストすることをお勧めします。

- Similarly, JavaScript and CSS in this guide is written to be compatible with the most recent version of Chrome, Firefox, and Safari at the time of writing. + 同様に、このガイドの JavaScript および CSS は、執筆時点での最新の Chrome、Firefox、および Safari のバージョンと互換性があるように書かれています。

- Except in cases where the ARIA Working Group and other contributors have overlooked an error, - examples in this guide that do not function well in a particular browser or with a specific assistive technology are demonstrating browser or assistive technology bugs. - Browser and assistive technology developers can thus utilize code in this guide to help assess the quality of their support for ARIA 1.2. + ARIA ワーキンググループおよび他の貢献者がエラーを見落とした場合を除き、このガイドの例が特定のブラウザまたは特定の支援技術でうまく機能しない場合、それはブラウザまたは支援技術のバグを示しています。 + ブラウザおよび支援技術の開発者は、このガイドのコードを利用して、ARIA 1.2 のサポートの品質を評価するのに役立てることができます。

-

Mobile and Touch Support

+

モバイルおよびタッチサポート

- Currently, this guide does not indicate which examples are compatible with mobile browsers or touch interfaces. - While some of the examples include specific features that enhance mobile and touch support, some ARIA features are not supported in any mobile browser. - In addition, there is not yet a standardized approach for providing touch interactions that work across mobile browsers. + 現在、このガイドはモバイルブラウザまたはタッチインターフェースと互換性のある例を示していません。 + 一部の例にはモバイルおよびタッチサポートを強化する特定の機能が含まれていますが、一部の ARIA 機能はどのモバイルブラウザでもサポートされていません。 + さらに、モバイルブラウザ全体で機能するタッチインタラクションを提供するための標準化されたアプローチはまだありません。

-

More guidance about touch and mobile support is planned for future releases of the guide.

+

タッチおよびモバイルサポートに関するさらなるガイダンスは、ガイドの将来のリリースで計画されています。

From e9514dfa25f71153cba7680775f18c926977a3e8 Mon Sep 17 00:00:00 2001 From: p_craft Date: Thu, 10 Oct 2024 23:37:31 +0900 Subject: [PATCH 3/4] =?UTF-8?q?=E7=94=A8=E8=AA=9E=E3=83=BB=E3=82=AC?= =?UTF-8?q?=E3=82=A4=E3=83=89=E3=83=A9=E3=82=A4=E3=83=B3=E3=81=AB=E5=BE=93?= =?UTF-8?q?=E3=81=A3=E3=81=9F=E8=A1=A8=E8=A8=98=E3=81=AE=E7=B5=B1=E4=B8=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../read-me-first/read-me-first-practice.html | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/content/practices/read-me-first/read-me-first-practice.html b/content/practices/read-me-first/read-me-first-practice.html index 01d53127..1b3c3572 100644 --- a/content/practices/read-me-first/read-me-first-practice.html +++ b/content/practices/read-me-first/read-me-first-practice.html @@ -19,11 +19,11 @@

最初にお読みください

No ARIA is better than Bad ARIA

- 機能的には、ARIA のロール、状態、およびプロパティは支援技術のための CSS に類似しています。 + 機能的には、ARIA のロール、状態、及びプロパティは支援技術のための CSS に類似しています。 スクリーンリーダー利用者にとって、ARIA は非視覚的な体験のレンダリングを制御します。 不正確な ARIA は視覚的な体験を誤って表現し、それに対応する非視覚的な体験に壊滅的な影響を与える可能性があります。

-

ARIA またはこの文書のガイダンスを使用する前に、次の 2 つの重要な原則を理解するための時間を取ってください。

+

ARIA 又はこの文書のガイダンスを使用する前に、次の 2 つの重要な原則を理解するための時間を取ってください。

原則 1: ロールは約束です

このコード:

<div role="button">注文する</div>
@@ -35,8 +35,8 @@

原則 1: ロールは約束です

このガイドの目的の 1 つは、各 ARIA ロールの期待される動作を定義することです。

原則 2: ARIA は隠蔽と強化の両方を行い、力と危険の両方を生み出します

- ユーザーインターフェース要素の意味と目的に関する支援技術が必要とする情報はアクセシビリティセマンティクスと呼ばれます。 - 支援技術の観点から、ARIA は支援技術が信頼できる方法で解釈できない HTML および SVG 要素に重要なアクセシビリティセマンティクスを追加する能力をコンテンツ制作者に与えます。 + ユーザインタフェース要素の意味と目的に関する支援技術が必要とする情報はアクセシビリティセマンティクスと呼ばれます。 + 支援技術の観点から、ARIA は支援技術が信頼できる方法で解釈できない HTML 及び SVG 要素に重要なアクセシビリティセマンティクスを追加する能力をコンテンツ制作者に与えます。

ARIA の一部は隠蔽のようなもので、元のセマンティクスやコンテンツを覆い隠します。

<a role="menuitem">支援技術の利用者はこの要素をリンクではなくメニューの項目として認識します。</a>
@@ -45,7 +45,7 @@ 
原則 2: ARIA は隠蔽と強化の両方を行い、力と危険の両方
         
<button aria-pressed="false">ミュート</button>

         

           これが ARIA の力です。
-          それは、コンテンツ制作者がほぼすべてのユーザーインターフェースコンポーネントを支援技術が信頼できる方法で解釈できるように記述することを可能にし、したがって支援技術利用者にコンポーネントをアクセス可能にします。
+          それは、コンテンツ制作者がほぼすべてのユーザインタフェースコンポーネントを支援技術が信頼できる方法で解釈できるように記述することを可能にし、したがって支援技術利用者にコンポーネントをアクセス可能にします。
         

         

           これが ARIA の危険でもあります。
@@ -68,25 +68,25 @@ 
原則 2: ARIA は隠蔽と強化の両方を行い、力と危険の両方
         
ブラウザ及び支援技術のサポート

         

           このガイドのコードを本番環境で使用する前に、支援技術の相互運用性をテストすることが不可欠です。
-          このガイドの目的は、ARIA 1.2 の適切な使用方法を ARIA 仕様で定義された通りに示すことです。そのため、デザインパターン、参考例、およびサンプルコードは、ブラウザおよび支援技術における ARIA 1.2 のサポートのギャップによって引き起こされる問題を回避するためのコーディングテクニックを意図的に説明および実装していません。
-          したがって、ターゲットオーディエンス内の各ブラウザおよび支援技術の組み合わせで実装を徹底的にテストすることをお勧めします。
+          このガイドの目的は、ARIA 1.2 の適切な使用方法を ARIA 仕様で定義されたとおりに示すことです。そのため、デザインパターン、参考例、及びサンプルコードは、ブラウザ及び支援技術における ARIA 1.2 のサポートのギャップによって引き起こされる問題を回避するためのコーディングテクニックを意図的に説明及び実装していません。
+          したがって、ターゲットオーディエンス内の各ブラウザ及び支援技術の組み合わせで実装を徹底的にテストすることをお勧めします。
         

         

-          同様に、このガイドの JavaScript および CSS は、執筆時点での最新の Chrome、Firefox、および Safari のバージョンと互換性があるように書かれています。
+          同様に、このガイドの JavaScript 及び CSS は、執筆時点での最新の Chrome、Firefox、及び Safari のバージョンと互換性があるように書かれています。
         

         

-          ARIA ワーキンググループおよび他の貢献者がエラーを見落とした場合を除き、このガイドの例が特定のブラウザまたは特定の支援技術でうまく機能しない場合、それはブラウザまたは支援技術のバグを示しています。
-          ブラウザおよび支援技術の開発者は、このガイドのコードを利用して、ARIA 1.2 のサポートの品質を評価するのに役立てることができます。
+          ARIA ワーキンググループ及び他の貢献者がエラーを見落とした場合を除き、このガイドの例が特定のブラウザ又は特定の支援技術でうまく機能しない場合、それはブラウザ又は支援技術のバグを示しています。
+          ブラウザ及び支援技術の開発者は、このガイドのコードを利用して、ARIA 1.2 のサポートの品質を評価するのに役立てることができます。
-

モバイルおよびタッチサポート

+

モバイル及びタッチサポート

- 現在、このガイドはモバイルブラウザまたはタッチインターフェースと互換性のある例を示していません。 - 一部の例にはモバイルおよびタッチサポートを強化する特定の機能が含まれていますが、一部の ARIA 機能はどのモバイルブラウザでもサポートされていません。 - さらに、モバイルブラウザ全体で機能するタッチインタラクションを提供するための標準化されたアプローチはまだありません。 + 現在、このガイドはモバイルブラウザ又はタッチインターフェースと互換性のある例を示していません。 + 一部の例にはモバイル及びタッチサポートを強化する特定の機能が含まれていますが、一部の ARIA 機能はどのモバイルブラウザでもサポートされていません。 + 更に、モバイルブラウザ全体で機能するタッチインタラクションを提供するための標準化されたアプローチはまだありません。

-

タッチおよびモバイルサポートに関するさらなるガイダンスは、ガイドの将来のリリースで計画されています。

+

タッチ及びモバイルサポートに関するさらなるガイダンスは、ガイドの将来のリリースで計画されています。

From 3b8a4b41fc37a056408b68155437946ad41af5ca Mon Sep 17 00:00:00 2001 From: p_craft Date: Fri, 11 Oct 2024 00:18:21 +0900 Subject: [PATCH 4/4] =?UTF-8?q?=E7=BF=BB=E8=A8=B3=E3=82=92=E8=AA=BF?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../read-me-first/read-me-first-practice.html | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/content/practices/read-me-first/read-me-first-practice.html b/content/practices/read-me-first/read-me-first-practice.html index 1b3c3572..e3b59190 100644 --- a/content/practices/read-me-first/read-me-first-practice.html +++ b/content/practices/read-me-first/read-me-first-practice.html @@ -19,26 +19,26 @@

最初にお読みください

No ARIA is better than Bad ARIA

- 機能的には、ARIA のロール、状態、及びプロパティは支援技術のための CSS に類似しています。 - スクリーンリーダー利用者にとって、ARIA は非視覚的な体験のレンダリングを制御します。 - 不正確な ARIA は視覚的な体験を誤って表現し、それに対応する非視覚的な体験に壊滅的な影響を与える可能性があります。 + 機能的には、ARIA のロール、状態、及び属性は支援技術のための CSS に類似しています。 + スクリーンリーダー利用者にとって、ARIA は非視覚的体験のレンダリングを制御します。 + 不正確な ARIA は視覚的体験を誤って表現し、それに対応する非視覚的体験に壊滅的な影響を与える可能性があります。

ARIA 又はこの文書のガイダンスを使用する前に、次の 2 つの重要な原則を理解するための時間を取ってください。

-

原則 1: ロールは約束です

+

原則 1: ロールは約束

このコード:

<div role="button">注文する</div>

- この <div> のコンテンツ制作者が、ボタンに期待されるキーボード操作を提供する JavaScript を組み込んでいるという約束です。 + は、この <div> のコンテンツ制作者が、ボタンに期待されるキーボード操作を提供する JavaScript を組み込んでいるという約束です。 HTML の input 要素とは異なり、ARIA のロールはブラウザがキーボードの動作やスタイリングを提供することを引き起こしません。

ロールの約束を果たさずにロールを使用することは、注文を放棄し、ショッピングカートを空にする「注文する」ボタンを作ることに似ています。

このガイドの目的の 1 つは、各 ARIA ロールの期待される動作を定義することです。

-

原則 2: ARIA は隠蔽と強化の両方を行い、力と危険の両方を生み出します

+

原則 2: ARIA は隠蔽と強化の両方を行い、力と危険の両方を生み出す

ユーザインタフェース要素の意味と目的に関する支援技術が必要とする情報はアクセシビリティセマンティクスと呼ばれます。 - 支援技術の観点から、ARIA は支援技術が信頼できる方法で解釈できない HTML 及び SVG 要素に重要なアクセシビリティセマンティクスを追加する能力をコンテンツ制作者に与えます。 + 支援技術の観点から、ARIA はそうしなければ支援技術が確実に導き出すことができないような重要なアクセシビリティセマンティクスを HTML 及び SVG 要素に追加する能力をコンテンツ制作者に与えます。

-

ARIA の一部は隠蔽のようなもので、元のセマンティクスやコンテンツを覆い隠します。

+

ARIA の一部は外套のようなもので、元のセマンティクスやコンテンツを覆い隠します。

<a role="menuitem">支援技術の利用者はこの要素をリンクではなくメニューの項目として認識します。</a>
   <a aria-label="支援技術の利用者はリンクテキストではなくこの aria-label の内容のみを認識します">リンクテキスト</a>

一方、ARIA の一部の使用はサスペンダーやベルトのようなもので、元のコンテンツに重要なサポートを提供する意味を追加します。

@@ -68,15 +68,15 @@

原則 2: ARIA は隠蔽と強化の両方を行い、力と危険の両方

ブラウザ及び支援技術のサポート

このガイドのコードを本番環境で使用する前に、支援技術の相互運用性をテストすることが不可欠です。 - このガイドの目的は、ARIA 1.2 の適切な使用方法を ARIA 仕様で定義されたとおりに示すことです。そのため、デザインパターン、参考例、及びサンプルコードは、ブラウザ及び支援技術における ARIA 1.2 のサポートのギャップによって引き起こされる問題を回避するためのコーディングテクニックを意図的に説明及び実装していません。 - したがって、ターゲットオーディエンス内の各ブラウザ及び支援技術の組み合わせで実装を徹底的にテストすることをお勧めします。 + このガイドの目的は、ARIA 1.2 の適切な使用方法を ARIA 仕様で定義されたとおりに示すことであるため、デザインパターン、参考例、及びサンプルコードは、ブラウザ及び支援技術における ARIA 1.2 のサポートのギャップによって引き起こされる問題を回避するためのコーディングテクニックを意図的に説明及び実装していません。 + したがって、対象顧客層に関係する各ブラウザ及び支援技術の組み合わせで実装を徹底的にテストすることをお勧めします。

同様に、このガイドの JavaScript 及び CSS は、執筆時点での最新の Chrome、Firefox、及び Safari のバージョンと互換性があるように書かれています。

ARIA ワーキンググループ及び他の貢献者がエラーを見落とした場合を除き、このガイドの例が特定のブラウザ又は特定の支援技術でうまく機能しない場合、それはブラウザ又は支援技術のバグを示しています。 - ブラウザ及び支援技術の開発者は、このガイドのコードを利用して、ARIA 1.2 のサポートの品質を評価するのに役立てることができます。 + ブラウザ及び支援技術の開発者はARIA 1.2 のサポートの品質を評価するためにこのガイドのコードを利用できます。