ARIA và HTML

Hầu hết các nhà phát triển đều quen thuộc với ngôn ngữ đánh dấ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ể ít quen thuộc hơn với Các ứng dụng Internet đa dạng thức có thể truy cập (ARIA) (chính thức được gọi là WAI-ARIA): nó là gì, cách sử dụng, và khi nào không—sử dụng nó.

HTML và ARIA đóng vai trò quan trọng trong việc giúp các sản phẩm kỹ thuật số có thể tiếp cận được, đặ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 định dạng thay thế, chẳng hạn như chữ nổi hoặc văn bản sang lời nói (TTS).

Hãy cùng xem lại một phần lịch sử ngắn gọn của ARIA, lý do khiến ARIA quan trọng, thời điểm và cách thức sử dụng tốt nhất.

Giới thiệu về ARIA

ARIA được nhóm Sáng kiến hỗ trợ tiếp cận trên web (WAI) phát triển lần đầu tiên vào năm 2008. Đây là một tập hợp con của World Wide Web Consortium (W3C), tổ chức 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 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ủa các phần tử đó. Các thuộc tính này giao tiếp vai trò, trạng thái và thuộc tính với các công nghệ hỗ trợ thông qua các 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 thức có thể truy cập, xác định cách giúp người khuyết tật dễ dàng truy cập nội dung web và ứng dụng web. API này đặc biệt hữu ích với 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ệ 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 do trình duyệt tạo ra và dựa trên cây Mô hình đối tượng tài liệu (DOM) 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 để thể hiện nội dung mà các công nghệ hỗ trợ có thể hiểu được.

Việc riêng của ARIA không làm thay đổi chức năng hoặc hình thức của 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à nhà phát triển tự chịu trách nhiệm về việc thực hiện các thay đổi về mã và kiểu thích hợp để làm cho một phần tử dễ tiếp cận nhất có thể.

Ba đặc điểm chính của ARIA là vai trò, thuộc tính và trạng thái/giá trị.

Vai trò xác định vai trò của một phần tử hoặc chức năng của một phần tử 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/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ù cả ba phần tử của ARIA đều có thể dùng được trong một dòng mã, nhưng việc này là 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/giá trị của 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 kết hợp đúng cách ARIA vào cơ sở mã giúp đả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, Công cụ của Chrome cho nhà phát triển đã tạo một cách để xem toàn bộ cây hỗ trợ tiếp cận, giúp các nhà phát triển dễ dàng hiểu được cách mã của họ ảnh hưở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 khuyến nghị HTML5. Cùng với đó là một số thay đổi lớn, bao gồm cả việc thêm 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 nhiều hơn, một số phần nhất định của ARIA giờ đây không còn quan trọng nữa.

Khi trình duyệt hỗ trợ một thẻ HTML có vai trò ngầm ẩn với một ARIA tương đương, thì 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. Cho đến nay, những thuộc tính đó vẫn hữu ích.

Đ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, nhóm WAI đã phát triển 5 quy tắc của ARIA để giúp bạn quyết định cách cho phép các phần tử có thể truy cập được.

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ử vốn không giúp phần tử đó dễ tiếp cận hơn. Báo cáo khả năng tiếp cận thường niên WebAIM Million cho thấy rằng số lỗi phát hiện được trung bình trên các trang chủ có ARIA cao hơn 70% so với các trang không có ARIA, chủ yếu là do việc triển khai các thuộc tính ARIA không đúng cách.

Có những ngoại lệ đối với quy tắc này. Cần có ARIA khi phần tử HTML không hỗ trợ 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ó sẵn trong HTML. Tuy nhiên, những trường hợp này khan hiếm.

<a role="button">Submit</a>

<button>Submit</button>

Khi không chắc chắn, hãy sử dụng phần tử HTML 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 ngay từ đầu và không cần thêm ARIA bổ sung vào chúng. 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 phần tử hoạt động được trong trường hợp là các phần tử tương tác.

<h2 role="tab">Heading tab</h2>

<div role="tab"><h2>Heading tab</h2></div>

Làm ít công việc hơn và có mã hoạt động tốt hơn khi bạn sử dụng các phần tử HTML như mong muốn.

Quy tắc 3: Luôn hỗ trợ thao tác bằng bàn phím

Tất cả các chế độ điều khiển ARIA tương tác (chưa tắt) đề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 tâm điểm mà thường không nhận được tiêu điểm bàn phím. Tránh sử dụng các chỉ mục thẻ có số nguyên dương bất cứ khi nào có thể để ngăn chặn các vấn đề tiềm ẩn về thứ tự tiêu điểm bàn phím.

<span role="button" tabindex="1">Submit</span>

<span role="button" tabindex="0">Submit</span>

Quy tắc 4: Không ẩn các phần tử có thể làm tâm điểm

Đừng thêm role= "presentation" hoặc aria-hidden= "true" vào các phần tử cần có tâm đ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ử, thiết bị sẽ gửi thông báo đến AT rằng các phần tử này không quan trọng và bỏ qua chúng. Điều này có thể gây nhầm lẫn hoặc làm gián đoạn ý định tương tác của người dùng với một thành phần.

<div aria-hidden="true"><button>Submit</button></div>

<div><button>Submit</button></div>

Quy tắc 5: Sử dụng tên thành phần hỗ trợ tiếp cận cho các phần tử tương tác

Mục đích của một phần tử tương tác cần được truyền tải cho người dùng thì họ mới 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 dễ tiếp cận đối với những người sử dụng thiết bị AT.

Tên dễ tiếp cận có thể là nội dung được bao quanh bởi một phần tử (trong trường hợp là <a>), văn bản thay thế hoặc một nhãn.

Đối với mỗi mã mẫu sau đây, tên thành phần hỗ trợ tiếp cận là "Giày 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 của một phần tử, trong đó 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 tra cây bằng trình đọc màn hình.

ARIA trong HTML

Mặc dù tốt nhất là bạn nên sử dụng riêng các phần tử HTML, nhưng trong một số trường hợp, bạn có thể thêm các phần tử ARIA. Ví dụ: bạn có thể ghép nối ARIA với HTML trong các mẫu cần mức độ hỗ trợ AT cao hơn do những ràng buộc về môi trường hoặc dưới dạng phương pháp dự phòng cho các phần tử HTML không được mọi trình duyệt hỗ trợ đầy đủ.

Tất nhiên, có các đề xuất để triển khai ARIA trong HTML. Quan trọng nhất: không ghi đè các vai trò HTML mặc định, giảm tình trạng dư thừa và lưu ý về các tác dụng phụ không mong muốn.

Hãy cùng xem xét 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>

Mức độ 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ễ truy cập có thể nhanh chóng trở nên phức tạp.

Có nhiều điều bạn cần chú ý, bao gồm nhưng không giới hạn ở: hoạt động tương tác trên bàn phím, giao diện cảm ứng, khả năng hỗ trợ AT/trình duyệt, nhu cầu dịch, những hạn chế về môi trường, mã cũ và lựa chọn ưu tiên của người dùng. Việc lập trình một chút kiến thức có thể gây hại hoặc chỉ đơn giản là gây khó chịu nếu được sử dụng không đúng cách. Hãy nhớ giữ cho mã của bạn đơn giản.

Bên cạnh 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ả hay không, nó là một phạm vi cho phép một số vùng màu xám như thế này. Nhiều giải pháp lập trình có thể được coi là "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, thử nghiệm và cố gắng mở rộng thế giới kỹ thuật số của chúng ta trở nên rộng mở hơn cho tất cả mọi người.

Kiểm tra mức độ hiểu biết của bạn

Kiểm tra kiến thức của bạn về ARIA và HTML