Về hướng dẫn WCAG 2.2 – Mục 1.3.6 Xác định mục đích (Level AAA)
Mở đầu
Tiêu chí “1.3.6 Xác định mục đích” trong WCAG 2.2 yêu cầu rằng mục đích của các thành phần giao diện người dùng, biểu tượng và khu vực trong nội dung được triển khai bằng ngôn ngữ đánh dấu phải có thể được xác định một cách lập trình. Tiêu chí này rất quan trọng nhằm giúp các công nghệ hỗ trợ nhận diện đúng mục đích của những thành phần đó và cung cấp hỗ trợ phù hợp cho người dùng.
Trong bài viết này, chúng tôi sẽ hướng dẫn chi tiết cách triển khai cụ thể bằng HTML, CSS và JavaScript dành cho người mới bắt đầu.
1. Lý do cần xác định mục đích
Các biểu tượng, nút bấm và khu vực (vùng) cung cấp thông tin một cách trực quan cần được xác định vai trò và mục đích một cách lập trình. Nhờ đó, có thể hỗ trợ những người dùng sau đây:
- Người khiếm thị: Nhờ công nghệ hỗ trợ truyền đạt mục đích của từng thành phần, việc thao tác và hiểu nội dung trở nên dễ dàng hơn.
- Người có khuyết tật nhận thức: Việc gán ý nghĩa rõ ràng giúp việc sử dụng nội dung trở nên dễ dàng hơn.
2. Phương pháp triển khai
a. Sử dụng ARIA Landmark để xác định các khu vực trên trang
Bằng cách sử dụng ARIA Landmark, có thể xác định các khu vực chính trong trang.
Ví dụ HTML
<header role="banner">
<h1>Hướng dẫn về khả năng truy cập web</h1>
</header>
<nav role="navigation" aria-label="Điều hướng chính">
<ul>
<li><a href="#section1">Phần 1</a></li>
<li><a href="#section2">Phần 2</a></li>
</ul>
</nav>
<main role="main">
<section id="section1">
<h2>Nội dung của Phần 1</h2>
<p>Nội dung chính được chứa ở đây.</p>
</section>
</main>
<footer role="contentinfo">
<p>© 2024 Hướng dẫn về khả năng truy cập web</p>
</footer>
Điểm chính
- Sử dụng các thuộc tính như role=“banner”, role=“main”, role=“navigation” để xác định các khu vực chính của trang.
- Thêm nhãn bằng aria-label để mô tả cụ thể mục đích của khu vực.
b. Làm rõ mục đích của biểu tượng
Khi truyền đạt thông tin chỉ bằng biểu tượng, sử dụng aria-label hoặc thuộc tính alt để trình đọc màn hình có thể truyền đạt mục đích.
Ví dụ HTML
<button aria-label="Tìm kiếm">
<img src="search-icon.png" alt="Tìm kiếm">
</button>
Điểm chính
- aria-label đóng vai trò truyền đạt mục đích của biểu tượng cho trình đọc màn hình.
- Luôn thêm thuộc tính alt cho biểu tượng hình ảnh.
c. Xác định mục đích của các thành phần biểu mẫu
Sử dụng aria-required hoặc aria-invalid cho các thành phần biểu mẫu để làm rõ trạng thái và mục đích.
Ví dụ HTML
<form>
<label for="email">Địa chỉ email：</label>
<input type="email" id="email" name="email" aria-required="true">
<label for="password">Mật khẩu：</label>
<input type="password" id="password" name="password" aria-required="true" aria-invalid="false">
</form>
Điểm chính
- Sử dụng aria-required=“true” để cho biết đây là một trường bắt buộc phải nhập.
- Sử dụng aria-invalid=“true” để truyền đạt trạng thái lỗi.
d. Tận dụng cú pháp ngữ nghĩa HTML
Bằng cách tận dụng các phần tử ngữ nghĩa của HTML5, có thể dễ dàng xác định cấu trúc trang và mục đích của từng phần.
Ví dụ HTML
<article>
<header>
<h2>Tiêu đề bài viết</h2>
</header>
<p>Nội dung bài viết sẽ được hiển thị tại đây.</p>
</article>
Điểm chính
- Sử dụng các thẻ như <article>, <aside>, <section> để làm rõ ý nghĩa của nội dung.
3. Các lỗi thường gặp và biện pháp khắc phục
a. Không chỉ rõ mục đích của biểu tượng
Trường hợp lỗi
<button>
<img src="search-icon.png">
</button>
- Trình đọc màn hình không thể truyền đạt ý nghĩa của biểu tượng.
Biện pháp cải thiện
<button aria-label="Tìm kiếm">
<img src="search-icon.png" alt="Tìm kiếm">
</button>
b. Không sử dụng landmark (khu vực đánh dấu)
Trường hợp lỗi
<div id="header">
<h1>Tiêu đề trang web</h1>
</div>
Biện pháp cải thiện
<header role="banner">
<h1>Tiêu đề trang web</h1>
</header>
4. Lợi ích của khả năng truy cập (accessibility)
a. Cải thiện khả năng hỗ trợ trình đọc màn hình
Khi công nghệ hỗ trợ truyền đạt chính xác vai trò và mục đích của từng thành phần, người dùng khiếm thị sẽ dễ dàng thao tác với nội dung hơn.
b. Nâng cao trải nghiệm người dùng
Khi mục đích được làm rõ, có thể cung cấp giao diện dễ thao tác một cách trực quan cho cả người dùng có khuyết tật nhận thức và người mới bắt đầu.
Tóm tắt
Tiêu chí “1.3.6 Xác định mục đích” trong WCAG 2.2 là một tiêu chuẩn quan trọng nhằm nâng cao khả năng truy cập bằng cách cho phép xác định mục đích của các thành phần và khu vực một cách lập trình.
Điểm triển khai chính
- Sử dụng ARIA Landmark để xác định các khu vực.
- Sử dụng aria-label và thuộc tính alt để làm rõ mục đích của biểu tượng và nút bấm.
- Sử dụng thuộc tính aria-* để chỉ rõ trạng thái của các thành phần biểu mẫu (như bắt buộc nhập, lỗi, v.v.).
- Sử dụng HTML ngữ nghĩa để làm rõ cấu trúc của trang.
Bằng cách áp dụng những điều này, bạn có thể bắt đầu tạo ra nội dung web dễ sử dụng cho mọi người!
Chúng tôi đã phát hành UUU Web Accessibility Widget Tool, công cụ giúp dễ dàng triển khai khả năng truy cập web. Nếu bạn quan tâm đến việc cải thiện khả năng truy cập, hãy xem thêm thông tin chi tiết.