ARIA: vai trò rowgroup

Mô tả

Rowgroup thiết lập mối quan hệ giữa các phần tử row mà nó sở hữu và là phần tương đương về cấu trúc với các phần tử <thead>, <tfoot> và <tbody> trong HTML. Tuy nhiên, không có sự phân biệt giữa các loại nhóm hàng khác nhau. Các phần tử của chúng phải được chứa trong, hoặc được sở hữu bởi, các phần tử có vai trò table hoặc grid. Việc dùng các phần tử HTML <thead>, <tfoot> và <tbody> gốc, khi có thể, là điều được khuyến khích mạnh mẽ.

Để tạo đầu bảng, chân bảng hoặc thân bảng theo ARIA, hãy thêm role="rowgroup" vào phần tử. Rowgroup đó nên được lồng bên trong grid, table hoặc treegrid, bao trùm một nhóm gồm một hoặc nhiều hàng. Mỗi hàng, đến lượt nó, chứa các ô con. Các ô này có thể thuộc các kiểu khác nhau, tùy theo đó là tiêu đề cột hay tiêu đề hàng, hoặc ô bình thường hay ô lưới.

Các vai trò, trạng thái và thuộc tính WAI-ARIA liên quan

Vai trò ngữ cảnh

role="table"

Một trong ba ngữ cảnh có thể (cùng với grid và treegrid) nơi bạn sẽ gặp một row. Nó xác định row là một phần của cấu trúc bảng không tương tác chứa dữ liệu sắp xếp theo hàng và cột, tương tự phần tử HTML <table> gốc.

role="grid"

Một trong ba ngữ cảnh có thể (cùng với table và treegrid) nơi bạn sẽ gặp một row. Nó xác định row là một phần của cấu trúc bảng không tương tác chứa dữ liệu sắp xếp theo hàng và cột, tương tự phần tử HTML <table> gốc.

role="treegrid"

Tương tự grid, nhưng với các hàng có thể được mở rộng và thu gọn theo cách giống cây.

Vai trò con

role="row"

Một hàng các ô trong một cấu trúc dạng bảng. Một hàng chứa một hoặc nhiều ô, gridcell, hoặc tiêu đề cột, và đôi khi có một tiêu đề hàng.

Tương tác bàn phím

Không có.

Tính năng JavaScript bắt buộc

Không có.

Ví dụ

<div
  role="table"
  aria-label="Semantic Elements"
  aria-describedby="semantic_elements_table_desc"
  aria-rowcount="81">
  <div id="semantic_elements_table_desc">
    Semantic Elements to use instead of ARIA's roles
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader" aria-sort="none">ARIA Role</span>
      <span role="columnheader" aria-sort="none">Semantic Element</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row" aria-rowindex="11">
      <span role="cell">header</span>
      <span role="cell">h1</span>
    </div>
    <div role="row" aria-rowindex="16">
      <span role="cell">header</span>
      <span role="cell">h6</span>
    </div>
    <div role="row" aria-rowindex="18">
      <span role="cell">rowgroup</span>
      <span role="cell">thead</span>
    </div>
    <div role="row" aria-rowindex="24">
      <span role="cell">term</span>
      <span role="cell">dt</span>
    </div>
  </div>
</div>

Phần trên là một bảng ARIA không ngữ nghĩa với đầu bảng và thân bảng, trong đó có năm trong số 81 hàng hiện diện trong DOM: một hàng trong phần đầu bảng và bốn hàng trong phần thân bảng. Hàng tiêu đề, đứng một mình trong một rowgroup đầu bảng, có hai tiêu đề cột. Các cột có thể sắp xếp, nhưng hiện chưa được sắp xếp, như được chỉ ra bởi thuộc tính aria-sort. Thân bảng là một rowgroup riêng, với bốn hàng hiện có trong DOM. Vì không phải tất cả các hàng đều có trong DOM, chúng tôi đã thêm thuộc tính aria-rowindex trên mỗi hàng.

Thực hành tốt nhất

Chỉ dùng <table>, <tbody>, <thead>, <tr>, <th>, <td>, và tương tự cho cấu trúc bảng dữ liệu. Bạn có thể thêm các vai trò ARIA này để đảm bảo khả năng truy cập nếu ngữ nghĩa gốc của table bị loại bỏ, chẳng hạn bằng CSS. Một trường hợp sử dụng phù hợp cho vai trò ARIA table là khi thuộc tính display của CSS ghi đè ngữ nghĩa gốc của table, chẳng hạn bằng display: grid. Trong trường hợp này, bạn có thể dùng các vai trò ARIA table để thêm ngữ nghĩa trở lại.

<table
  role="table"
  aria-label="Semantic Elements"
  aria-describedby="semantic_elements_table_desc"
  aria-rowcount="81">
  <caption id="semantic_elements_table_desc">
    Semantic Elements to use instead of ARIA's roles
  </caption>
  <thead role="rowgroup">
    <tr role="row">
      <th role="columnheader" aria-sort="none">ARIA Role</th>
      <th role="columnheader" aria-sort="none">Semantic Element</th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row" aria-rowindex="11">
      <td role="cell">header</td>
      <td role="cell">h1</td>
    </tr>
    <tr role="row" aria-rowindex="16">
      <td role="cell">header</td>
      <td role="cell">h6</td>
    </tr>
  </tbody>
</table>

Trên đây là cách viết table theo ngữ nghĩa. Các vai trò ARIA chỉ cần thiết nếu ngữ nghĩa gốc của table, và do đó là các hàng table, bị xóa bỏ, chẳng hạn bằng cách đặt thuộc tính display thành flex hoặc grid.

Lợi ích bổ sung

none

Thông số kỹ thuật

Xem thêm

• HTML table
• HTML table body
• HTML table footer
• HTML table header