Giới thiệu về ngữ nghĩa của ARIA và HTML không phải gốc
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 tập trung vào hỗ trợ bàn phím và ngữ nghĩa tích hợp sẵn, nhưng đôi khi việc sử dụng bố cục và HTML gốc sẽ không thực hiện được công việc. Ví dụ: hiện tại, không có chuẩn hoá cho một cấu trúc giao diện người dùng rất phổ biến, trình đơn bật lên. Không có phần tử HTML cung cấp một đặ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ẽ khám phá cách thể hiện ngữ nghĩa mà HTML không thể rõ ràng.
Các ứng dụng Internet đa dạng có thể tiếp cận của Sáng kiến hỗ trợ tiếp cận web đặc tả dữ liệu (WAI-ARIA hoặc chỉ ARIA) phù hợp cho những khu vực cầu nối có các vấn đề về khả năng hỗ trợ tiếp cận không thể quản lý được với 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 một phần tử được dịch vào cây hỗ trợ tiếp cận. Hãy cùng xem xét ví dụ:
Trong đoạn mã sau, chúng ta sử dụng một mục danh sách làm loại hộp đánh dấu tuỳ chỉnh. Chiến lược phát hành đĩa đơn "Hộp đánh dấu" CSS lớp cung cấp cho phần tử các đặc điểm trực quan cần thiết.
<li tabindex="0" class="checkbox" checked>
Receive promotional offers
</li>
Mặc dù chế độ này hoạt động bình thường với người dùng có thị lực, nhưng trình đọc màn hình sẽ không đưa ra chỉ báo phần tử này là hộp đánh dấu, nên người dùng có thị lực kém có thể bỏ lỡ hoàn toàn.
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ể hiểu chính xác nội dung. Ở đây, chúng tôi đã thêm role và
aria-checked để xác định rõ ràng phần tử là một hộp đánh dấu và
để chỉ định rằng hộp này được chọn 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 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à tăng cường cây hỗ trợ tiếp cận DOM tiêu chuẩn.
Mặc dù ARIA cho phép chúng tôi chỉnh sửa tinh vi (hoặc thậm chí triệt để) khả năng hỗ trợ tiếp cận cho bất kỳ phần tử nào trên trang, đó là thứ duy nhất mà phần tử đó thay đổi. ARIA không làm tăng thêm hành vi vốn có của phần tử; điều này sẽ không làm cho có thể làm tâm điểm hoặc cung cấp cho phần tử đó trình nghe sự kiện trên bàn phím. Đó vẫn là một phần của phát triển ứng dụng.
Quan trọng là bạn phải hiểu rằng không cần phải xác định lại giá trị mặc định
ngữ nghĩa. Bất kể mục đích sử dụng, HTML chuẩn <input type="checkbox">
không cần thêm thuộc tính ARIA role="checkbox"
thông báo chính xác.
Một điểm khác đáng lưu ý là một số phần tử HTML có hạn chế đối với ARIA
có thể sử dụng các vai trò và thuộc tính
trên chúng. Ví dụ: phần tử <input
type="text"> tiêu chuẩn có thể không được áp dụng thêm bất kỳ vai trò/thuộc tính nào.
Xem ARIA trong thông số HTML để biết thêm thông tin.
Hãy cùng xem ARIA có những khả 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. Chiến dịch 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 thẻ bảng điều khiển. Thông thường, ARIA cho phép chúng tôi tạo các phần tử kiểu tiện ích mà không thể 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ỉ
tiếp xúc với 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 khu vực cụ thể.
<div role="scrollbar" aria-controls="main"></div>
<div id="main">
. . .
</div>
- Và ARIA có thể đặt các phần của trang ở chế độ "trực tiếp" để họ ngay lập tức thông báo công nghệ hỗ trợ khi chúng 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 thuật ngữ hỗ trợ tiếp cận giống như chỉ báo viết tắt cho một 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 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 biết
công nghệ hỗ trợ mà phần tử phải theo sau "hộp kiểm" . Đó
là, chúng tôi đảm bảo rằng ảnh này sẽ có trạng thái đã đánh dấu (đã đánh dấu hoặc không
chọn) và trạng thái có thể được bật bằng cách sử dụng chuột hoặc phím cách,
chỉ giống như phần tử hộp đánh dấu HTML 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 trình đọc màn hình
điều quan trọng là 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 tabindex
thuộc tính; đ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
tâm điểm nhắm đến một yếu tố, 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à ARIA có liên quan
có thể được sử dụng cùng với các vai trò đó. Đây là tốt nhất
một nguồn thông tin chính thức về cách hoạt động của các thuộc tính và vai trò của ARIA
với nhau cũng như cách sử dụng chúng theo cách được các trình duyệt và
công nghệ 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à ARIA Tài liệu về Phương pháp ghi nhận tác giả nhằm khám phá các phương pháp hay nhất để sử dụng các vai trò ARIA hiện có và các thuộc tính.
ARIA cũng cung cấp các vai trò mang tính mốc mở rộng các tuỳ chọn có sẵn trong HTML5. Xem Thiết kế vai trò địa danh Mẫu để biết thêm thông tin.