10.1 Accessibility
Khả năng truy cập (accessibility) của nội dung web là một phần quan trọng trong thiết kế web hiện đại. Nó hướng tới việc đảm bảo rằng tất cả người dùng, bao gồm cả những người gặp khó khăn, có thể dễ dàng tương tác với các trang web.
Một trong những công cụ chính để đạt được mục tiêu này là các thuộc tính ARIA (Accessible Rich Internet Applications), giúp cải thiện khả năng truy cập của nội dung web, làm cho nó dễ hiểu và dễ tiếp cận hơn cho các công nghệ hỗ trợ, như các chương trình đọc màn hình.
ARIA là gì?
ARIA (Accessible Rich Internet Applications) là một tập hợp các thuộc tính đặc biệt có thể được thêm vào các phần tử HTML để cải thiện khả năng truy cập của chúng. Các thuộc tính này cung cấp thông tin bổ sung về cấu trúc và hành vi của các phần tử, giúp các công nghệ hỗ trợ hiểu và tương tác tốt hơn với nội dung web.
Các thuộc tính ARIA chính để cải thiện khả năng đọc văn bản:
Thuộc tính aria-label
Thuộc tính aria-label được sử dụng để cung cấp nhãn văn bản cho một phần tử, mà sẽ được đọc bởi chương trình đọc màn hình.
Thuộc tính này hữu ích khi phần tử không có nhãn hiển thị hoặc khi cần mô tả chi tiết hơn.
Ví dụ sử dụng:
<button aria-label="Đóng hộp thoại">X</button>
Thuộc tính aria-labelledby
Thuộc tính aria-labelledby kết nối một phần tử với một nhãn khác trên trang, sử dụng id của nhãn đó. Điều này hữu ích,
khi cần kết nối một phần tử với một nhãn đã tồn tại, cung cấp ngữ cảnh và mô tả.
Ví dụ sử dụng:
<h2 id="section-title">Tiêu đề phần</h2>
<p aria-labelledby="section-title">Đoạn văn bản này liên quan đến tiêu đề phần.</p>
Thuộc tính aria-describedby
Thuộc tính aria-describedby kết nối một phần tử với một hoặc nhiều phần tử khác chứa mô tả,
sử dụng id của chúng. Thuộc tính này hữu ích để cung cấp thêm thông tin hoặc ngữ cảnh cho phần tử.
Ví dụ sử dụng:
<input type="text" aria-describedby="input-description">
<p id="input-description">Nhập tên của bạn.</p>
10.2 Role
Thuộc tính role
Thuộc tính role xác định vai trò của một phần tử, chỉ định cho các công nghệ hỗ trợ cách hiểu phần tử này.
Có nhiều vai trò khác nhau, như button, navigation, main, article và nhiều hơn nữa.
Ví dụ sử dụng:
<nav role="navigation">
<ul>
<li><a href="#home">Trang chủ</a></li>
<li><a href="#about">Giới thiệu</a></li>
<li><a href="#contact">Liên hệ</a></li>
</ul>
</nav>
Thuộc tính aria-live
Thuộc tính aria-live được sử dụng cho nội dung cập nhật động. Nó thông báo cho chương trình đọc màn hình biết rằng nội dung
bên trong phần tử đã thay đổi và cần được thông báo. Các giá trị bao gồm off, polite và assertive.
Ví dụ sử dụng:
<div aria-live="polite">
<p>Thông tin quan trọng sẽ được hiển thị ở đây.</p>
</div>
Thuộc tính aria-hidden
Thuộc tính aria-hidden chỉ định cho các công nghệ hỗ trợ biết rằng phần tử có nên được truy cập bởi người dùng hay không.
Giá trị true sẽ ẩn phần tử khỏi các công nghệ hỗ trợ, trong khi giá trị false sẽ làm cho nó có thể truy cập được.
Ví dụ sử dụng:
<div aria-hidden="true">
<p>Văn bản này sẽ bị ẩn khỏi các chương trình đọc màn hình.</p>
</div>
Thuộc tính aria-expanded
Thuộc tính aria-expanded cho biết phần tử có đang mở rộng hoặc thu gọn. Nó thường được sử dụng trong các phần tử
điều khiển, như "accordions" và các menu thả xuống.
Ví dụ sử dụng:
<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>
<li><a href="#item1">Mục 1</a></li>
<li><a href="#item2">Mục 2</a></li>
<li><a href="#item3">Mục 3</a></li>
</ul>
Thuộc tính aria-controls
Thuộc tính aria-controls chỉ định phần tử nào được quản lý bởi phần tử hiện tại. Nó được sử dụng cùng với
các thuộc tính như aria-expanded để tạo các phần tử điều khiển tương tác.
Ví dụ sử dụng:
<button aria-controls="content" aria-expanded="false">Hiển thị/Ẩn</button>
<div id="content" hidden>
<p>Nội dung bị ẩn.</p>
</div>
GO TO FULL VERSION