Cái nhìn về khả năng truy cập ứng dụng HTML & tiêu chuẩn web của ARIA / Mã hóa

. Cái sau được thêm vào thông số kỹ thuật của W3C với mục đích ánh xạ chủ yếu ARIA đóng vai trò quan trọng đối với một yếu tố HTML ngữ nghĩa.

vai trò =”dẫn đường”

Vai trò điều hướng có nghĩa là được sử dụng để chỉ ra một khu vực có chứa các yếu tố điều hướng như liên kết và danh sách trên một trang web.

vai trò =”bổ túc”

Vai trò mốc bổ sung mô tả nội dung bổ sung có liên quan đến nội dung chính của trang web. Nó cần được đặt ở mức tương tự trong hệ thống phân cấp DOM như vai trò = "chính". Bài viết liên quan, bài viết phổ biến, bình luận mới nhất là những ví dụ điển hình của nội dung bổ sung tự trị.

vai trò =”nội dung”

Vai trò contentinfo thông báo cho các tác nhân người dùng về sự hiện diện của một khu vực nơi các loại siêu dữ liệu khác nhau, chẳng hạn như thông tin bản quyền, tuyên bố pháp lý và quyền riêng tư có thể được tìm thấy. Nó thường được sử dụng cho phần chân trang của một trang web.

vai trò =”hình thức”

Vai trò mốc biểu mẫu cho biết một biểu mẫu đang chờ người dùng nhập vào. Đối với các hình thức tìm kiếm, bạn nên sử dụng vai trò = "tìm kiếm" thay thế.

vai trò =”Tìm kiếm”

Vai trò tìm kiếm khá tự giải thích, nó nhằm giúp các công nghệ hỗ trợ xác định chức năng tìm kiếm của trang web.

vai trò =”ứng dụng”

Bạn có thể sử dụng vai trò mốc của ứng dụng cho một khu vực mà bạn muốn khai báo là một ứng dụng web, thay vì một tài liệu web. Không nên đưa nó vào các trang web truyền thống, vì nó gợi ý các công nghệ hỗ trợ để chuyển từ chế độ duyệt thông thường sang chế độ duyệt ứng dụng. Bạn chỉ nên sử dụng vai trò mang tính bước ngoặt này một cách cẩn thận.

Hoa và tài sản

Mặc dù vai trò cho phép bạn xác định ý nghĩa của thẻ HTML, các trạng thái và thuộc tính cung cấp cho người dùng thông tin bổ sung về cách tương tác với chúng. Cả hai trạng thái và thuộc tính được đánh dấu bằng thuộc tính tiền tố aria với cú pháp aria- *.

Các thuộc tính ARIA nổi tiếng nhất có lẽ là thuộc tính bắt buộc của aria và trạng thái được kiểm tra bằng aria. Yêu cầu của Aria là một bất động sản bởi vì đó là một tính năng vĩnh viễn của một yếu tố đầu vào (nghĩa là người dùng phải điền nó vào), trong khi kiểm tra aria là một tiểu bang bởi vì một hộp kiểm có thể thường xuyên thay đổi giá trị của nó do tương tác của người dùng.

Cú pháp của các thuộc tính tiền tố của Aria

Các trạng thái và thuộc tính đôi khi lấy các giá trị mã thông báo (một tập hợp giới hạn các giá trị được xác định trước), ví dụ, thuộc tính aria-live có thể có 3 giá trị khác nhau: tắt, lịch sự, quả quyết. Cú pháp trong ví dụ này trông như thế này:

Trong các trường hợp khác, các giá trị của các thuộc tính tiền tố aria được biểu thị bằng dây, số, số nguyên, Tài liệu tham khảo ID hoặc là đúng sai giá trị.

Cách sử dụng các trạng thái và thuộc tính của ARIA

1. Xây dựng mối quan hệ giữa các yếu tố với các thuộc tính mối quan hệ

Sử dụng các thuộc tính mối quan hệ để chỉ ra mối quan hệ giữa các yếu tố khác nhau trên trang web của bạn, điều đó không thể được xác định theo cách khác từ cấu trúc tài liệu. Ví dụ aria-labellingby thuộc tính xác định phần tử gắn nhãn phần tử hiện tại.

aria-labellingby - trong số nhiều thứ khác - có thể liên kết các tiêu đề với các vùng mốc ARIA theo cách sau:

 Đây là một tiêu đề
 Nội dung chính…

2. Đồng bộ hóa các trạng thái và thuộc tính với vòng đời của phần tử

Sau khi bạn đặt vai trò mốc ARIA cho một khu vực có thể nhận biết trên trang HTML của mình, nó có thể giúp các công nghệ hỗ trợ rất nhiều nếu bạn thay đổi trạng thái và thuộc tính tiền tố ARIA của các yếu tố con theo các sự kiện xảy ra trên màn hình. Điều này có thể rất quan trọng khi người dùng phải tương tác với trang web, ví dụ: điền vào biểu mẫu hoặc chạy truy vấn tìm kiếm.

3. Kết hợp các giao diện trực quan và có thể truy cập

Nguyên tắc chung của thiết kế khả năng truy cập là trạng thái hiện tại của giao diện người dùng luôn cần được nhận biết bằng các công nghệ hỗ trợ. Chẳng hạn, nếu người dùng chọn một tùy chọn trong một biểu mẫu, thì nó cũng cần xuất hiện được chọn cho các công nghệ hỗ trợ. Điều này có thể dễ dàng đạt được bằng cách sử dụng trạng thái được chọn aria với cú pháp sau: .

Hướng dẫn thực hành ủy quyền WAI-ARIA của W3C có thể cung cấp cho bạn nhiều ý tưởng tuyệt vời khác về cách hài hòa chính xác hình ảnh và giao diện có thể truy cập của trang web của bạn.

Đừng lạm dụng ARIA

Sử dụng vai trò và thuộc tính ARIA đôi khi có thể là dư thừa. Khi bạn sử dụng các thẻ ngữ nghĩa của HTML5, chẳng hạn như hoặc là

, các trình duyệt web hiện đại thêm ngữ nghĩa ARIA thích hợp theo mặc định. Trong trường hợp này, không có ý nghĩa để đặt riêng các vai trò mốc ARIA.

Ví dụ: không cần thiết phải sử dụng hình thức vai trò mốc để xác định

thành phần. Thay cho

cú pháp nó hoàn toàn đủ để sử dụng chỉ . Việc sử dụng các thuộc tính gốc của HTML cùng với thuộc tính ARIA thích hợp cũng không cần thiết.

Vì vậy, nếu bạn đã thêm ẩn Thuộc tính HTML cho đầu vào biểu mẫu, không cần thiết phải thêm aria ẩn trạng thái, vì trình duyệt bao gồm nó theo mặc định.