Giới thiệu về ARIA

Giới thiệu về ARIA và ngữ nghĩa HTML không phải gốc

Alice Boxhall
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

Cho đến nay, chúng tôi khuyến khích bạn sử dụng các phần tử HTML gốc vì các phần tử này cung cấp cho bạn tiêu điểm, hỗ trợ bàn phím và ngữ nghĩa tích hợp, nhưng đôi khi bố cục đơn giản và HTML gốc sẽ không thực hiện được công việc. Ví dụ: hiện không có phần tử HTML chuẩn hoá nào cho một cấu trúc giao diện người dùng rất phổ biến, đó là trình đơn bật lên. Cũng không có phần tử HTML nào cung cấp đặc điểm ngữ nghĩa như "người dùng cần biết về điều này càng sớm càng tốt".

Trong bài học này, chúng ta sẽ tìm hiểu cách thể hiện ngữ nghĩa mà HTML không thể tự thể hiện.

Thông số kỹ thuật về Ứng dụng Internet đa dạng thức hỗ trợ tiếp cận của Sáng kiến hỗ trợ tiếp cận trên web (WAI-ARIA, hoặc chỉ là ARIA) rất phù hợp để kết nối các khu vực có vấn đề về khả năng hỗ trợ tiếp cận mà không thể quản lý bằng HTML gốc. Công cụ này hoạt động bằng cách cho phép bạn chỉ định các thuộc tính sửa đổi cách dịch một phần tử sang cây hỗ trợ tiếp cận. Hãy xem ví dụ.

Trong đoạn mã sau, chúng ta sử dụng một mục danh sách làm một loại hộp đánh dấu tuỳ chỉnh. Lớp "checkbox" CSS cung cấp cho phần tử các đặc điểm hình ảnh bắt buộc.

<li tabindex="0" class="checkbox" checked>
    Receive promotional offers
</li>

Mặc dù cách này hoạt động tốt đối với người dùng bình thường, nhưng trình đọc màn hình sẽ không cho biết rằng phần tử này là một hộp đánh dấu, vì vậy, người dùng khiếm thị có thể bỏ lỡ hoàn toàn phần tử này.

Tuy nhiên, khi sử dụng các thuộc tính ARIA, chúng ta có thể cung cấp thông tin còn thiếu cho phần tử này để trình đọc màn hình có thể diễn giải chính xác thông tin đó. Tại đây, chúng ta đã thêm các thuộc tính rolearia-checked để xác định rõ ràng phần tử này là hộp đánh dấu và chỉ định rằng phần tử này được đánh dấu theo mặc định. Mục danh sách hiện sẽ được thêm vào cây hỗ trợ tiếp cận và trình đọc màn hình sẽ báo cáo chính xác mục đó dưới dạng hộp đánh dấu.

<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
    Receive promotional offers
</li>

ARIA hoạt động bằng cách thay đổi và mở rộng cây hỗ trợ tiếp cận DOM tiêu chuẩn.

Cây hỗ trợ tiếp cận DOM chuẩn.
Cây hỗ trợ tiếp cận tăng cường ARIA.

Mặc dù ARIA cho phép chúng ta sửa đổi tinh tế (hoặc thậm chí là triệt để) cây hỗ trợ tiếp cận cho bất kỳ phần tử nào trên trang, nhưng đó là điều duy nhất mà ARIA thay đổi. ARIA không tăng cường bất kỳ hành vi vốn có nào của phần tử; nó sẽ không giúp phần tử có thể lấy tiêu điểm hoặc cung cấp trình nghe sự kiện bàn phím. Đó vẫn là một phần trong nhiệm vụ phát triển của chúng tôi.

Điều quan trọng là bạn cần hiểu rằng không cần phải xác định lại ngữ nghĩa mặc định. Bất kể mục đích sử dụng, phần tử <input type="checkbox"> HTML tiêu chuẩn không cần thêm thuộc tính ARIA role="checkbox" để được thông báo chính xác.

Ngoài ra, bạn cũng cần lưu ý rằng một số phần tử HTML nhất định có các quy định hạn chế về vai trò và thuộc tính ARIA có thể được sử dụng trên các phần tử đó. Ví dụ: phần tử <input type="text"> tiêu chuẩn có thể không có vai trò/thuộc tính bổ sung nào được áp dụng cho phần tử đó.

Hãy xem thông số kỹ thuật ARIA trong HTML để biết thêm thông tin.

Hãy xem ARIA có những tính năng nào khác.

ARIA có thể làm gì?

Như bạn đã thấy trong ví dụ về hộp đánh dấu, ARIA có thể sửa đổi ngữ nghĩa của phần tử hiện có hoặc thêm ngữ nghĩa vào các phần tử không có ngữ nghĩa gốc. Ngôn ngữ này cũng có thể biểu thị các mẫu ngữ nghĩa hoàn toàn không tồn tại trong HTML, chẳng hạn như trình đơn hoặc bảng điều khiển thẻ. Thông thường, ARIA cho phép chúng ta tạo các phần tử loại tiện ích mà không thể tạo được bằng HTML thuần tuý.

  • Ví dụ: ARIA có thể thêm nhãn và văn bản mô tả bổ sung chỉ được hiển thị cho các API công nghệ hỗ trợ.
<button aria-label="screen reader only label"></button>
  • ARIA có thể thể hiện các mối quan hệ ngữ nghĩa giữa các phần tử mở rộng kết nối mẹ/con tiêu chuẩn, chẳng hạn như thanh cuộn tuỳ chỉnh kiểm soát một vùng cụ thể.
    <div role="scrollbar" aria-controls="main"></div>
    <div id="main">
    . . .
    </div>
  • Ngoài ra, ARIA có thể làm cho các phần của trang "sống động", nhờ đó các phần này sẽ thông báo ngay cho công nghệ hỗ trợ khi thay đổi.
    <div aria-live="polite">
      <span>GOOG: $400</span>
    </div>

Một trong những khía cạnh cốt lõi của hệ thống ARIA là tập hợp vai trò. Vai trò trong các thuật ngữ hỗ trợ tiếp cận tương đương với chỉ báo viết tắt cho một mẫu giao diện người dùng cụ thể. ARIA cung cấp từ vựng về các mẫu mà chúng tôi có thể sử dụng thông qua thuộc tính role trên bất kỳ phần tử HTML nào.

Khi áp dụng role="checkbox" trong ví dụ trước, chúng tôi đã cho công nghệ hỗ trợ biết rằng phần tử phải tuân theo mẫu "hộp kiểm". Tức là chúng tôi đảm bảo rằng phần tử này sẽ có trạng thái đã đánh dấu (đã đánh dấu hoặc chưa đánh dấu) và trạng thái này có thể được bật/tắt bằng chuột hoặc phím cách, giống như phần tử hộp đánh dấu HTML tiêu chuẩn.

Trên thực tế, vì hoạt động tương tác với bàn phím rất nổi bật trong quá trình sử dụng trình đọc màn hình, nên điều quan trọng là bạn phải đảm bảo rằng khi tạo tiện ích tuỳ chỉnh, thuộc tính role luôn được áp dụng ở cùng một vị trí với thuộc tính tabindex; điều này đảm bảo rằng các sự kiện bàn phím diễn ra đúng nơi và khi tiêu điểm rơi vào một phần tử thì vai trò của nó được truyền tải chính xác.

Thông số kỹ thuật ARIA mô tả hệ thống phân loại các giá trị có thể có cho thuộc tính role và các thuộc tính ARIA liên kết có thể được dùng cùng với các vai trò đó. Đây là nguồn thông tin chính xác nhất về cách các vai trò và thuộc tính ARIA hoạt động cùng nhau, cũng như cách sử dụng các vai trò và thuộc tính đó theo cách mà trình duyệt và công nghệ hỗ trợ hỗ trợ.

Danh sách tất cả vai trò ARIA hiện có.

Tuy nhiên, thông số kỹ thuật này rất dày đặc; một nơi dễ tiếp cận hơn để bắt đầu là tài liệu về Các phương pháp viết nội dung ARIA. Tài liệu này khám phá các phương pháp hay nhất để sử dụng các vai trò và thuộc tính ARIA hiện có.

ARIA cũng cung cấp các vai trò điểm đánh dấu mở rộng các tuỳ chọn có sẵn trong HTML5. Hãy xem quy cách về Mẫu thiết kế vai trò địa danh để biết thêm thông tin.