Đăng ký để truy cập
Đọc thêm nội dung này khi bạn đăng ký ngay hôm nay.
Khả năng tiếp cận web là cách thiết kế và xây dựng trang để nhiều người có thể sử dụng được, bao gồm người dùng trình đọc màn hình, người chỉ thao tác bằng bàn phím, người có thị lực kém hoặc người đang dùng thiết bị trong điều kiện không thuận lợi. Trong đó, HTML giữ vai trò nền tảng vì nó cho trình duyệt và công nghệ hỗ trợ biết đâu là tiêu đề, đâu là liên kết, đâu là trường nhập liệu và nội dung nào cần được đọc cho người dùng.
Nói ngắn gọn, HTML tốt không chỉ làm trang hiển thị đúng. HTML tốt còn làm cho ý nghĩa của nội dung rõ ràng. Bài viết này so sánh các ví dụ đúng và sai thường gặp, đồng thời giải thích vì sao từng cách viết ảnh hưởng đến trải nghiệm sử dụng.
HTML ảnh hưởng đến khả năng tiếp cận như thế nào?
Trước khi đi vào từng ví dụ, có thể xem HTML như bản đồ cấu trúc của trang. Người nhìn thấy giao diện có thể dựa vào kích thước chữ, màu sắc hoặc vị trí để đoán ý nghĩa. Nhưng công nghệ hỗ trợ cần các thẻ và thuộc tính HTML chính xác để truyền đạt lại cùng thông tin đó.
| Thành phần cần kiểm tra | Việc nên làm | Lý do |
|---|---|---|
| Tiêu đề | Dùng <h2>, <h3> theo thứ tự hợp lý trong phần nội dung | Giúp người dùng hiểu cấu trúc và di chuyển nhanh giữa các phần |
| Hình ảnh | Viết alt rõ nghĩa cho hình ảnh có nội dung | Giúp người không nhìn thấy hình ảnh vẫn nắm được thông tin quan trọng |
| Liên kết | Dùng văn bản liên kết mô tả đích đến | Giảm nhầm lẫn khi người dùng duyệt danh sách liên kết |
| Biểu mẫu | Gắn <label> với từng trường nhập liệu | Giúp người dùng biết trường đó yêu cầu thông tin gì |
| Màu sắc | Đảm bảo chữ và nền có độ tương phản dễ đọc | Hỗ trợ người có thị lực kém hoặc khó phân biệt màu |
| Thao tác | Đảm bảo các phần tương tác dùng được bằng bàn phím | Hỗ trợ người không sử dụng chuột |
So sánh HTML tốt và HTML xấu
1. Dùng tiêu đề theo đúng cấu trúc
Ví dụ đúng
<h1>Tiêu đề trang</h1>
<h2>Phần chính</h2>
<h3>Phần phụ</h3>Các thẻ tiêu đề từ <h1> đến <h6> cho biết cấp độ của từng phần. Trên WordPress, tiêu đề bài viết thường là H1, vì vậy phần thân bài nên bắt đầu từ H2 và dùng H3 cho các mục nhỏ bên trong.
Ví dụ sai
<div class="title">Tiêu đề trang</div>
<div class="section">Phần chính</div>
<div class="sub-section">Phần phụ</div>Các thẻ <div> chỉ tạo khối chung chung. Dù có thể được làm lớn hoặc in đậm bằng CSS, chúng không truyền đạt rằng đây là tiêu đề. Người dùng công nghệ hỗ trợ vì vậy khó nắm được bố cục của trang.
Nếu muốn tìm hiểu sâu hơn về cách dùng thẻ đúng ý nghĩa, hãy xem thêm bài viết về HTML ngữ nghĩa.
2. Viết văn bản thay thế cho hình ảnh có ý nghĩa
Ví dụ đúng
<img src="flower.jpg" alt="Hình ảnh hoa hồng đỏ">Thuộc tính alt là văn bản thay thế của hình ảnh. Trong ví dụ này, người không nhìn thấy hình ảnh vẫn biết nội dung chính là một bông hoa hồng đỏ.
Ví dụ sai
<img src="flower.jpg" alt="">Với hình ảnh đang truyền tải thông tin, để alt trống sẽ làm mất phần thông tin đó đối với người dùng dựa vào trình đọc màn hình. Khi viết alt, nên mô tả ngắn gọn nội dung cần thiết thay vì nhồi quá nhiều chi tiết không liên quan.
3. Dùng văn bản liên kết mô tả rõ đích đến
Ví dụ đúng
<a href="about.html">Đọc giới thiệu công ty</a>Văn bản liên kết cho biết người dùng sẽ đi đâu sau khi chọn liên kết. Điều này hữu ích với mọi người, đặc biệt là khi người dùng duyệt nhanh danh sách liên kết trên trang.
Ví dụ sai
<a href="about.html">Nhấn vào đây</a>Cụm từ “Nhấn vào đây” không tự nói lên mục đích của liên kết. Nếu trang có nhiều liên kết giống nhau, người dùng phải đọc thêm phần xung quanh để đoán ý nghĩa, làm trải nghiệm chậm và dễ nhầm lẫn hơn.
4. Gắn nhãn rõ ràng cho trường biểu mẫu
Ví dụ đúng
<label for="name">Tên của bạn</label>
<input type="text" id="name" name="name">Thẻ <label> giải thích trường nhập liệu dùng để làm gì. Khi for của nhãn khớp với id của trường nhập liệu, công nghệ hỗ trợ có thể liên kết hai phần này với nhau.
Ví dụ sai
<input type="text" placeholder="Tên của bạn">placeholder chỉ nên là gợi ý bổ sung, không nên thay thế nhãn. Khi người dùng bắt đầu nhập, gợi ý có thể biến mất; với một số cách sử dụng công nghệ hỗ trợ, trường nhập liệu cũng có thể không được giải thích rõ như khi có nhãn thật.
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.