Giới thiệu về ARIA và ngữ nghĩa HTML không phải gốc
Từ trước đến nay, chúng tôi khuyến khích sử dụng các phần tử HTML gốc vì các phần tử này có tâm điểm, tính năng 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 không hiệu quả. Ví dụ: hiện không có phần tử HTML được chuẩn hoá 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, chẳng hạn như "người dùng cần biết về điều này càng sớm càng tốt".
Tiếp đến, trong bài học này, chúng ta sẽ khám phá cách diễn đạt các ngữ nghĩa mà HTML không thể tự thể hiện.
Quy cách Ứng dụng Internet đa dạng thức có thể tiếp cận của Sáng kiến hỗ trợ tiếp cận web (WAI-ARIA hay đơn giản là ARIA) rất phù hợp để cầu nối những khu vực gặp phải các vấn đề về hỗ trợ tiếp cận mà HTML gốc không thể quản lý đượ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 một ví dụ.
Trong đoạn mã sau, chúng ta sử dụng một mục trong danh sách làm một loại hộp đánh dấu tuỳ chỉnh. Lớp "hộp đánh dấu" 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 hiệu quả đối với người dùng thị lực, nhưng trình đọc màn hình sẽ không cho biết rằng thành phần này là một hộp đánh dấu, vì vậy, người dùng có thị lực kém có thể bỏ lỡ hoàn toàn thành phần này.
Tuy nhiên, khi sử dụng các thuộc tính ARIA, chúng ta có thể cung cấp cho phần tử thông tin còn thiếu để trình đọc màn hình có thể diễn giải chính xác thông tin đó. Ở đây, chúng tôi thêm thuộc tính role và aria-checked để xác định rõ ràng phần tử đó là một hộp đánh dấu, đồng thời cho biết rằng phần tử đó được đánh dấu theo mặc định. Bây giờ, mục danh sách 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 một 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à tăng cường cây hỗ trợ tiếp cận DOM chuẩn.
Mặc dù ARIA cho phép chúng ta chỉnh sửa một cách tinh tế (hoặc thậm chí là triệt để) cây hỗ trợ tiếp cận cho mọi phần tử trên trang, nhưng đó chỉ là thay đổi duy nhất của ARIA. ARIA không bổ sung bất kỳ hành vi vốn có nào của phần tử; sẽ không làm cho phần tử có thể làm tâm điểm hoặc cung cấp cho trình nghe sự kiện trê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 bạn cần hiểu là không cần phải xác định lại ngữ nghĩa mặc định. Dù được sử dụng như thế nào thì phần tử <input type="checkbox"> HTML tiêu chuẩn cũng không cần thêm thuộc tính ARIA role="checkbox" để được thông báo chính xác.
Cũng cần lưu ý rằng một số phần tử HTML có các quy định hạn chế về việc có thể dùng vai trò và thuộc tính nào của ARIA. Ví dụ: một phần tử <input
type="text"> chuẩn có thể không được áp dụng vai trò/thuộc tính bổ sung nào.
Xem quy cách ARIA trong HTML để biết thêm thông tin.
Hãy cùng xem ARIA cung cấp những chức năng nào khác.
ARIA có thể làm những gì?
Như bạn đã thấy với ví dụ về hộp đánh dấu, ARIA có thể sửa đổi ngữ nghĩ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. Tệp này cũng có thể biểu thị các mẫu ngữ nghĩa 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ử kiểu tiện ích mà HTML thuần tuý không thể thực hiện được.
- Ví dụ: ARIA có thể thêm nhãn và văn bản mô tả bổ sung mà chỉ hiển thị với các API công nghệ hỗ trợ.
<button aria-label="screen reader only label"></button>
- ARIA có thể biểu thị 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 điều khiển một khu vực cụ thể.
<div role="scrollbar" aria-controls="main"></div>
<div id="main">
. . .
</div>
- Đồng thời, ARIA có thể khiến các phần của trang "hoạt động" để thông báo ngay cho công nghệ hỗ trợ khi các phần đó 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 các vai trò. Vai trò trong các thuật ngữ hỗ trợ tiếp cận tương tự như 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 danh sách các mẫu mà chúng ta 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 ta đã thông báo cho công nghệ hỗ trợ rằng phần tử phải tuân theo mẫu "hộp kiểm". Nghĩa là chúng tôi đảm bảo rằng trạng thái này sẽ có trạng thái đánh dấu (đánh dấu hoặc không đá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ì các hoạt động tương tác với bàn phím hoạt động rất nổi bật khi sử dụng trình đọc màn hình, nên bạn phải đảm bảo rằng khi tạo một 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 giúp đảm bảo các sự kiện trên bàn phím chuyển đến đúng vị trí và khi tiêu điểm chuyển đến 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ả cách 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 mà có thể dùng kết hợp với các vai trò đó. Đây là nguồn thông tin chính xác tốt nhất về cách các vai trò và thuộc tính của ARIA hoạt động cùng nhau, cũng như cách sử dụng các vai trò và thuộc tính này theo cách được các trình duyệt và công nghệ hỗ trợ hỗ trợ.
Tuy nhiên, thông số kỹ thuật 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ề Phương pháp tạo tác giả cho 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ò mốc mở rộng các tuỳ chọn có sẵn trong HTML5. Vui lòng xem quy cách Mẫu thiết kế vai trò đánh dấu để biết thêm thông tin.