From 4ec7f15b115b13af9952260b8d9a4c4218fb8c0d Mon Sep 17 00:00:00 2001 From: Wind1808 <42607060+Wind1808@users.noreply.github.com> Date: Thu, 10 Jun 2021 00:11:23 +0900 Subject: Web/Accessibility/ARIA/Roles/Grid_Role の更新 (#767) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ARIA: grid ロールの更新 * ARIA: grid ロールの更新 * ARIA: grid ロールの更新 --- .../accessibility/aria/roles/grid_role/index.html | 87 ++++++++++------------ 1 file changed, 41 insertions(+), 46 deletions(-) (limited to 'files/ja/web/accessibility/aria') diff --git a/files/ja/web/accessibility/aria/roles/grid_role/index.html b/files/ja/web/accessibility/aria/roles/grid_role/index.html index 666819b2b4..e6a0dd7786 100644 --- a/files/ja/web/accessibility/aria/roles/grid_role/index.html +++ b/files/ja/web/accessibility/aria/roles/grid_role/index.html @@ -7,12 +7,10 @@ tags: - Accessibility translation_of: Web/Accessibility/ARIA/Roles/Grid_Role --- -

\{{ariaref}}

+

グリッド (grid) ロールは、1つ以上のセルの行を含むウィジェット用です。 各セルの位置は重要であり、キーボード入力を使用してフォーカスすることができます。

-

grid ロールは、1つ以上のセルの行を含むウィジェット用です。 各セルの位置は重要であり、キーボード入力を使用してフォーカスすることができます。

- -
<table role="grid" aria-labelledby="select-your-seat">
-  <caption>座席を選んでください</caption>
+
<table role="grid" aria-labelledby="id-select-your-seat">
+  <caption id="id-select-your-seat">座席を選んでください</caption>
   <tbody role="presentation">
     <tr role="presentation">
       <td></td>
@@ -20,36 +18,34 @@ translation_of: Web/Accessibility/ARIA/Roles/Grid_Role
       <th>列 B</th>
     </tr>
     <tr>
-      <th scope="row">島 1</th>
+      <th scope="row">通路 1</th>
       <td tabindex="0">
         <button id="1a" tabindex="-1">1A</button>
       </td>
       <td tabindex="-1">
         <button id="1b" tabindex="-1">1B</button>
       </td>
-      <!-- More Columns -->
+      <!-- その他の列 -->
     </tr>
     <tr>
-      <th scope="row">島 2</th>
+      <th scope="row">通路 2</th>
       <td tabindex="-1">
         <button id="2a" tabindex="-1">2A</button>
       </td>
       <td tabindex="-1">
         <button id="2b" tabindex="-1">2B</button>
       </td>
-      <!-- More Columns -->
+      <!-- その他の列 -->
     </tr>
   </tbody>
 </table>
 

 
-
（オプション）上記の例の簡単な説明を含めます。

-
 
説明

 
-
グリッドウィジェットには、テーマに関連するインタラクティブなコンテンツの1つ以上のセルを持つ1つ以上の行が含まれています。 それは特定の視覚的プレゼンテーションを意味するわけではありませんが、要素間の関係を意味します。 これは、チェックボックスやナビゲーションリンクなどのような単純なグループ化に使用します。 複雑なスプレッドシートアプリケーションにも使用できます。

+
グリッドウィジェットは、テーマに沿ったインタラクティブなコンテンツの1つ以上のセルを持つ1つ以上の行を含みます。 それは特定の視覚的表現を暗示するものではありませんが、要素間の関連性を暗示します。 用途は、表形式の情報の表示 (データグリッド) と他のウィジェットのグループ化 (レイアウトグリッド) の2つのカテゴリーに分類されます。 データグリッドとレイアウトグリッドの両方が同じ ARIA のロール、ステート、およびプロパティを採用している場合でも、そのコンテンツと目的の違いは、キーボードインタラクションのデザインにおいて考慮すべき重要な要因を表面化させます。 詳細については、WAI-ARIA Authoring Practices を参照してください。

 
-
セル要素には、行ヘッダーや列ヘッダーでない限り、gridcell ロールがあります。 ヘッダー要素ではそれぞれ rowheader ロールと columnheader ロールです。 セル要素は、row ロールを持つ要素によって所有される必要があります。 行は rowgroup を使用してグループ化できます。

+
セル要素には、行ヘッダーや列ヘッダーでない限り、グリッドセル (gridcell) ロールがあります。 ヘッダー要素には、それぞれ行ヘッダー (rowheader) ロールと列ヘッダー (columnheader) ロールがあります。 セル要素は、行 (row) ロールを持つ要素によって所有される必要があります。 行は行グループ (rowgroup) を使用してグループ化できます。

 
 
グリッドをインタラクティブなウィジェットとして使用する場合は、{{anch("Keyboard interactions","キーボードインタラクション")}}を実装する必要があります。

 
@@ -57,42 +53,41 @@ translation_of: Web/Accessibility/ARIA/Roles/Grid_Role
 
 
関連する ARIA のロール、ステート、プロパティ

 
+
ロール

+
 

- 

- 
ロール

- 

- 
treegrid（サブクラス）

- 
展開や折りたたみができる列を持つグリッドには、ツリーグリッドを使用できます。

+ 
treegrid (サブクラス)

+ 
グリッドに展開や折りたたみができる列がある場合は、ツリーグリッドを使用できます。

  
row

  
グリッド内の行。

  
rowgroup

- 
1つ以上の row を含むグループ。

+ 
1つ以上の行 (row) を含むグループ。

 

 
 
ステートとプロパティ

 
 

- 
aria-level

- 
他の構造内のグリッドの階層レベルを示します。

- 
aria-multiselectable

+ 
aria-level

+ 
他の構造内でのグリッドの階層レベルを示します。 (訳注: この属性は、グリッドロールでは、ARIA 1.2 で、サポートされなくなる予定です。 行ロールでは、引き続きサポートされています。)

+ 
aria-multiselectable

  
aria-multiselectable が true に設定されている場合、グリッド内の複数の項目を選択できます。 デフォルト値は false です。

- 
aria-readonly

+ 
aria-readonly

  
ユーザーがグリッドをナビゲートできるが、グリッドの値を変更できない場合は、aria-readonly を true に設定するべきです。 デフォルト値は false です。

 

 
 

-
多くのユースケースでは、HTML の table 要素で十分であり、その要素にはすでに多くの ARIA ロールが含まれています。

+
多くのユースケースでは、HTML の表 (table) 要素で十分であり、その要素にはすでに多くの ARIA ロールが含まれています。

 

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

 
-
キーボードユーザーはグリッドに出会うと、左、右、上、下のキーを使用して行と列をナビゲートします。 インタラクティブなコンポーネントをアクティブにするには、リターンキーとスペースキーを使用します。

+
キーボードユーザーはグリッドに出会うと、左、右、上、下のキーを使用して行と列をナビゲートします。 インタラクティブなコンポーネントをアクティブ化するには、リターンキーとスペースキーを使用します。

 
 
-   
+   
@@ -145,7 +140,7 @@ translation_of: Web/Accessibility/ARIA/Roles/Grid_Role
  
-   
+   
@@ -198,7 +193,7 @@ translation_of: Web/Accessibility/ARIA/Roles/Grid_Role
       <th role="columnheader" aria-label="Wednesday">W</th>
       <th role="columnheader" aria-label="Thursday">T</th>
       <th role="columnheader" aria-label="Friday">F</th>
-      <th role="columnheader" aria-label="Saturday">T</th>
+      <th role="columnheader" aria-label="Saturday">S</th>
     </tr>
   </thead>
   <tbody role="rowgroup">
@@ -467,11 +462,9 @@ document.querySelector('table').addEventListener("keydown", function(event) {
 
 
{{EmbedLiveSample("Calendar_example", "100%", "300")}}

 
-
 

-
 
HTML

 
-
<table role="grid" aria-labelledby="calendarheader">
+
<table role="grid" aria-labelledby="calendarheader">
   <caption id="calendarheader">September 2018</caption>
   <thead role="rowgroup">
     <tr role="row">
@@ -482,7 +475,7 @@ document.querySelector('table').addEventListener("keydown", function(event) {
       <th role="columnheader" aria-label="Wednesday">W</th>
       <th role="columnheader" aria-label="Thursday">T</th>
       <th role="columnheader" aria-label="Friday">F</th>
-      <th role="columnheader" aria-label="Saturday">T</th>
+      <th role="columnheader" aria-label="Saturday">S</th>
     </tr>
   </thead>
   <tbody role="rowgroup">
@@ -553,7 +546,7 @@ tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus {
 
 
JavaScript

 
-
var selectables = document.querySelectorAll('table td[role="gridcell"]');
+
var selectables = document.querySelectorAll('table td[role="gridcell"]');
 
 selectables[0].setAttribute('tabindex', 0);
 
@@ -658,21 +651,17 @@ document.querySelector('table').addEventListener("keydown", function(event) {
   event.preventDefault();
 });

 
-
 

-
 
より多くの例

 
-
他の例を以下で見つけることができます。

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

 
-
{{anch("Keyboard interactions","キーボードインタラクション")}}が適切に実装されていても、矢印キーを使用する必要があることに気づかないユーザーもいます。 grid ロールを使用して、必要な機能とインタラクションが最善にアーカイブできることを確認してください。

+
{{anch("Keyboard interactions","キーボードインタラクション")}}が適切に実装されていても、矢印キーを使用しなければならないことに気づかないユーザーもいます。 グリッド (grid) ロールを使用して、必要な機能性とインタラクションが最もよく達成できることを確認してください。

 
 
仕様

 
@@ -701,15 +690,21 @@ document.querySelector('table').addEventListener("keydown", function(event) {
 
 
+
+
-- 
cgit v1.2.3-54-g00ecf



  
   

    キー動作アクション
   

  
  
   

    キーの組み合わせ動作アクション