ARIA: thuộc tính aria-rowindex

Mô tả

Một số bảng có rất, rất nhiều hàng. Việc chỉ tải một phần các hàng có thể là yêu cầu thiết kế, để cải thiện hiệu năng, hoặc để nâng cao trải nghiệm người dùng.

Khi chỉ có một phần các hàng được tải, bạn cần cho tất cả người dùng biết những phần hàng nào đang được hiển thị. Thuộc tính aria-rowindex được dùng để xác định chỉ số hoặc vị trí của hàng hay ô so với tổng số hàng trong một bảng, grid hoặc treegrid.

Khi được thêm vào phần tử <tr> hoặc vào một phần tử có vai trò row, hoặc trực tiếp lên <td>, <th>, hoặc phần tử có vai trò cell hay gridcell, giá trị là vị trí của hàng so với toàn bộ bảng.

Giá trị của aria-rowindex là một số nguyên lớn hơn hoặc bằng 1, lớn hơn giá trị aria-rowindex của bất kỳ hàng trước đó nào, và nhỏ hơn hoặc bằng số hàng của toàn bộ bảng.

Nếu tất cả các hàng đều đã được tải và có trong DOM, bạn không cần thêm aria-rowindex vì trình duyệt sẽ tự động tính chỉ số của từng hàng. Tuy nhiên, khi chỉ có một phần các hàng hiện diện trong DOM, aria-rowindex là cần thiết để chỉ ra vị trí của từng hàng so với toàn bộ bảng. Nếu chỉ có một phần các hàng được tải, bạn cũng cần thêm aria-rowcount vào phần tử tổ tiên của bảng, ngay cả khi bạn chưa biết tổng số hàng.

Nếu bảng chỉ có một phần các hàng có một ô chiếm nhiều hơn một hàng, cả hàng và ô đó đều cần có aria-rowindex. Nếu một ô chiếm nhiều hơn một hàng, tức là phần tử cell có thuộc tính aria-rowspan hoặc ô HTML có rowspan lớn hơn 1, hãy thêm giá trị aria-rowindex của hàng lên ô đang chiếm nhiều hàng đó, ngoài thuộc tính rowspan phù hợp. Giá trị đó phải là chỉ số của hàng nơi phần chiếm bắt đầu.

Ví dụ

Ví dụ sau cho thấy một grid có 24 hàng, trong đó hàng đầu tiên và các hàng 7 đến 10 được hiển thị cho người dùng. Ô "Position" cuối cùng chiếm hai cột 9 và 10.

<div role="grid" aria-rowcount="24">
  <div role="rowgroup">
    <div role="row" aria-rowindex="1">
      <span role="columnheader">First Name</span>
      <span role="columnheader">Last Name</span>
      <span role="columnheader">Position</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row" aria-rowindex="7">
      <span role="gridcell">Morgan</span>
      <span role="gridcell">Brian</span>
      <span role="gridcell">Midfielder</span>
    </div>
    <div role="row" aria-rowindex="8">
      <span role="gridcell">Abby</span>
      <span role="gridcell">Dahlkemper</span>
      <span role="gridcell">Defender</span>
    </div>
    <div role="row" aria-rowindex="9">
      <span role="gridcell">Ashlyn</span>
      <span role="gridcell">Harris</span>
      <span role="gridcell" aria-rowspan="2" aria-rowindex="9">Goalkeeper</span>
    </div>
    <div role="row" aria-rowindex="10">
      <span role="gridcell">Alyssa</span>
      <span role="gridcell">Naeher</span>
    </div>
  </div>
</div>

Lưu ý rằng cả aria-rowspan và aria-rowindex đều có mặt trên ô Goalkeeper, vì ô này chiếm hai hàng.

Giá trị

<integer>

Một số nguyên lớn hơn hoặc bằng 1, lớn hơn aria-rowindex của hàng trước đó nếu có, và nhỏ hơn hoặc bằng giá trị của aria-rowcount.

Giao diện liên quan

Element.ariaRowIndex

Thuộc tính ariaRowIndex, thuộc giao diện Element, phản ánh giá trị của thuộc tính aria-rowindex.

ElementInternals.ariaRowIndex

Thuộc tính ariaRowIndex, thuộc giao diện ElementInternals, phản ánh giá trị của thuộc tính aria-rowindex.

Vai trò liên quan

Được dùng trong các vai trò:

• cell
• row

Kế thừa vào các vai trò:

• columnheader
• gridcell
• rowheader

Thông số kỹ thuật

Xem thêm

• aria-rowindextext
• aria-rowcount
• aria-rowspan
• aria-colindex
• Thuộc tính rowspan trên <td>