Hầu hết các nhà phát triển đều quen thuộc với ngôn ngữ đánh dấu tiêu chuẩn của web hiện đại, Ngôn ngữ đánh dấu siêu văn bản (HTML). Tuy nhiên, có thể bạn ít quen thuộc với Accessible Rich Internet Applications (ARIA) (Ứng dụng Internet đa dạng hỗ trợ tiếp cận) (trước đây gọi là WAI-ARIA): đó là gì, cách sử dụng và thời điểm (cũng như thời điểm không) sử dụng.
HTML và ARIA đóng vai trò quan trọng trong việc giúp các sản phẩm kỹ thuật số dễ tiếp cận, đặc biệt là khi nói đến công nghệ hỗ trợ (AT) như trình đọc màn hình. Cả hai đều được dùng để chuyển đổi nội dung sang một định dạng thay thế, chẳng hạn như chữ nổi hoặc Chuyển văn bản thành lời nói (TTS).
Xem lại lịch sử ngắn gọn của ARIA, lý do tại sao ARIA lại quan trọng, cũng như thời điểm và cách sử dụng ARIA hiệu quả nhất.
Giới thiệu về ARIA
ARIA được phát triển lần đầu tiên vào năm 2008 bởi nhóm Sáng kiến về khả năng tiếp cận web (WAI) – một nhóm nhỏ thuộc tổ chức World Wide Web Consortium (W3C) bao quát, tổ chức này quản lý và điều chỉnh Internet.
ARIA không phải là một ngôn ngữ lập trình thực sự mà là một tập hợp các thuộc tính mà bạn có thể thêm vào các phần tử HTML để tăng khả năng tiếp cận. Các thuộc tính này truyền đạt vai trò, trạng thái và thuộc tính cho các công nghệ hỗ trợ bằng cách sử dụng API hỗ trợ tiếp cận có trong các trình duyệt hiện đại. Hoạt động giao tiếp này diễn ra thông qua cây hỗ trợ tiếp cận.
"WAI-ARIA (Bộ ứng dụng Internet đa dạng có thể truy cập) xác định một cách để giúp người khuyết tật dễ dàng tiếp cận nội dung và ứng dụng web hơn. Đặc biệt, phương thức này giúp ích cho nội dung động và các chế độ kiểm soát giao diện người dùng nâng cao được phát triển bằng HTML, JavaScript và các công nghệ liên quan."
Nhóm WAI
Cây hỗ trợ tiếp cận
ARIA sửa đổi mã không chính xác hoặc chưa hoàn chỉnh để mang lại trải nghiệm tốt hơn cho những người sử dụng AT bằng cách thay đổi, hiển thị và tăng cường các phần của cây hỗ trợ tiếp cận.
Cây hỗ trợ tiếp cận được trình duyệt tạo và dựa trên cây Mô hình đối tượng tài liệu (DOM) tiêu chuẩn. Giống như cây DOM, cây hỗ trợ tiếp cận chứa các đối tượng đại diện cho tất cả các phần tử đánh dấu, thuộc tính và nút văn bản. Cây hỗ trợ tiếp cận cũng được các API hỗ trợ tiếp cận dành riêng cho nền tảng sử dụng để cung cấp một bản trình bày mà các công nghệ hỗ trợ có thể hiểu được.
Bản thân ARIA không thay đổi chức năng hoặc giao diện trực quan của một phần tử. Điều đó có nghĩa là chỉ người dùng AT mới nhận thấy sự khác biệt giữa một sản phẩm kỹ thuật số có ARIA và một sản phẩm không có ARIA. Điều đó cũng có nghĩa là chỉ nhà phát triển mới chịu trách nhiệm thực hiện các thay đổi về mã và kiểu dáng phù hợp để giúp một phần tử có thể truy cập nhiều nhất có thể.
Ba tính năng chính của ARIA là vai trò, thuộc tính và trạng thái/giá trị.
Vai trò xác định một phần tử là gì hoặc làm gì trên trang hoặc ứng dụng.
<div role="button">Self-destruct</div>
Thuộc tính thể hiện các đặc điểm hoặc mối quan hệ với một đối tượng.
<div role="button" aria-describedby="more-info">Self-destruct</div>
<div id="more-info">This page will self-destruct in 10 seconds.</div>
Trạng thái và giá trị xác định các điều kiện hoặc giá trị dữ liệu hiện tại được liên kết với phần tử.
<div role="button" aria-describedby="more-info" aria-pressed="false">
Self-destruct
</div>
<div id="more-info">
This page will self-destruct in 10 seconds.
</div>
Mặc dù bạn có thể sử dụng cả 3 phần tử của ARIA trong một dòng mã, nhưng điều này không bắt buộc. Thay vào đó, hãy xếp lớp các vai trò, thuộc tính và trạng thái hoặc giá trị ARIA cho đến khi bạn đạt được mục tiêu hỗ trợ tiếp cận cuối cùng. Việc kết hợp chính xác ARIA vào cơ sở mã của bạn sẽ đảm bảo rằng người dùng AT sẽ có tất cả thông tin cần thiết để sử dụng trang web, ứng dụng hoặc sản phẩm kỹ thuật số khác của bạn một cách thành công và công bằng.
Gần đây, Chrome DevTools đã tạo ra một cách để xem toàn bộ cây hỗ trợ tiếp cận, giúp nhà phát triển dễ dàng hiểu được cách mã của họ tác động đến khả năng hỗ trợ tiếp cận.
Trường hợp sử dụng ARIA
Năm 2014, W3C chính thức xuất bản đề xuất HTML5. Cùng với đó là một số thay đổi lớn, bao gồm cả việc bổ sung các phần tử mốc như <main>, <header>, <footer>, <aside>, <nav> và các thuộc tính như hidden và required. Với các phần tử và thuộc tính HTML5 mới này, cùng với khả năng hỗ trợ trình duyệt ngày càng tăng, một số phần của ARIA hiện ít quan trọng hơn.
Khi trình duyệt hỗ trợ thẻ HTML có vai trò ngầm ẩn với ARIA tương đương, thường thì bạn không cần thêm ARIA vào phần tử. Tuy nhiên, ARIA vẫn bao gồm nhiều vai trò, trạng thái và thuộc tính không có trong bất kỳ phiên bản nào của HTML. Những thuộc tính đó vẫn hữu ích ở thời điểm hiện tại.
Điều này dẫn đến câu hỏi cuối cùng: Khi nào bạn nên sử dụng ARIA? Rất may là nhóm WAI đã phát triển 5 quy tắc của ARIA để giúp bạn quyết định cách giúp các phần tử dễ tiếp cận.
Quy tắc 1: Không sử dụng ARIA
Vâng, bạn không đọc nhầm đâu. Việc thêm ARIA vào một phần tử không nhất thiết giúp phần tử đó dễ tiếp cận hơn. Báo cáo hằng năm về khả năng tiếp cận của WebAIM Million cho thấy các trang chủ có ARIA trung bình có số lỗi được phát hiện nhiều hơn 70% so với những trang không có ARIA, chủ yếu là do việc triển khai không đúng các thuộc tính ARIA.
Quy tắc này có một số trường hợp ngoại lệ. ARIA là bắt buộc khi một phần tử HTML không có tính năng hỗ trợ tiếp cận. Nguyên nhân có thể là do thiết kế không cho phép một phần tử HTML cụ thể hoặc tính năng hoặc hành vi mong muốn không có trong HTML. Tuy nhiên, những trường hợp này rất hiếm.
Không nên: Chỉ định vai trò.
<a role="button">Submit</a>
Nên: Sử dụng phần tử ngữ nghĩa.
<button>Submit</button>
Khi nghi ngờ, hãy sử dụng các phần tử HTML có ngữ nghĩa.
Quy tắc 2: Không thêm ARIA (không cần thiết) vào HTML
Trong hầu hết các trường hợp, các phần tử HTML hoạt động tốt như hiện tại và không cần thêm ARIA vào. Trên thực tế, những nhà phát triển sử dụng ARIA thường phải thêm mã bổ sung để làm cho các phần tử hoạt động trong trường hợp có các phần tử tương tác.
Không: Chỉ định một vai trò gây hiểu lầm.
<h2 role="tab">Heading tab</h2>
Nên: Chỉ định vai trò một cách chính xác.
<div role="tab"><h2>Heading tab</h2></div>
Bạn sẽ tốn ít công sức hơn và có mã hoạt động hiệu quả hơn khi sử dụng các phần tử HTML như dự kiến.
Quy tắc 3: Luôn hỗ trợ thao tác bằng bàn phím
Tất cả các nút điều khiển ARIA tương tác (không bị vô hiệu hoá) đều phải truy cập được bằng bàn phím. Bạn có thể thêm tabindex= "0" vào bất kỳ phần tử nào cần tiêu điểm mà thường không nhận được tiêu điểm bàn phím. Tránh sử dụng chỉ mục thẻ với số nguyên dương bất cứ khi nào có thể để ngăn các vấn đề có thể xảy ra về thứ tự tiêu điểm bàn phím.
Không: Thêm một tabindex.
<span role="button" tabindex="1">Submit</span>
Cách thực hiện: Đặt tabindex thành "0".
<span role="button" tabindex="0">Submit</span>
Tất nhiên, nếu có thể, hãy sử dụng một phần tử <button> thực trong trường hợp này.
Quy tắc 4: Không ẩn các phần tử có thể lấy tiêu điểm
Đừng thêm role= "presentation" hoặc aria-hidden= "true" vào những phần tử cần có tiêu điểm, kể cả những phần tử có tabindex= "0". Khi bạn thêm các vai trò và trạng thái này vào các phần tử, hệ thống sẽ gửi một thông báo đến AT rằng các phần tử này không quan trọng và cần bỏ qua chúng. Điều này có thể gây nhầm lẫn hoặc làm gián đoạn người dùng đang cố gắng tương tác với một phần tử.
Không: Ẩn các phần tử có thể lấy tiêu điểm
<div aria-hidden="true"> <button>Submit</button> </div>
Nên: Hiển thị các phần tử có thể lấy tiêu điểm
<div> <button>Submit</button> </div>
Quy tắc 5: Sử dụng tên dễ đọc cho các phần tử tương tác
Bạn cần truyền đạt mục đích của một phần tử tương tác cho người dùng trước khi họ biết cách tương tác với phần tử đó. Đảm bảo rằng tất cả các phần tử đều có tên thành phần hỗ trợ tiếp cận cho những người dùng thiết bị hỗ trợ tiếp cận.
Tên có thể truy cập có thể là nội dung được đặt trong một phần tử (trong trường hợp <a>), văn bản thay thế hoặc nhãn.
Đối với mỗi đoạn mã mẫu sau, tên thành phần hỗ trợ tiếp cận là "Giày bốt da màu đỏ".
<!-- A plain link with text between the link tags. -->
<a href="shoes.html">Red leather boots</a>
<!-- A linked image, where the image has alt text. -->
<a href="shoes.html"><img src="shoes.png" alt="Red leather boots"></a>
<!-- A checkbox input with a label. -->
<input type="checkbox" id="shoes">
<label for="shoes">Red leather boots</label>
Có nhiều cách để kiểm tra tên thành phần hỗ trợ tiếp cận, bao gồm cả việc kiểm tra cây hỗ trợ tiếp cận bằng Chrome DevTools hoặc kiểm thử bằng trình đọc màn hình.
ARIA trong HTML
Mặc dù sử dụng các phần tử HTML là phương pháp hay nhất, nhưng bạn có thể thêm các phần tử ARIA trong một số trường hợp. Ví dụ: bạn có thể ghép ARIA với HTML trong các mẫu cần mức độ hỗ trợ AT cao hơn do các hạn chế về môi trường hoặc làm phương pháp dự phòng cho các phần tử HTML không được tất cả trình duyệt hỗ trợ đầy đủ.
Tất nhiên, có những đề xuất về việc triển khai ARIA trong HTML. Quan trọng nhất là bạn không nên ghi đè các vai trò HTML mặc định, giảm sự dư thừa và lưu ý đến các tác dụng phụ không mong muốn.
Hãy xem một số ví dụ.
Không: Chỉ định sai vai trò.
<a role="heading">Read more</a>
Nên: Sử dụng đúng vai trò và nội dung mô tả bổ sung về đường liên kết.
<a aria-label="Read more about some awesome article title">Read More</a>
Không: Thêm vai trò dư thừa.
<ul role="list">...</ul>
Nên: Giảm sự dư thừa.
<ul>...</ul>
Không: Bỏ lỡ các tác dụng phụ tiềm ẩn.
<details> <summary role="button">more information</summary> ... </details>
Việc cần làm: Xử lý các tác dụng phụ.
<details> <summary>more information</summary> ... </details>
Độ phức tạp của ARIA
ARIA rất phức tạp và bạn phải luôn thận trọng khi sử dụng. Mặc dù các ví dụ về mã trong bài học này khá đơn giản, nhưng việc tạo các mẫu tuỳ chỉnh dễ tiếp cận có thể nhanh chóng trở nên phức tạp.
Có nhiều điều cần chú ý, bao gồm nhưng không giới hạn ở: tương tác bằng bàn phím, giao diện cảm ứng, hỗ trợ AT/trình duyệt, nhu cầu dịch thuật, các hạn chế về môi trường, mã cũ và lựa chọn ưu tiên của người dùng. Một chút kiến thức về lập trình có thể gây bất lợi hoặc đơn giản là gây phiền toái nếu được sử dụng không đúng cách.
Ngoài những cảnh báo đó, khả năng tiếp cận kỹ thuật số không phải là tình huống tất cả hoặc không có gì mà là một phổ cho phép một số vùng xám như thế này. Có thể có nhiều giải pháp lập trình "chính xác", tuỳ thuộc vào tình huống. Điều quan trọng là bạn phải tiếp tục học hỏi, kiểm thử và cố gắng làm cho thế giới kỹ thuật số của chúng ta trở nên cởi mở hơn với tất cả mọi người.