role="rowgroup" を持つ要素は、表構造内の行（row）のグループです。 行グループ（rowgroup）には、グリッド(grid)、表（table）、またはツリーグリッド（treegrid）内のセル（cell）、グリッドセル（gridcell）、列ヘッダー（columnheader）、または行ヘッダー（rowheader）の1つ以上の行が含まれます。
行グループロール (role="rowgroup") を持つ要素は、表形式の構造内の行 (row) のグループです。 行グループ (rowgroup) には、グリッド (grid)、表 (table)、ツリーグリッド (treegrid) 内のセル (cell)、グリッドセル (gridcell)、列ヘッダー (columnheader)、行ヘッダー (rowheader) の行が1つ以上含まれます。
<div role="table" aria-label="人口" aria-describedby="country_population_desc">
<div id="country_population_desc">国別世界人口</div>
@@ -32,49 +30,49 @@ translation_of: Web/Accessibility/ARIA/Roles/Rowgroup_Role
</div>
-行グループ（rowgroup）は、所有する行（row）の要素間の関係を確立し、HTML の表ヘッダー（{{htmlelement("thead")}}）、表フッター（{{htmlelement("tfoot")}}） 、および表本体（{{htmlelement("tbody")}}）の要素と構造的に同等です。 ただし、異なる種類の行グループを区別することはできません。 それらの要素は、表（table）またはグリッド（grid）のロールを持つ要素に含まれているか、またはそれらの要素によって所有されている必要があります。 可能な限り、ネイティブの {{htmlelement("thead")}}、{{htmlelement("tfoot")}} 、および {{htmlelement("tbody")}} HTML 要素を使用することを強くお勧めします。
行グループ (rowgroup) は、所有する行の要素間の関係を確立し、HTML の表ヘッダー (<thead>)、表フッター (<tfoot>) 、および表本体 (<tbody>) の要素と構造的に同等です。 ただし、異なる種類の行グループ間には区別がありません。 それらの要素は、表 (table) やグリッド (grid) のロールを持つ要素に含まれているか、またはそれらの要素によって所有されている必要があります。 可能な限り、ネイティブな HTML の <thead>、<tfoot>、<tbody> の要素を使用することを強く推奨します。
ARIA の表ヘッダー、表フッター、または表本体を作成するには、role="rowgroup" を要素に追加します。 その行グループは、1つ以上の行のグループを含むグリッド、表、またはツリーグリッド内にネストする必要があります。 各行には子セルが含まれています。 これらのセルは、列ヘッダーか行ヘッダーか、プレーンなセルかグリッドセルかによって、さまざまなタイプにすることができます。
ARIA の表ヘッダー、表フッター、表本体を作成するには、行グループロール (role="rowgroup") を要素に追加します。 その行グループは、1つ以上の行のグループを含むグリッド、表、またはツリーグリッド内にネストするべきです。 各行には子のセルが含まれています。 これらのセルには、列や行のヘッダー、プレーンなセルやグリッドセルとさまざまな種類のセルがあります。
注: 可能であれば、ネイティブの HTML 表要素（<table>）を表ヘッダー（<thead>）、表フッター（<tfoot>）、および表本体（<tbody>）の要素と共に使用することを強くお勧めします。
注: 可能な限り、ネイティブな HTML の表要素（<table>）を表ヘッダー（<thead>）、表フッター（<tfoot>）、表本体（<tbody>）の要素と共に使用することを強く推奨します。
<table> HTML 要素と同様に、行と列に配列されたデータを含む非インタラクティブな表構造の一部として行を識別します。<table> 要素と同様に、行と列に配置されたデータを含むインタラクティブでない表構造の一部として行を識別します。<table> HTML 要素と同様に、行と列に配列されたデータを含む非インタラクティブな表構造の一部として行を識別します。<table> 要素と同様に、行と列に配置されたデータを含むインタラクティブでない表構造の一部として行を識別します。tree) と同じ方法で展開と折りたたみができる行があります (訳注: W3C のツリーグリッドによるメール受信ボックスの例では、行単位でのインタラクションも可能となっています) 。cell）、グリッドセル（gridcell）、または列ヘッダー（columnheader）が含まれ、場合によっては行ヘッダー（rowheader）も含まれます。cell）、グリッドセル（gridcell）、または列ヘッダー（columnheader）が含まれ、場合によっては行ヘッダー（rowheader）も含まれます。無し
-無し。
ARIA の最初のルールは、要素を再定義し、ARIA のロール、ステート、プロパティを追加してアクセス可能にするのではなく、すでに組み込まれている意味論と挙動を持つネイティブな機能を使用できることです。 可能な限り、ARIA の table ロールの代わりに HTML の {{htmlelement("table")}} 要素を使用してください。
ARIA の使用の第一のルールは、要素を転用して ARIA のロール、ステート、プロパティを追加することでアクセス可能にするのではなく、必要としている意味論と振る舞いがすでに組み込まれているネイティブな機能を使用できることです。 可能な限り、ARIA の表ロールの代わりに HTML の <table> 要素を使用してください。
<div role="table" aria-label="意味論的な要素" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <div id="semantic_elements_table_desc">ARIA のロールの代わりに使用する意味論的な要素</div> @@ -105,11 +103,11 @@ translation_of: Web/Accessibility/ARIA/Roles/Rowgroup_Role </div>-
上記は、表ヘッダーと表本体を持つ非意味論的な ARIA の表で、DOM には81行のうち5行が含まれています。 表ヘッダー内に1行、表本体内に4行あります。 ヘッダー行は、ヘッダーの行グループに単独であり、2つの列ヘッダーを持ちます。 aria-sort プロパティで示されるように、列はソート可能ですが、現在はソートされていません。 表本体は独立した行グループで、現在 DOM には4行あります。 すべての行が DOM 内にあるわけではないので、すべての行に aria-rowindex プロパティを含めました。
上記は、表のヘッダーと表の本体を備えた意味論的でない ARIA の表であり、DOM 内には 81 行のうち 5 行が存在しています。 表のヘッダー内に 1 行、表の本体内に 4 行あります。 ヘッダー行は、ヘッダーの行グループ内に単独であり、2 つの列ヘッダーを持ちます。 列はソート可能ですが、aria-sort プロパティで示されているように、現在はソートされていません。 表の本体は別の行グループにあり、現在 DOM 内に 4 行あります。 全ての行が DOM 内にあるわけではないため、全ての行に aria-rowindex プロパティを含めています。
データ表構造には、{{htmlelement("table")}}、{{htmlelement("tbody")}}、{{htmlelement("thead")}}、{{htmlelement("tr")}}、{{htmlelement("th")}}、{{htmlelement("td")}} などのみを使用します。 アクセシビリティを確保するために ARIA のロールを追加し、例えば CSS で表のネイティブな意味論を削除するべきです。 ARIA の table ロールの関連するユースケースは、display: grid など、CSS の {{cssxref("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> @@ -131,14 +129,13 @@ translation_of: Web/Accessibility/ARIA/Roles/Rowgroup_Role </tbody> </table>-
上記は表を書く意味論的な方法です。 ARIA のロールは、表のネイティブな意味論の場合にのみ必要です。 したがって、display プロパティを flex または grid に設定すると表の行が消されます。
-
上記は、表の意味論的な書き方です。 ARIA のロールが必要になるのは、display プロパティを flex や grid に設定するなどして、表のネイティブな意味論、つまり表の行が完全に破壊されてしまう場合だけです (訳注: ここでの grid は、CSS グリッドレイアウトというグリッドロールとは全く別のものであることに注意してください) 。
無し
-