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

Tổng quan Về seri

1. [HTML Basic Tutorial 1] HTML Basic
2. [HTML Basic Tutorial 2] HTML Semantic
3. [HTML Basic Tutorial 3] Form and Validations
4. [HTML Basic Tutorial 4] Conventions and Best Practices
5. [HTML Basic Tutorial 5] Accessibility <==== You are here
6. [HTML Basic Tutorial 6] SEO Basic

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

Tổng quan về phần 5 -[HTML Basic Tutorial 5] Accessibility

1. Accessibility
2. Semantic HTML
3. Nội dung văn bản
4. Khai báo ngôn ngữ
5. Sử dụng thuộc tính alt với hình ảnh
6. Bố cục trang
7. Kết luận

Accessibility

Khi 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

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>).

• Non-Semantic: <div>Click Me</div>
• Semantic: <button>Click Me</button>

Bạn có thể đọc thêm về Sematic tại đây nhé!

Nội dung văn bản

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ụ:

• Các 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 của các trang web của bạn.
• Người dùng đọc lướt các trang của bạn bằng các tiêu đề của nó. Điều quan trọng là sử dụng các tiêu đề để hiển thị cấu trúc tài liệu và các mối quan hệ giữa các phần khác nhau.

Khai báo ngôn ngữ

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:

Sử dụng thuộc tính alt với hình ảnh

Khô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.

Bố cục trang

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.

Kết luận

• Cảm ơn các bạn đã đọc bài viết của mình. Hãy tiếp tục series của mình về HTML nhé. Cùng tìm hiểu về SEO Basic trong HTML như thế nào nha!
• Bất ký thắc mắc hay góp ý gì thì hãy comment hoặc inbox trực tiếp để mình cải thiện trong những bài viêt sau nha.

@hoangpn - Better every day!