ARIA: thuộc tính aria-disabled

Mô tả

Khi aria-disabled được đặt thành true, điều đó cho biết phần tử mà nó được đặt lên và tất cả các phần tử con có thể nhận tiêu điểm của nó đều được xem là ở trạng thái bị vô hiệu hóa. Khai báo này sẽ thông báo cho những người dùng công nghệ hỗ trợ, chẳng hạn trình đọc màn hình, rằng những phần tử này không được thiết kế để có thể chỉnh sửa hoặc thao tác được.

Khác với thuộc tính Boolean disabled của HTML, vốn sẽ thông báo cho điều khiển biểu mẫu là bị vô hiệu hóa về mặt ngữ nghĩa, thay đổi kiểu dáng của nó để phản ánh trạng thái đó, đồng thời vô hiệu hóa toàn bộ chức năng và không cho phép giá trị của phần tử tham gia vào việc gửi biểu mẫu, thì aria-disabled="true" chỉ bộc lộ các phần tử này là bị vô hiệu hóa về mặt ngữ nghĩa. Nhà phát triển web phải tự bảo đảm bằng tay rằng chức năng của các phần tử đó bị ngăn chặn khi chúng được bộc lộ ở trạng thái bị vô hiệu hóa.

Khi cần vô hiệu hóa các điều khiển biểu mẫu HTML gốc, nhà phát triển cần chỉ định thuộc tính disabled, vì nó cung cấp sẵn tất cả các tính năng thường được mong đợi của việc vô hiệu hóa một điều khiển. Tuy nhiên, cũng có những trường hợp cần bộc lộ phần tử như bị vô hiệu hóa nhưng vẫn để người dùng có thể tìm thấy khi điều hướng bằng phím Tab. Làm vậy có thể cải thiện khả năng phát hiện ra chúng vì chúng sẽ không bị loại khỏi thứ tự tiêu điểm của trang web, trong khi aria-disabled không thay đổi khả năng nhận tiêu điểm của các phần tử như vậy, và cũng không làm mờ các phần tử bằng kiểu dáng mặc định của trình duyệt, khiến chúng dễ đọc hơn. Một số ví dụ về nơi điều này có thể hữu ích gồm:

• Phần nút tiêu đề liên kết với một panel accordion không thể thu gọn,
• Một nút quan trọng cần giữ trong thứ tự tiêu điểm của trang, nhưng hành động hiện không khả dụng - chẳng hạn nút gửi biểu mẫu,
• Các mục tạm thời không hoạt động trong widget menu vốn nếu không sẽ bị bỏ qua khi điều hướng bằng bàn phím thông thường.

Trong mỗi trường hợp này, có thể muốn người dùng tìm thấy các phần tử này thông qua điều hướng bàn phím thông thường, dù chức năng của control đó đã bị loại bỏ hoặc "vô hiệu hóa". Nhà phát triển vẫn cần dùng JavaScript để vô hiệu hóa hoàn toàn chức năng của phần tử đồng thời thay đổi giao diện của phần tử để người dùng nhìn thấy được biết nó bị vô hiệu hóa.

Một lý do khác để dùng thuộc tính aria-disabled thay cho thuộc tính disabled của HTML là nếu bạn tạo ra các control tùy chỉnh cần được đánh dấu là bị vô hiệu hóa nhưng không dùng phần tử hỗ trợ thuộc tính disabled. Ví dụ, trong đoạn sau, một <div> được dùng để tạo một nút tùy chỉnh cần được đánh dấu là bị vô hiệu hóa. Tuy nhiên, phần tử <div> không mong đợi, cũng không tôn trọng thuộc tính disabled - ngay cả khi nó được gán role="button" để thay đổi vai trò ARIA được bộc lộ của nó. Thuộc tính aria-disabled là bắt buộc để vô hiệu hóa các control tùy chỉnh như vậy.

<div role="button" aria-disabled="true" tabindex="-1">Sửa</div>

Tương tự như việc cần dùng JavaScript để bảo đảm phần tử có aria-disabled="true" không hoạt động, phần tử đó cũng cần điều chỉnh kiểu dáng. Trái với thuộc tính disabled của HTML, nơi việc chỉ định nó sẽ làm các kiểu :disabled của tác nhân người dùng được áp dụng, việc thêm aria-disabled="true" thì không. Phần tử có thể được tạo kiểu bằng bộ chọn thuộc tính [aria-disabled="true"].

[aria-disabled="true"] {
  opacity: 0.5;
}

Nếu bạn cố ý dùng thuộc tính aria-disabled để cho một control biểu mẫu vẫn nằm trong thứ tự tiêu điểm bàn phím của trang, đặc biệt nếu phần tử đại diện cho nội dung quan trọng mà tất cả người dùng nên có thể nhận biết, thì bạn có thể cần dùng kiểu dáng vẫn đáp ứng các yêu cầu tương phản màu. Ví dụ, một nút/tiêu đề bị vô hiệu hóa dùng để mở đầu một accordion panel không thể thu gọn là nội dung vẫn cần dễ đọc.

@media (forced-colors: active) {
  [aria-disabled="true"] {
    border-color: GrayText;
    color: GrayText;
  }
}

Truy vấn media forced-colors phát hiện xem tác nhân người dùng đã bật chế độ màu ép buộc hay chưa; nếu có, cả màu chữ và màu viền đều được đặt thành màu hệ thống greyText.

Một điều khác cần lưu ý khi dùng aria-disabled thay cho thuộc tính HTML gốc là thuộc tính ARIA sẽ yêu cầu kiểu dáng thủ công cần thiết để truyền đạt trực quan rằng phần tử bị vô hiệu hóa trong Windows High Contrast Mode.

function onClick(event) {
  event.preventDefault();
}

function toggleDisabled(element, status, update) {
  if (status) {
    // element.input.disabled = false;
    element.setAttribute("aria-disabled", "false");
    update.textContent = "Phần tử hiện đã được bật.";
    element.addEventListener("click", onClick);
  } else {
    // element.input.disabled = true;
    element.setAttribute("aria-disabled", "true");
    update.textContent = "Phần tử hiện đã bị vô hiệu hóa.";
    element.removeEventListener("click", onClick);
  }
}

Khi chuyển từ aria-disabled="true" sang "false", hãy dùng JavaScript để:

1. Chuyển giá trị thành false (hoặc loại bỏ hoàn toàn thuộc tính),
2. Bật phần tử, và
3. Cho người dùng biết control hiện đã được bật.

Nếu bạn chỉ dùng CSS để tạo kiểu cho trạng thái bị vô hiệu hóa bằng bộ chọn thuộc tính, bộ chọn đó sẽ không còn khớp nữa và kiểu dáng vô hiệu hóa sẽ không còn hiệu lực.

Giá trị

true

Phần tử bị vô hiệu hóa

false

Phần tử không bị vô hiệu hóa

Giao diện liên quan

Element.ariaDisabled

Thuộc tính ariaDisabled, là một phần của giao diện Element, phản ánh giá trị của thuộc tính aria-disabled, vốn cho biết phần tử có thể được nhận biết nhưng bị vô hiệu hóa nên không thể chỉnh sửa hoặc thao tác.

ElementInternals.ariaDisabled

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

Vai trò liên quan

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

• application
• button
• composite
• gridcell
• group
• input
• link
• menuitem
• scrollbar
• separator
• tab

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

• checkbox
• columnheader
• combobox
• grid
• listbox
• menu
• menubar
• menuitemcheckbox
• menuitemradio
• option
• radio
• radiogroup
• row
• rowheader
• searchbox
• select
• slider
• spinbutton
• switch
• tablist
• textbox
• toolbar
• tree
• treegrid
• treeitem

Đặc tả

Xem thêm

• Làm cho các nút bị vô hiệu hóa bao gồm hơn bởi Sandrina Pereira
• Styling for Windows high contrast with new standards for forced colors
• disabled
• Element.ariaDisabled
• ElementInternals.ariaDisabled
• aria-hidden
• aria-readonly