ARIA: thuộc tính aria-expanded

Mô tả

Có nhiều widget có thể được mở rộng và thu gọn, bao gồm menu, dialog và accordion panel. Mỗi đối tượng này đều có một phần tử tương tác kiểm soát việc mở và đóng của nó. Thuộc tính aria-expanded được áp dụng cho control tương tác có thể nhận tiêu điểm này, vốn bật tắt khả năng hiển thị của đối tượng.

Ví dụ, aria-expanded được áp dụng cho mục cha trong cây DOM để cho biết nhánh con của nó có đang được hiển thị hay không. Mục cha cũng kiểm soát khả năng hiển thị của nhánh con liên quan.

Có hai khai báo có thể được áp dụng cho các đối tượng điều khiển khả năng hiển thị của một đối tượng khác: aria-controls, hoặc aria-owns kết hợp với aria-expanded. aria-controls và aria-owns chỉ ra mối quan hệ giữa phần tử điều khiển và phần tử được điều khiển. aria-expanded cho công nghệ hỗ trợ biết phần tử được điều khiển đang được mở rộng hay thu gọn.

Hãy dùng thuộc tính aria-owns trên các phần tử sở hữu các container nhóm có thể mở rộng. Nếu container nhóm có thể mở rộng và thu gọn không thuộc quyền sở hữu của phần tử có thuộc tính aria-expanded, hãy dùng thuộc tính aria-controls để tham chiếu container nhóm đó.

Buttons

Một nút bật tắt widget nên có aria-controls được đặt thành id của widget được bật tắt và aria-expanded được đặt thành trạng thái hiện tại của widget.

<button aria-expanded="false" aria-controls="widget1">Bật tắt widget</button>

Khi widget hiển thị, đối tượng điều khiển truyền đạt thông tin đó bằng cách có aria-expanded="true" được đặt trên nó. Tên khả năng tiếp cận của đối tượng điều khiển nên phản ánh thay đổi này.

<button aria-expanded="true" aria-controls="widget1">Bật tắt widget</button>

Menu

Khi một menu được hiển thị, đối tượng nút bật tắt khả năng hiển thị của menu đó sẽ có aria-expanded="true" được đặt. Khi menu bị ẩn, có thể bỏ aria-expanded. Nếu được chỉ định khi menu bị ẩn, nó nên được đặt thành aria-expanded="false". Khi một menu con không hiển thị, menuitem cha của nó có aria-expanded. Nó nên được đặt thành true khi menu con hiển thị.

Combobox

Theo mặc định, một số vai trò được ẩn hoặc thu gọn và các vai trò khác được mở hoặc mở rộng theo mặc định. Các phần tử có vai trò combobox có giá trị mặc định cho aria-expanded là false. Khi popup của combobox không hiển thị, phần tử có vai trò combobox có aria-expanded được đặt thành false. Đây là trạng thái mặc định. Khi popup hiển thị, aria-expanded nên được đặt thành true.

<label for="username">Tên người dùng</label>
<input id="username" name="username" aria-describedby="username-desc" />
<button
  aria-expanded="false"
  aria-controls="username-desc"
  aria-label="Trợ giúp về tên người dùng"
  type="button">
  <span aria-hidden="true">?</span>
</button>
<p id="username-desc" hidden>
  Tên người dùng của bạn là tên bạn dùng để đăng nhập vào dịch vụ này.
</p>

Treeitems

Mỗi phần tử có vai trò treeitem đóng vai trò là nút cha sẽ có aria-expanded="false" khi nút ở trạng thái đóng và aria-expanded="true" khi nút ở trạng thái mở. Các nút cuối, tức các nút không có nút con, không nên có thuộc tính aria-expanded vì nếu có, chúng sẽ bị mô tả sai cho công nghệ hỗ trợ như là các nút cha.

Rows

Một hàng cha trong treegrid là một hàng có thể được mở rộng hoặc thu gọn để hiển thị hay ẩn một tập các hàng con trong bảng hoặc grid. Mỗi hàng cha có trạng thái aria-expanded được đặt trên phần tử hàng hoặc trên một ô nằm trong hàng. Khi hàng con bị ẩn, aria-expanded="false" được đặt. aria-expanded="true" được đặt khi hàng con được hiển thị. Các hàng không điều khiển việc hiển thị hàng con thì không nên bao gồm thuộc tính aria-expanded vì việc bao gồm thuộc tính này sẽ định nghĩa các hàng đó là hàng cha.

Giá trị

false

Phần tử nhóm mà phần tử này sở hữu hoặc điều khiển đang bị thu gọn.

true

Phần tử nhóm mà phần tử này sở hữu hoặc điều khiển đang được mở rộng.

undefined (mặc định)

Phần tử không sở hữu hoặc điều khiển một phần tử nhóm có thể mở rộng.

Giao diện liên quan

Element.ariaExpanded

Thuộc tính ariaExpanded, là một phần của giao diện Element, phản ánh giá trị của thuộc tính aria-expanded.

ElementInternals.ariaExpanded

Thuộc tính ariaExpanded, là một phần của giao diện ElementInternals, phản ánh giá trị của thuộc tính aria-expanded.

Vai trò liên quan

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

• application
• button
• combobox
• gridcell
• group
• input
• link
• menuitem
• row
• scrollbar
• separator
• tab
• treeitem

Đặc tả

Xem thêm

• aria-controls
• aria-owns