Đă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à yếu tố quan trọng để tất cả người dùng có thể sử dụng trang web một cách thoải mái. Trong đó, việc đánh dấu HTML có ảnh hưởng lớn đến khả năng tiếp cận. Sử dụng HTML đúng cách có thể tạo ra trang web dễ sử dụng cho người dùng sử dụng trình đọc màn hình hoặc thao tác bằng bàn phím, trong khi HTML sai có thể ảnh hưởng tiêu cực đến khả năng tiếp cận và làm giảm trải nghiệm của người dùng. Bài viết này sẽ so sánh các ví dụ HTML tốt và xấu, đồng thời giới thiệu các điểm cần chú ý để nâng cao khả năng tiếp cận.
So sánh HTML tốt và HTML xấu
1. Cách sử dụng tiêu đề
Ví dụ về HTML tốt
html
<h1>Tiêu đề web</h1>
<h2>Các phần chính</h2>
<h3>Các phần phụ</h3>
Lý do
- Sử dụng các thẻ tiêu đề (<h1> đến <h6>) theo đúng cấu trúc phân cấp.
- Tiêu đề giúp làm rõ cấu trúc của trang và giúp trình đọc màn hình dễ dàng nắm bắt nội dung.
- Giúp dễ dàng di chuyển giữa các phần bằng cách sử dụng bàn phím hoặc các công nghệ hỗ trợ.
Ví dụ về HTML xấu
html
<div class="title">Tiêu đề web</div>
<div class="section">Các phần chính</div>
<div class="sub-section">Các phần phụ</div>
Lý do
- Vì sử dụng thẻ <div> cho tiêu đề nên trình đọc màn hình không thể nhận diện chúng là tiêu đề.
- Thiếu đánh dấu thể hiện cấu trúc phân cấp đúng, làm cho cấu trúc của trang không rõ ràng.
2. Sử dụng văn bản thay thế (thuộc tính alt)
Ví dụ về HTML tốt
<img src="flower.jpg" alt="Hình ảnh hoa hồng đỏ">
Lý do Hình ảnh có văn bản thay thế (thuộc tính alt), giúp truyền tải nội dung hình ảnh cho người khiếm thị. Trình đọc màn hình có thể đọc đúng ý nghĩa của hình ảnh, giúp chia sẻ thông tin thị giác một cách chính xác.
Ví dụ về HTML xấu
<img src="flower.jpg" alt="">
Lý do Thuộc tính alt để trống, khiến nội dung của hình ảnh không thể hiểu được. Việc thiết lập văn bản thay thế phù hợp cho hình ảnh quan trọng là điều cần thiết. Nếu không, người khiếm thị sẽ không thể nhận được thông tin từ hình ảnh.
3. Văn bản liên kết
Ví dụ về HTML tốt
<a href="about.html">Đọc giới thiệu công ty</a>
Lý do
- Văn bản liên kết là “Đọc giới thiệu công ty,” giúp người dùng hiểu rõ nội dung của liên kết.
- Khi được đọc bởi trình đọc màn hình, mục đích của liên kết cũng sẽ được truyền đạt.
Ví dụ về HTML xấu
<a href="about.html">Nhấn vào đây</a>
Lý do
- Với “Nhấn vào đây,” nội dung của liên kết không rõ ràng, khiến người dùng phải tự tìm hiểu.
- Đối với người dùng trình đọc màn hình, những liên kết mơ hồ như vậy có thể gây ra sự nhầm lẫn.
4. Nhãn của biểu mẫu
Ví dụ về HTML tốt
<label for="name">Tên của bạn</label>
<input type="text" id="name" name="name">
Lý do
- Các trường nhập liệu của biểu mẫu được gán nhãn phù hợp, cho phép trình đọc màn hình đọc là “Tên của bạn”
- Nội dung của các trường nhập liệu được giải thích rõ ràng, giúp tất cả người dùng có thể sử dụng biểu mẫu một cách hợp lý.
Ví dụ về HTML xấu
<input type="text" placeholder="Tên của bạn">
Lý do
- Chỉ sử dụng thuộc tính placeholder, khiến người khiếm thính không thể nghe thấy nhãn phù hợp.
- Placeholder nên được sử dụng như gợi ý cho nội dung nhập liệu, không được thay thế cho nhãn.
5. Độ tương phản màu sắc
Ví dụ về HTML tố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.