Khả năng truy cập HTML
Khả năng truy cập HTML
Luôn lưu ý đến khả năng truy cập khi viết mã HTML!
Cung cấp cho người dùng một cách tốt để điều hướng và tương tác với trang web của bạn. Làm cho mã HTML của bạn có ngữ nghĩa nhất có thể.
HTML ngữ nghĩa
HTML ngữ nghĩa có nghĩa là sử dụng các phần tử HTML chính xác cho mục đích chính xác của chúng càng nhiều càng tốt. Các phần tử ngữ nghĩa là các phần tử có ý nghĩa; nếu bạn cần một nút, hãy sử dụng phần tử <button> (chứ không phải phần tử <div> ).
HTML ngữ nghĩa cung cấp ngữ cảnh cho trình đọc màn hình để đọc to nội dung của trang.
Với ví dụ về nút trong tâm trí:
- các nút có kiểu dáng phù hợp hơn theo mặc định
- trình đọc màn hình xác định nó là một nút
- có thể tập trung
- có thể nhấp vào
Những người chỉ dựa vào điều hướng bằng bàn phím cũng có thể truy cập được một nút; nó có thể nhấp được bằng cả chuột và phím, đồng thời có thể gắn thẻ vào giữa (sử dụng phím tab trên bàn phím).
Ví dụ về các phần tử phi ngữ nghĩa : <div> và <span> - Không cho biết gì về nội dung của nó.
Ví dụ về các phần tử ngữ nghĩa : <form> , <table> , và <article> - Xác định rõ ràng nội dung của nó.
Tiêu đề rất quan trọng
Tiêu đề được xác định bằng thẻ <h1> đến <h6> :
Ví dụ
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6> Hãy tự mình thử »Công cụ tìm kiếm sử dụng các tiêu đề để lập chỉ mục cấu trúc và nội dung trang web của bạn.
Người dùng lướt qua các trang của bạn theo tiêu đề của nó. Điều quan trọng là sử dụng các tiêu đề để thể hiện cấu trúc tài liệu và mối quan hệ giữa các phần khác nhau.
Trình đọc màn hình cũng sử dụng đầu đề làm công cụ điều hướng. Các loại tiêu đề khác nhau xác định đường viền của trang. Tiêu đề <h1> nên được sử dụng cho các tiêu đề chính, tiếp theo là các tiêu đề <h2> , sau đó là <h3> ít quan trọng hơn, v.v.
Lưu ý: Chỉ sử dụng tiêu đề HTML cho tiêu đề. Không sử dụng tiêu đề để làm cho văn bản LỚN hoặc in đậm .
Văn bản thay thế
Thuộc tính alt cung cấp văn bản thay thế cho hình ảnh nếu người dùng vì lý do nào đó không thể xem nó (do kết nối chậm, lỗi trong thuộc tính src hoặc nếu người dùng sử dụng trình đọc màn hình).
Giá trị của thuộc tính alt sẽ mô tả hình ảnh:
Ví dụ
<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">
Hãy tự mình thử » Nếu trình duyệt không tìm thấy hình ảnh, nó sẽ hiển thị giá trị của thuộc tính alt :
Khai báo ngôn ngữ
Bạn phải luôn bao gồm thuộc tính lang bên trong thẻ <html> để khai báo ngôn ngữ của trang Web. Điều này nhằm hỗ trợ các công cụ tìm kiếm và trình duyệt.
Ví dụ sau chỉ định tiếng Anh là ngôn ngữ:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Sử dụng ngôn ngữ rõ ràng
Luôn sử dụng ngôn ngữ rõ ràng, dễ hiểu. Ngoài ra, hãy cố gắng tránh các ký tự mà trình đọc màn hình không thể đọc rõ ràng. Ví dụ:
- Giữ câu càng ngắn càng tốt
- Tránh dấu gạch ngang. Thay vì viết 1-3, hãy viết 1 đến 3
- Tránh viết tắt. Thay vì viết tháng hai, hãy viết tháng hai
- Tránh những từ lóng
Tạo văn bản liên kết tốt
Văn bản liên kết phải giải thích rõ ràng thông tin mà người đọc sẽ nhận được khi nhấp vào liên kết đó.
Ví dụ về liên kết tốt và xấu:
Lưu ý: Trang này là phần giới thiệu về khả năng truy cập web. Hãy truy cập Hướng dẫn trợ năng của chúng tôi để biết thêm chi tiết.
