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

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

    Một web thực sự mở và toàn diện cần các công nghệ cho phép người dùng khuyết tật dựa vào các công nghệ hỗ trợ để thưởng thức nội dung web động và các ứng dụng web hiện đại. Các tiêu chuẩn web khả năng truy cập của W3C nhằm mục đích phổ biến web bằng Ứng dụng Internet phong phú có thể truy cập (ARIA) mà người dùng khuyết tật có thể sử dụng một cách hiệu quả.

    ARIA là một trong nhiều tiêu chuẩn và hướng dẫn về khả năng truy cập được công bố bởi Sáng kiến ​​Khả năng truy cập Web (WAI). Nó cung cấp một đánh dấu bổ sung có thể dễ dàng chèn vào các tài liệu HTML. WAI-ARIA là một giải pháp đa nền tảng nhắm vào Nền tảng web mở, vì vậy đừng chỉ nghĩ về các trang web mà còn về các trò chơi, giải trí kỹ thuật số, chăm sóc sức khỏe, di động và các loại ứng dụng khác.

    Trong bài đăng này, chúng tôi sẽ xem xét cách bạn có thể thêm khả năng truy cập vào tài liệu HTML của mình với sự trợ giúp của các tiêu chuẩn WAI-ARIA.

    Khung ARIA

    Cú pháp của HTML không phải lúc nào cũng cho phép các nhà phát triển mô tả đúng các yếu tố, xác định vai trò của họ và chỉ định mối quan hệ giữa chúng. Mặc dù điều đó hiếm khi là vấn đề đối với khách truy cập sở hữu đầy đủ các giác quan của họ, nhưng điều đó có thể cản trở người dùng công nghệ hỗ trợ hiểu được những gì đang xảy ra trên màn hình và khám phá các tùy chọn của họ.

    Đây là điểm mà ARIA đến giúp đỡ chúng tôi, vì nó có thể xác định mục đích của các yếu tố khác nhau với sự trợ giúp của vai trò bước ngoặt, và mô tả bản chất của họ với thuộc tính tiền tố aria. Thuộc tính tiền tố có hai loại: tính chất mô tả các tính năng ít có khả năng thay đổi trong suốt vòng đời của trang và tiểu bang cung cấp thông tin về những thứ có thể thường xuyên thay đổi do tương tác của người dùng.

    Vai trò cột mốc

    Vai trò quan trọng là các hình thức nổi tiếng nhất của Mô hình Vai trò của ARIA (các hình thức khác là Vai trò Trừu tượng, Vai trò Tiện ích và Vai trò Cấu trúc Tài liệu). Vai trò cột mốc cho phép các nhà phát triển xác định lớn vùng nhận biết trên trang web mà người dùng công nghệ hỗ trợ có thể muốn truy cập nhanh.

    Có 8 loại vai trò mốc ARIA và chúng cần được thêm làm thuộc tính cho các thẻ HTML có liên quan.

    vai trò =”biểu ngữ”

    Vai trò biểu ngữ được dự định sẽ được sử dụng chủ yếu cho nội dung có liên quan đến toàn bộ trang web, không chỉ cho các trang riêng lẻ. Nó thường được thêm làm thuộc tính cho tiêu đề chính của trang web cho logo và thông tin quan trọng trên toàn trang web. Điều quan trọng là bạn chỉ có thể sử dụng vai trò biểu ngữ một lần trong bất kỳ tài liệu hoặc ứng dụng HTML nào.

    vai trò =”chủ yếu”

    Vai trò mốc chính liên quan đến nội dung chính của tài liệu. Nó không thể được sử dụng nhiều lần trên bất kỳ trang HTML nào. Nó thường theo sau

    cú pháp hoặc trong HTML5 có nhiều ngữ nghĩa hơn
    . 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.

    HÌNH ẢNH: Tài nguyên truy cập Sky.com

    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.

    © Savtec
    Thông tin hữu ích và lời khuyên phát triển web. Lập trình, thiết kế web, CSS, HTML, JAVASCRIPT. Cấu hình và cài đặt lại WINDOWS. Tạo các trang web và ứng dụng từ đầu.