ARIA の role 属性の cell 値は、要素を列ヘッダーや行ヘッダーの情報を含まない表形式コンテナ内のセルとして識別します。 サポートされるには、セルが row ロールを持つ要素内にネストされている必要があります。
ARIA の role 属性の cell 値は、要素を列ヘッダーや行ヘッダーの情報を含まない表形式コンテナー内のセルとして識別します。 サポートされるには、セルが行 (row) ロールを持つ要素内にネストされている必要があります。
<div role="row"> <span role="cell">フランス</span> @@ -17,7 +15,7 @@ translation_of: Web/Accessibility/ARIA/Roles/Cell_Role </div>-
上のセルの書き方より良い、より意味のある方法は、意味論的な <td> 要素を使うことでしょう。
上のセルの書き方のより良い、より意味論的な方法は、意味論的な <td> 要素を使うことです。
<tr role="row"> <td role="cell">フランス</td> @@ -27,14 +25,14 @@ translation_of: Web/Accessibility/ARIA/Roles/Cell_Role説明
-+
role="cell"を持つ要素は、grid、table、treegrid内の、row内のセル（オプションでrowgroup内のセル）であり、静的な表形式の構造内にあります。 可能であれば、ネイティブな HTML<td>要素を使用することを強く推奨します。-
role="cell"を持つ要素は、静的な表形式構造内のグリッド (grid)、表 (table)、またはツリーグリッド (treegrid) 内の、任意で行グループ (rowgroup) 内の、行内のセルです。 可能であれば、ネイティブな HTML<td>要素を使用することを強く推奨します。+
role="row"を持つコンテナ要素内に、role="cell"を持つ各要素をネストしなければなりません（MUST）。 この行（row）は、role="rowgroup"を持つ要素内にネストすることができ、grid、table、treegrid内にネストするべきです。 セルに列ヘッダーまたは行ヘッダーの情報が含まれている場合は、それぞれcolheaderロールやrowheaderロールを使用します。 セルにヘッダー情報が含まれておらず、gridやtreegridにネストされている場合、gridcellロールがより適切な場合があります。
role="row"を持つコンテナー要素内に、role="cell"を持つ各要素をネストしなければなりません (MUST)。 この行は、role="rowgroup"を持つ要素内にネストすることができ、グリッド (grid)、表 (table)、ツリーグリッド (treegrid) 内にネストするべきです。 セルに列ヘッダーまたは行ヘッダーの情報が含まれている場合は、それぞれ列ヘッダー (columnheader) ロールや行ヘッダー (rowheader) ロールを使用します。 セルにヘッダー情報が含まれておらず、グリッド (grid) やツリーグリッド (treegrid) にネストされている場合、グリッドセル (gridcell) ロールがより適切な場合があります。セルには、
aria-colindex、aria-colspan、aria-rowindex、aria-rowspanなど、表形式データ構造内のセルの位置を明確にする多数のプロパティ属性を含めることができます。-可能であれば、ネイティブな HTML 表要素（
+<table>）を、表の行要素（<tr>）および表のセル要素（<td>）と共に使用することを強く推奨します。可能であれば、ネイティブな HTML 表要素 (
<table>) を、表の行要素 (<tr>) および表のセル要素 (<td>) と共に使用することを強く推奨します。関連する WAI-ARIA のロール、ステート、プロパティ
@@ -43,44 +41,43 @@ translation_of: Web/Accessibility/ARIA/Roles/Cell_Role
role="row" の要素は、表形式の構造内のセルの行です。 行には、grid、table、treegrid 内において1つ以上のセル、グリッドセル、列ヘッダー、行ヘッダーが含まれます。 オプションで rowgroup 内にも含まれます。role="row" の要素は、表形式構造内のセルの行です。 行には、グリッド (grid)、表 (table)、ツリーグリッド (treegrid) 内において、そして任意で行グループ (rowgroup) 内において、1つ以上のセル、グリッドセル、列ヘッダー、行ヘッダーが含まれます。rowgroup）は、オプションのコンテキスト上の行の親で、子孫となる行との間に関係を確立します。 これは、HTML 表要素の thead、tfoot、tbody 要素と構造的に同等です。rowgroup) は、任意のコンテキスト上の行の親で、子孫となる行との間に関係を確立します。 これは、HTML 表 (table) 要素の thead、tfoot、tbody 要素と構造的に同等です。grid と treegrid と共に3つの可能なコンテキストのうちの1つで、セルを含む行が見つかります。 表（table）は、セルを、ネイティブな <table> HTML 要素と同様に、行と列に配置されたデータを含む非対話型の表構造の一部として識別します。grid) とツリーグリッド (treegrid) と共に3つの可能なコンテキストのうちの1つ。 表 (table) は、セルを、ネイティブな HTML <table> 要素と同様に、行と列に配置されたデータを含むインタラクティブでない表構造の一部として識別します。table と treegrid と共に3つの可能なコンテキストのうちの1つで、セルとグリッドセル（gridcell）を含む行が見つかります。 グリッド（grid）は、セルを、ネイティブな <table> HTML 要素と同様に、行と列に配置されたデータを含む対話型の可能性のある表構造の一部として識別します。grid に似ていますが、tree と同じ方法で展開や折りたたみができる行があります。cell) とグリッドセル (gridcell) を含む行を見つけることができる、表 (table) とツリーグリッド (treegrid) と共に3つの可能なコンテキストのうちの1つ。 グリッド (grid) は、セルを、ネイティブな HTML <table> 要素と同様に、行と列に配置されたデータを含むインタラクティブかもしれない表構造の一部として識別します。grid) に似ていますが、ツリー (tree) と同じ方法で展開や折りたたみができる行があります。grid や treegrid 内の行内のセル。grid) やツリーグリッド (treegrid) 内の行内のセル。<th> 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、columnheader ロールは、対応する列の全てのセルとの関係を確立します。<th> 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、列ヘッダー (columnheader) ロールは、対応する列の全てのセルとの関係を確立します。<th> 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、rowheader ロールは、対応する行の全てのセルとの関係を確立します。<th> 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、行ヘッダー (rowheader) ロールは、対応する行の全てのセルとの関係を確立します。<th> と <td> 要素の colspan 属性と同様に、セルにまたがる列数を定義します。<th> と <td> 要素の colspan 属性と同様に、セルにまたがる列数を定義します。<th> と <td> 要素の rowspan 属性と同様に、セルにまたがる行数を定義します。<th> と <td> 要素の rowspan 属性と同様に、セルにまたがる行数を定義します。aria-colindex 属性は、列が DOM から隠されている場合にのみ必要です。 この属性は、値として 1 と table、grid、treegrid 内の全列数の間の整数をとります。 aria-colindex は、行内の全列数に対する要素の列インデックスまたは位置を定義します。 全ての列が DOM 内にある場合、この属性は必要ありません。
aria-colindex 属性は、列が DOM から隠されている場合にのみ必要です。 この属性は、値として 1 から表 (table)、グリッド (grid)、ツリーグリッド (treegrid) 内の総列数の間の整数をとります。 aria-colindex は、行内の総列数に対する要素の列インデックスまたは位置を定義します。 全ての列が DOM 内にある場合、この属性は必要ありません。
aria-rowindex 属性は、行が DOM から隠されている場合にのみ必要です。 現在のセルが入っている全行のリストの行を示します。 この属性は、値として 1 と table、grid、treegrid 内の全行数の間の整数をとり、セルの位置またはインデックスを示します。 たとえば、最初のヘッダーの最初の行のセルは aria-rowindex="1" と設定され、47 行目のセルは、DOM 内に全ての行が存在しないために aria-rowindex が必要な場合は、aria-rowindex="47" となるでしょう。 表示されている行が連続していて、colspan や rowspan が 1 より大きいセルがない場合、このプロパティは行の全てのセルの代わりに親の行に追加できます。
aria-rowindex 属性は、行が DOM から隠されている場合にのみ必要で、現在のセルが総ての行のリスト内のどの行かを示します。 この属性は、値として 1 から表 (table)、グリッド (grid)、ツリーグリッド (treegrid) 内の総行数の間の整数をとり、セルの位置またはインデックスを示します。 たとえば、最初のヘッダーの最初の行のセルは aria-rowindex="1" と設定され、47 行目のセルは、DOM 内に全ての行が存在しないために aria-rowindex が必要な場合は、aria-rowindex="47" となるでしょう。 表示されている行が連続していて、colspan や rowspan が 1 より大きいセルがない場合、このプロパティは行の全てのセルの代わりに親の行に追加できます。
ARIA の最初のルールは、要素を再定義し、ARIA のロール、ステート、プロパティを追加してアクセス可能にするのではなく、すでに組み込まれている意味論と挙動を持つネイティブな機能を使用できることです。 可能であれば、ARIA の cell ロールの代わりに HTML の <td> 要素を使用してください。
ARIA の第一のルールは、要素を転用して、ARIA のロール、ステート、プロパティを追加してアクセス可能にするのではなく、必要としている意味論と振る舞いがすでに組み込まれているネイティブな機能を使用できる場合は、そうすることです。 可能な限り、ARIA のセル (cell) ロールの代わりに HTML の <td> 要素を使用してください。
上記は、DOM 内に 81 行のうち 5 行が存在する意味論的でない ARIA の表です。 表のヘッダー内に 1 行、表の本体内に 4 行あります。 全ての行が DOM 内にあるわけではないので、全てのセルに aria-rowindex プロパティを追加しました。 複数の行や列にまたがるセルがない場合、aria-rowindex は行の個々のセルではなく行に配置されている可能性があります。
上記は、DOM 内に 81 行のうち 5 行が存在する意味論的でない ARIA の表です。 表のヘッダー内に 1 行、表の本体内に 4 行あります。 全ての行が DOM 内にあるわけではないので、全てのセルに aria-rowindex プロパティを含めています。 複数の行や列にまたがるセルがない場合、aria-rowindex は行の個々のセルではなく行に配置されている可能性があります。
データ表構造には、table、tbody、thead、tr、th、td などのみを使用します。 アクセシビリティを確保するために ARIA のロールを追加し、例えば CSS で表のネイティブな意味論を削除するべきです。 ARIA の table ロールの関連するユースケースは、display: grid など、CSS の display プロパティによって表のネイティブな意味論がオーバーライドされる場合です。 この場合、ARIA の table ロールを使用して意味論を戻すことができます。
データ表構造には、table、tbody、thead、tr、th、td などのみを使用します。 CSS などを使用して、表のネイティブな意味論を削除しなくてはならない場合に、ARIA ロールを追加してアクセシビリティを確保できます。 ARIA の表 (table) ロールの関連するユースケースは、display: grid など、CSS の display プロパティによって表のネイティブな意味論がオーバーライドされる場合です。 この場合、ARIA の表 (table) ロールを使用して意味論を戻すことができます。
<table role="table" aria-label="意味論的な要素" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <caption id="semantic_elements_table_desc">ARIA のロールの代わりに使用する意味論的な要素</caption> <thead role="rowgroup"> <tr role="row"> - <th role="columnheader" aria-sort="none" aria-rowindex="1">ARIA のロール</th> + <th role="columnheader" aria-sort="none" aria-rowindex="1">ARIA ロール</th> <th role="columnheader" aria-sort="none" aria-rowindex="1">意味論的な要素</th> </tr> </thead> @@ -160,7 +154,7 @@ translation_of: Web/Accessibility/ARIA/Roles/Cell_Role </tbody> </table>-
上記は表を書く意味論的な方法です。 表のネイティブな意味論の場合、ARIA のロールは必要ありません。 したがって、display プロパティなどで表の行は変更されていません。
+上記は、表を作成する意味論的な方法です。 表のネイティブな意味論、つまり表の行が、display プロパティなどを介して変更されていない場合、ARIA ロールは必要ありません。