Hello các bạn, mình là Hoàng, hôm nay mình sẽ chia sẻ với các bạn 1 seri quay về cơ bản với lập trình web nhé. Cũng như thường lệ, chúng ta có cấu trúc các phần như sau
Bắt đầu luôn cho nóng, phần 5 chúng ta đi tìm hiểu về Accessibility với cấu trúc tổng quan như sau
alt
với hình ảnhKhi thiết kế và tạo các trang web, điều quan trọng là các trang web có thể truy cập được đối với mọi đối tượng. Đặc biệt, do tính chất trực quan và năng động của các trang web mà bạn sẽ tạo ra, điều quan trọng là phải đảm bảo rằng trang web của bạn cũng sẽ có ý nghĩa đối với người dùng khiếm thị.
Viết HTML với khả năng tiếp cận tốt, ung 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 có ngữ nghĩa càng tốt, để mã dễ hiểu cho khách truy cập và trình đọc màn hình.
Semantic HTML (hay Viết HTML có ngữ nghĩa) là cách viết HTML mà sử dụng các thẻ HTML ứng với nội dung được chứa trong nó chứ không phải sử dụng các thẻ theo cách mà chúng ta muốn nội dung trong đó được hiển thị. nếu bạn cần một nút, hãy sử dụng phần tử <button>
(chứ không phải <div>
).
<div>Click Me</div>
<button>Click Me</button>
Bạn có thể đọc thêm về Sematic tại đây nhé!
Một trong những khả năng tiếp cận tốt nhất mà người dùng đọc màn hình có thể có là một cấu trúc nội dung tuyệt vời với các tiêu đề, đoạn văn, danh sách,…
Ví dụ:
Khai báo một ngôn ngữ rất quan trọng đối với trình đọc màn hình và công cụ tìm kiếm và được khai báo bằng thuộc tính lang. Sử dụng như sau để hiển thị một trang web bằng tiếng Anh:
alt
với hình ảnhKhông bắt buộc phải có thuộc tính alt
cho hình ảnh, nhưng nó sẽ giúp ích cho trang web của bạn khi gặp sự cố (ví dụ như đặt sai đường dẫn, sự cố về internet khiến không thể hiển thị hình ảnh,…). Mặt khác nó còn cung cấp ngữ caảnh cho trình đọc màn hình. Do đó, nội dung của thuộc tính alt
là mô tả những gì hình ảnh chứa.
Trước kia, mọi người thường tạo bố cục trang bằng các bảng HTML - sử dụng các ô bảng khác nhau để chứa tiêu đề, chân trang, thanh bên, cột nội dung chính, v.v. Đây không phải là một ý tưởng hay vì trình đọc màn hình có thể sẽ gây nhầm lẫn bài đọc, đặc biệt nếu bố cục phức tạp và có nhiều bảng lồng nhau.
Trình đọc màn hình sẽ hiểu đây là 1 bảng tài liệu, nó sẽ không phân biệt được các bố cục của trang.
Để cải thiện điều này, từ phiên bản của HTML5 đã cung cấp một số các phần tử phân đoạn bố cục. Bạn có thể tạo bố cục chỉ sử dụng các <div>
lồng nhau, nhưng tốt hơn là sử dụng các yếu tố phân đoạn thích hợp để bọc điều hướng chính (<nav>
), chân trang của bạn (<footer>
), lặp lại các đơn vị nội dung (<article>
),… Điều này không chỉ làm cho bố cục rõ ràng hơn mà còn không gây nhầm lẫn cho trình đọc màn hình.
@hoangpn - Better every day!
Quick Links
Social Media