ARIA: thuộc tính aria-pressed

Mô tả

Thêm aria-pressed vào một phần tử có vai trò button sẽ biến nút đó thành một toggle button. Thuộc tính aria-pressed chỉ có ý nghĩa với các nút bật tắt. Nó biểu thị trạng thái "được nhấn" hiện tại của nút.

Giá trị là "tri-state", nghĩa là nó có thể được đặt thành true, false, mixed hoặc undefined. Với aria-pressed, giống như hầu hết các kiểu giá trị ba trạng thái khác, giá trị mặc định là undefined.

Nút bật tắt cần một chu kỳ nhấn và thả hoàn chỉnh để thay đổi giá trị của nó. Nhấn và thả một lần sẽ đổi giá trị thành true. Nếu nhấn và thả lại lần nữa, giá trị sẽ đổi trở lại false.

Giá trị mixed nghĩa là giá trị của nhiều mục được nút điều khiển không còn giống nhau.

Đừng thay đổi nội dung của nhãn trên nút bật tắt khi trạng thái thay đổi. Nếu nhãn nút là "pause", đừng đổi nó thành "play" khi được nhấn. Trong ví dụ này, khi trạng thái được nhấn là true, nhãn vẫn là "Pause" để bộ đọc màn hình có thể đọc kiểu như "Pause toggle button pressed".

<button aria-pressed="false">Pause</button>

Nếu bạn muốn nhãn thay đổi giữa "Paused" và "Play", đừng dùng aria-pressed.

Quy tắc đầu tiên khi dùng ARIA là: "nếu bạn có thể dùng một tính năng gốc đã có sẵn ngữ nghĩa và hành vi mà bạn cần, thay vì tái sử dụng một phần tử rồi thêm vai trò, trạng thái hoặc thuộc tính ARIA để làm cho nó có trợ năng, thì hãy làm như vậy." Nếu chúng ta dùng ngữ nghĩa HTML gốc với <button>, chúng ta có thể thay đổi nhãn thay vì thay đổi trạng thái pressed, nên không cần thuộc tính aria-pressed.

Giá trị

false

Nút hỗ trợ trạng thái được nhấn nhưng hiện chưa được nhấn.

mixed

Cho biết một giá trị chế độ hỗn hợp cho nút bật tắt ba trạng thái.

true

Nút đang được nhấn.

undefined (mặc định)

Phần tử không hỗ trợ trạng thái được nhấn.

Giao diện liên quan

Element.ariaPressed

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

ElementInternals.ariaPressed

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

Vai trò liên quan

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

• button

Thông số kỹ thuật

Xem thêm

• <input type="button">
• <input type="submit">
• <button>
• aria-checked
• aria-selected