role="row" の要素は、表形式の構造内のセルの行（row）です。 行には、grid、table、treegrid 内の1つ以上のセル、グリッドセル、列ヘッダー、場合によっては行ヘッダーが含まれます。 オプションで rowgroup 内にも含まれます。
行ロール (role="row") を持つ要素は、表形式の構造内に並んだセルの一行です。 行には、1つ以上のセル、グリッドセル、列ヘッダー、場合によっては行ヘッダーが含まれます。 行は、グリッド (grid)、表 (table)、ツリーグリッド (treegrid) 内に含まれ、任意で行グループ (rowgroup) 内に含まれることもあります。
<div role="table" aria-label="人口" aria-describedby="country_population_desc">
<div id="country_population_desc">国別世界人口</div>
<div role="rowgroup">
<div role="row">
<span role="columnheader" aria-sort="descending">国</span>
- <span role="columnheader"aria-sort="none">人口</span>
+ <span role="columnheader" aria-sort="none">人口</span>
</div>
</div>
<div role="rowgroup">
@@ -34,18 +32,18 @@ translation_of: Web/Accessibility/ARIA/Roles/Row_Role
説明
-role="row" を持つ要素は、grid、table、treegrid 内の行で、オプションで rowgroup 内の行です。 行は、静的な表構造内の1つ以上の cell、gridcell、columnheader、rowheader のコンテナです。 可能であれば、ネイティブな HTML <tr> 要素を使用することを強く推奨します。
+行ロール (role="row") 要素は、グリッド (grid)、表 (table)、ツリーグリッド (treegrid) 内の行であり、任意で行グループ (rowgroup) 内の行です。 行は、静的な表構造内の1つ以上のセル (cell)、グリッドセル (gridcell)、列ヘッダー (columnheader)、行ヘッダー (rowheader) のコンテナーです。 可能な限り、ネイティブな HTML の <tr> 要素を使用することを強く推奨します。
-ARIA の行を作成するには、コンテナ要素に role="row" を追加します。 その行は、grid、table、treegrid 内にネストするべきです。 行のグループは、grid、table、treegrid 内に直接ネストすることができますし、これらのコンテナ内の rowgroup 内に配置することもできます。 それぞれの行には子のセルが含まれています。 これらのセルは、列ヘッダーや行ヘッダーやグリッドセルや普通のセルの異なるタイプのセルにすることができます。
+ARIA の行を作成するには、コンテナー要素に行ロール (role="row") を追加します。 その行は、グリッド、表、ツリーグリッド内にネストするべきです。 行のグループは、グリッド、表、ツリーグリッド内に直接ネストすることも、これらのコンテナー内の行グループ内にネストすることもできます。 それぞれの行には子のセルが含まれています。 これらのセルには、列や行のヘッダー、グリッドや普通のセルとさまざまな種類のセルがあります。
-行には、aria-colindex、aria-level、aria-rowindex、aria-selected など、行のロールを明確にする属性だけでなく、多くの属性を含めることができます。
+行には、aria-colindex、aria-level、aria-rowindex、aria-selected など、行のロールを明確にする多くの属性を含めることができます。
-行が treegrid 内にある場合、現在の状態を示す属性を使用して行を展開可能にするため、行に aria-expanded 属性を含めることができます。 これは、aria-expanded 属性が存在しない通常の table や grid の場合には当てはまりません。
+行がツリーグリッド内にある場合、行には aria-expanded 属性を含めることができ、この属性を使って現在の (展開、折りたたみ) 状態を示すことができます。 これは、aria-expanded 属性が存在しない通常の表やグリッドの場合には当てはまりません。
-表形式の構造を持つ対話型のウィジェットを作成するには、代わりに grid のパターンを使用します。 インタラクションが個々のセルの選択状態を提供する場合や、上下左右のナビゲーションが提供されている場合や、ユーザインタフェースがセル順序の再配置を許可する場合や、ドラッグアンドドロップなどで個々のセル順序の変更が可能な場合は、代わりに grid や treegrid を使用します。
+表形式の構造を持つインタラクティブなウィジェットを作成するには、代わりにグリッドパターンを使用します。 インタラクションが個々のセルの選択状態を提供する場合や、上下左右のナビゲーションを提供する場合や、ユーザーインターフェイスでセルの順序を入れ替えたり、ドラッグアンドドロップなどで個々のセルの順序を変更したりできる場合は、代わりにグリッド (grid) やツリーグリッド (treegrid) を使用してください。
-注: 可能であれば、表の行要素（<tr>）と共にネイティブな HTML 表要素（<table>）を使用することを強く推奨します。
+注: 可能な限り、ネイティブな HTML の表要素 (<table>) を表の行要素 (<tr>) と共に使用することを強く推奨します。
関連する WAI-ARIA のロール、ステート、プロパティ
@@ -54,26 +52,26 @@ translation_of: Web/Accessibility/ARIA/Roles/Row_Role
thead、tfoot、tbody 要素と構造的に同等です。thead、tfoot、tbody 要素と構造的に同等です。grid と treegrid と共に行が見つかる3つの可能なコンテキストの1つで、行がネイティブな <table> HTML 要素と同様に、行と列に配置されたデータを含む非対話型の表構造の一部であることを識別します。<table> 要素と同様に、行と列に配置されたデータを含むインタラクティブでない表構造の一部として行を識別します。table と treegrid と共に行が見つかる3つの可能なコンテキストの1つで、行がネイティブな <table> HTML 要素と同様に、行と列に配置されたデータを含む非対話型の表構造の一部であることを識別します。grid に似ていますが、tree と同じ方法で展開や折りたたみができる行があります。<table> 要素と同様に、行と列に配置されたデータを含むインタラクティブでない表構造の一部として行を識別します。tree) と同じ方法で展開と折りたたみができる行があります (訳注: W3C のツリーグリッドによるメール受信ボックスの例では、行単位でのインタラクションも可能となっています) 。grid 内または treegrid 内の行内のセル。<th> 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、columnheader ロールは、対応する列の全てのセルとの関係を確立します。<th> 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、列ヘッダーロールは、対応する列の全てのセルとの関係を確立します。<th> 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、rowheader ロールは、対応する行の全てのセルとの関係を確立します。<th> 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、行ヘッダーロールは、対応する行の全てのセルとの関係を確立します。aria-expended="undefined"、または属性がない: 行は展開も折りたたみもできません。aria-expanded 属性を持つ要素が、要素が '所有していない' 別のグループ化コンテナの展開を制御する場合、aria-controls 属性を使用してコンテナを参照するべきです（SHOULD）。
aria-expanded 属性を持つ要素が、その要素が「所有」していない別のグループ化コンテナーの展開を制御する場合、作成者は aria-controls 属性を使用してそのコンテナーを参照するべきです。
grid や treegrid などの対話型のコンテナ内に行がある場合のみ関連し、行が table の行の場合は関連しません。 aria-selected 属性は、次の3つの値のいずれかを取るか省略することができます。
+ aria-selected 属性は、次の3つの値のいずれかを取るか省略することができます。
aria-selected="true: 行は現在選択されています。aria-selected="false": 行は現在選択されていません。aria-colindex 属性は、列が DOM から隠されている場合にのみ必要であり、一般的に行に置くことができるときに表示される列が連続していない限り、行自体ではなく行の子に配置されます。
+
aria-colindex 属性は、列が DOM から隠されている場合にのみ必要です。 一般的に、行自体ではなく、行の子に配置されます。 表示される列が連続している場合は、行に配置できます。
- この属性は、値として、1 と table、grid、treegrid 内の全列数の間の整数をとります。 aria-colindex は、行に配置されると、行内の全列数に対する要素の列インデックスまたは位置を定義します。 たとえば、表内に 15 列あり、4、5、6 列のみが DOM にある場合、全ての行に aria-colindex="4" を設定できます。
+ この属性は、値として、1 と表、グリッド、ツリーグリッド内の全列数の間の整数をとります。 aria-colindex は、行に配置されると、行内の全列数に対する要素の列インデックスまたは位置を定義します。 例えば、表内に 15 列あり、4、5、6 の列のみが DOM にある場合、全ての行に aria-colindex="4" を設定できます。
- DOM に存在する列のセットが連続していない場合や、複数の行や列にまたがるセルがある場合は、行自体ではなく各行の全ての子に aria-colindex を配置します。
aria-colindex を配置します (訳注: 全ての列を 1 から昇順に数えたものを昇順に配置します) 。
- 全ての列が DOM 内にある場合、この属性は必要ありません。
+全ての列が DOM にある場合、この属性は必要ありません。
aria-rowindex 属性は、行が DOM から隠されている場合にのみ必要で、全行のリスト内のどの行が読み込まれているかを示します。 属性は、それぞれの行に一意の値が設定され、値として、1 と table、grid、treegrid 内の全行数の間の整数をとり、各行の位置またはインデックスを示します。 たとえば、テーブル内に 1,500 行があり、47 行目と 52 行目とヘッダーのみが DOM にある場合は、ヘッダー行に aria-rowindex="1" が設定され、47 行目と 52 行目にそれぞれ aria-rowindex="47" と aria-rowindex="52" が設定されます。
aria-rowindex 属性は、行が DOM から隠されている場合にのみ必要であり、全行のリスト内のどの行が読み込まれているかを示します。 属性は、それぞれの行に一意の値が設定され、値として、1 と表、グリッド、ツリーグリッド内の全行数の間の整数をとり、各行の位置またはインデックスを示します。 例えば、1,500 行ある表で、ヘッダーと 47 行目と 52 行目のみが DOM に存在する場合、ヘッダー行に aria-rowindex="1" が設定され、47 行目と 52 行目にそれぞれ aria-rowindex="47" と aria-rowindex="52" が設定されます (訳注: ヘッダー行も含んだ全ての行を 1 から昇順に数えたものを昇順に配置します) 。
全ての行が DOM に存在する場合、この属性は必要ありません。
無し。 ソート可能な列については、columnheader ロールを参照してください。
無し。 ソート可能な列については、列ヘッダー (columnheader) ロールを参照してください。
ARIA の最初のルールは、要素を再定義し、ARIA のロール、ステート、プロパティを追加してアクセス可能にするのではなく、すでに組み込まれている意味論と挙動を持つネイティブな機能を使用できることです。 可能であれば、ARIA の table ロールの代わりに HTML の <table> 要素を使用してください。
ARIA の使用の第一のルールは、要素を転用して ARIA のロール、ステート、プロパティを追加することでアクセス可能にするのではなく、必要としている意味論と振る舞いがすでに組み込まれているネイティブな機能を使用できることです。 可能な限り、ARIA の表ロールの代わりに HTML の <table> 要素を使用してください。
上記は、DOM 内に 81 行のうち 5 行が存在する意味論的でない ARIA の表です。 表のヘッダー内に 1 行、表の本体内に 4 行あります。 ヘッダー行は、ヘッダーの rowgroup 内に単独であり、2 つの列ヘッダーを持ちます。 列はソート可能ですが、aria-sort プロパティで示されているように、現在はソートされていません。 表の本体は別の rowgroup にあり、現在 DOM 内に 4 行あります。 全ての行が DOM 内にあるわけではないため、全ての行に aria-rowindex プロパティを追加しました。
上記は、DOM 内に 81 行のうち 5 行が存在する意味論的でない ARIA の表です。 表のヘッダー内に 1 行、表の本体内に 4 行あります。 ヘッダー行は、ヘッダーの行グループ内に単独であり、2 つの列ヘッダーを持ちます。 列はソート可能ですが、aria-sort プロパティで示されているように、現在はソートされていません。 表の本体は別の行グループにあり、現在 DOM 内に 4 行あります。 全ての行が DOM 内にあるわけではないため、全ての行に aria-rowindex プロパティを含めています。
データ表構造には、table、tbody、thead、tr、th、td などのみを使用します。 アクセシビリティを確保するために ARIA のロールを追加し、例えば CSS で表のネイティブな意味論を削除するべきです。 ARIA の table ロールの関連するユースケースは、display: grid など、CSS の display プロパティによって表のネイティブな意味論がオーバーライドされる場合です。 この場合、ARIA の table ロールを使用して意味論を戻すことができます。
データ表構造には、<table>、<tbody>、<thead>、<tr>、<th>、<td> などのみを使用してください。 これらに ARIA ロールを追加することで、CSS などで表のネイティブな意味論が取り除かれても、アクセシビリティを確保することができます。 ARIA の表ロールの関連するユースケースは、display: grid など、CSS の display プロパティによって表のネイティブな意味論がオーバーライドされる場合です。 この場合、ARIA の表ロールを使用して意味論を追加し直すことができます。
<table role="table" aria-label="意味論的な要素" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <caption id="semantic_elements_table_desc">ARIA のロールの代わりに使用する意味論的な要素</caption> @@ -199,7 +194,7 @@ translation_of: Web/Accessibility/ARIA/Roles/Row_Role </tbody> </table>-
上記は表を書く意味論的な方法です。 ARIA のロールは、表のネイティブな意味論の場合にのみ必要です。 したがって、display プロパティを flex または grid に設定すると表の行が消されます。
+上記は、表の意味論的な書き方です。 ARIA のロールが必要になるのは、display プロパティを flex や grid に設定するなどして、表のネイティブな意味論、つまり表の行が完全に破壊されてしまう場合だけです (訳注: ここでの grid は、CSS グリッドレイアウトというグリッドロールとは全く別のものであることに注意してください) 。