Accessibility (tính tiếp cận) là khả năng mọi người đều có thể sử dụng trang web, kể cả người khiếm thị, khiếm thính, người già, hoặc người dùng thiết bị hỗ trợ như trình đọc màn hình (screen reader).
HTML có nhiều công cụ giúp tăng tính tiếp cận nếu bạn dùng đúng cách.
1. Vì sao cần quan tâm đến accessibility?
- Tôn trọng người dùng: không phải ai cũng có khả năng sử dụng chuột hoặc nhìn rõ màn hình.
- Tuân thủ tiêu chuẩn quốc tế: nhiều quốc gia yêu cầu website công cộng phải đảm bảo khả năng tiếp cận.
- Cải thiện SEO: trang dễ hiểu với người dùng cũng thường dễ hiểu với công cụ tìm kiếm.
2. Thêm mô tả ảnh bằng thuộc tính alt
<img src="logo.png" alt="Logo của công ty ABC">
Giải thích:
altlà mô tả thay thế hiển thị nếu ảnh không tải được, hoặc được đọc bởi trình đọc màn hình.- Viết
altrõ ràng, ngắn gọn nhưng có ý nghĩa.
Ví dụ sai:
<img src="logo.png" alt="ảnh">
Ví dụ đúng:
<img src="logo.png" alt="Logo công ty ABC màu xanh dương">
3. Gắn nhãn cho biểu mẫu bằng thẻ label
<label for="email">Email của bạn:</label>
<input type="email" id="email" name="email">
Giải thích:
labelgiúp người dùng biết trường nhập liệu có mục đích gì.for="email"phải trùng vớiid="email"của ô nhập.- Người dùng trình đọc màn hình sẽ nghe nhãn trước khi điền nội dung.
Không nên bỏ qua label, ngay cả khi có placeholder.
4. Dùng semantic tag để trình đọc hiểu rõ hơn
Khi bạn sử dụng các thẻ HTML ngữ nghĩa như:
<nav>– khu vực điều hướng<main>– nội dung chính<article>– nội dung độc lập<footer>– chân trang
…thì trình đọc màn hình có thể bỏ qua các phần không quan trọng hoặc chuyển nhanh đến phần chính, giúp người khiếm thị duyệt web dễ dàng hơn.
5. Bổ sung thuộc tính aria- (nâng cao)
Thẻ HTML còn hỗ trợ các thuộc tính ARIA (Accessible Rich Internet Applications). Đây là một bộ thuộc tính mở rộng, ví dụ:
<button aria-label="Mở menu chính">☰</button>
aria-labelgiúp gán mô tả cho phần tử mà không cần văn bản hiển thị.
Tuy nhiên, chỉ nên dùng ARIA khi thật cần thiết – ưu tiên dùng thẻ HTML ngữ nghĩa trước.
6. Màu sắc và kích thước chữ
Accessibility không chỉ là về code, mà còn là:
- Chữ đủ lớn để dễ đọc
- Độ tương phản màu cao (ví dụ: chữ đen trên nền trắng)
- Không chỉ dựa vào màu sắc để phân biệt thông tin (ví dụ: “màu đỏ là sai” không rõ ràng với người mù màu)
7. Ghi nhớ
| Yếu tố | Cách hỗ trợ accessibility |
|---|---|
| Ảnh | Dùng thuộc tính alt |
| Form | Gắn label đúng cách |
| Bố cục | Dùng thẻ semantic như main, nav, article |
| Nút, icon | Dùng aria-label nếu không có văn bản |
| Màu sắc | Tương phản tốt, không chỉ dùng màu để phân biệt |
| Kích thước | Đảm bảo chữ đủ lớn, dễ đọc |
8. Thực hành
Tạo file form-accessible.html:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Biểu mẫu có tính tiếp cận</title>
</head>
<body>
<h1>Liên hệ với chúng tôi</h1>
<form>
<label for="name">Họ tên:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Nội dung:</label><br>
<textarea id="message" name="message" rows="5"></textarea><br><br>
<button type="submit">Gửi</button>
</form>
</body>
</html>
Thảo luận