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, bạn có thể chưa quen thuộc với Ứng dụng Internet đa dạng thức có thể truy cập (ARIA) (trước đây gọi là WAI-ARIA): bản chất, cách sử dụng và thời điểm – cũng như thời điểm không – sử dụng ARIA.
HTML và ARIA đóng vai trò quan trọng trong việc hỗ trợ tiếp cận các sản phẩm kỹ thuật số, đặ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ư Braille hoặc Chuyển văn bản sang lời nói (TTS).
Hãy cùng xem lại một số thông tin ngắn gọn về ARIA, lý do ARIA quan trọng, cũng như thời điểm và cách tốt nhất để sử dụng ARIA.
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 Web Accessibility Initiative (WAI) (Tiến trình hỗ trợ tiếp cận trên web) – một nhóm con của tổ chức The World Wide Web Consortium (W3C) tổng quát, chịu trách nhiệm 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 hỗ trợ tiếp cận. Các thuộc tính này thông báo vai trò, trạng thái và thuộc tính cho các công nghệ hỗ trợ thông qua API hỗ trợ tiếp cận có trong các trình duyệt hiện đại. Quá trình 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 thức có hỗ trợ tiếp cận, xác định cách giúp người khuyết tật dễ dàng tiếp cận nội dung web và ứng dụng web hơn. Đặc biệt, công cụ này giúp ích cho nội dung động và các chế độ điều khiển 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ệ có 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 không đầy đủ để tạo trải nghiệm tốt hơn cho những người sử dụng công cụ hỗ trợ tiếp cận bằng cách thay đổi, hiển thị và mở rộng các phần của cây hỗ trợ tiếp cận.
Cây hỗ trợ tiếp cận do 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 nội dung 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 của một phần tử. Điều đó có nghĩa là chỉ người dùng công cụ hỗ trợ tiếp cận 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à nhà phát triển phải chịu trách nhiệm thực hiện các thay đổi về mã và kiểu phù hợp để giúp một thành phần dễ tiếp cận 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 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 hiện tại hoặc giá trị dữ liệu 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ả ba 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 chồng các vai trò, thuộc tính và trạng thái/giá trị ARIA cho đến khi bạn hoàn thành mục tiêu hỗ trợ tiếp cận cuối cùng. Việc tích hợp chính xác ARIA vào cơ sở mã đảm bảo rằng người dùng công cụ hỗ trợ tiếp cận 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, Công cụ dành cho nhà phát triển Chrome đã 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 mã của họ tác động như thế nào đế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 về HTML5. Cùng với đó là một số thay đổi lớn, bao gồm việc bổ sung các phần tử điểm tham chiếu 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 việc tăng cường hỗ trợ trình duyệt, 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, bạn thường 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 HTML nào. Những thuộc tính đó vẫn hữu ích cho đến thời điểm hiện tại.
Điều này đưa chúng ta đến câu hỏi cuối cùng: Khi nào bạn nên sử dụng ARIA? Rất may, nhóm WAI đã phát triển năm quy tắc của ARIA để giúp bạn quyết định cách làm cho các phần tử trở nên dễ tiếp cận.
Quy tắc 1: Không sử dụng ARIA
Bạn không đọc nhầm đâu. Việc thêm ARIA vào một phần tử không tự nhiên giúp phần tử đó dễ tiếp cận hơn. Báo cáo hằng năm của WebAIM về khả năng hỗ trợ tiếp cận cho hàng triệu trang web cho thấy rằng các trang chủ có ARIA có trung bình nhiều lỗi hơn 70% so với các trang chủ không có ARIA, chủ yếu là do việc triển khai không đúng cách các thuộc tính ARIA.
Quy tắc này có một số ngoại lệ. Bạn bắt buộc phải sử dụng ARIA khi một phần tử HTML không có tính năng hỗ trợ tiếp cận. Điều này 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/hành vi mong muốn không có trong HTML. Tuy nhiên, những trường hợp này hiếm khi xảy ra.
<a role="button">Submit</a>
<button>Submit</button>
Khi không chắc chắn, 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 và không cần thêm ARIA vào. Trên thực tế, các nhà phát triển sử dụng ARIA thường phải thêm mã bổ sung để các thành phần hoạt động trong trường hợp các thành phần tương tác.
<h2 role="tab">Heading tab</h2>
<div role="tab"><h2>Heading tab</h2></div>
Giảm bớt công việc và có mã hoạt động hiệu quả hơn khi bạn 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 thành phần điều khiển ARIA tương tác (không bị tắt) phải có thể truy cập 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ẻ bằng số nguyên dương bất cứ khi nào có thể để ngăn các vấn đề về thứ tự tiêu điểm bàn phím có thể xảy ra.
<span role="button" tabindex="1">Submit</span>
<span role="button" tabindex="0">Submit</span>
<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
Không thêm role= "presentation" hoặc aria-hidden= "true" vào các phần tử cần có tiêu điểm, bao gồm cả các phần tử có tabindex= "0". Khi bạn thêm các vai trò/trạng thái này vào các phần tử, hệ thống sẽ gửi 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. Điều này có thể gây nhầm lẫn hoặc làm gián đoạn người dùng khi họ cố gắng tương tác với một phần tử.
<div aria-hidden="true"><button>Submit</button></div>
<div><button>Submit</button></div>
Quy tắc 5: Sử dụng tên dễ đọc cho các thành phần tương tác
Bạn cần truyền đạt mục đích của một thành phần tương tác cho người dùng trước khi họ biết cách tương tác với thành phần đó. Đảm bảo rằng tất cả các thành phần đều có tên có thể truy cập cho những người sử dụng thiết bị hỗ trợ tiếp cận.
Tên có thể truy cập được có thể là nội dung được bao quanh bởi một phần tử (trong trường hợp của <a>), văn bản thay thế hoặc nhãn.
Đối với mỗi mã mẫu sau đây, tên có thể truy cập là "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 hỗ trợ tiếp cận của một phần tử, bao gồm cả việc kiểm tra cây hỗ trợ tiếp cận bằng Công cụ của Chrome cho nhà phát triển hoặc kiểm thử bằng trình đọc màn hình.
ARIA trong HTML
Mặc dù phương pháp hay nhất là sử dụng riêng các phần tử HTML, nhưng bạn có thể thêm các phần tử ARIA trong một số trường hợp nhất định. Ví dụ: bạn có thể ghép nối ARIA với HTML trong các mẫu cần hỗ trợ AT ở cấp cao hơn do các quy tắc ràng buộc môi trường hoặc làm phương thức 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, bạn có thể tham khảo các đề xuất về cách triển khai ARIA trong HTML. Quan trọng nhất: đừng ghi đè các vai trò HTML mặc định, giảm bớt sự dư thừa và chú ý đến các hiệu ứng phụ ngoài ý muốn.
Hãy xem một số ví dụ.
<a role="heading">Read more</a>
<a aria-label="Read more about some awesome article title">Read More</a>
<ul role="list">...</ul>
<ul>...</ul>
<details> <summary role="button">more information</summary> ... </details>
<details> <summary>more information</summary> ... </details>
Tính 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 có thể truy cập 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, các quy tắc ràng buộc 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 lập trình có thể gây hại hoặc đơn giản là gây phiền toái nếu bạn sử dụng không đúng cách. Hãy nhớ giữ cho mã của bạn đơn giản.
Ngoài những cảnh báo đó, khả năng hỗ trợ tiếp cận kỹ thuật số không phải là một tình huống tất cả hoặc không có gì – đó là một phổ cho phép một số khu vực màu xám như thế này. Có thể coi nhiều giải pháp lập trình là "chính xác", tuỳ thuộc vào tình huống. Điều quan trọng là bạn tiếp tục học hỏi, thử nghiệm 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.
Kiểm tra mức độ hiểu biết
Kiểm tra kiến thức của bạn về ARIA và HTML
Phương pháp nào sau đây là phương pháp hay nhất để tạo nút có thể truy cập?
<div id="saveChanges" aria-role="button" aria-pressed="false" tabindex="0">Go to shop</div><a id="saveChanges" aria-label="Some awesome article title">Go to shop</a><button id="saveChanges" type="button">Go to shop</button>