Đây là lỗi thường xuất hiện ở các website được build nhanh, nhiều component, hoặc bị phụ thuộc quá nhiều vào style thay vì semantic HTML.
Thứ tự heading đúng chuẩn là gì
Các thẻ heading từ <h1> đến <h6> dùng để mô tả cấu trúc nội dung theo dạng phân cấp. Mỗi cấp heading đại diện cho một mức độ quan trọng trong nội dung.
Quy tắc cơ bản:
<h1>là tiêu đề chính của trang<h2>là các mục lớn bên dưới<h3>là mục con của<h2>- Không được nhảy cấp heading không cần thiết
Screen reader dựa vào cấu trúc này để cho phép người dùng “quét” nội dung nhanh theo heading.
Lỗi này xảy ra như thế nào
Lỗi Heading elements are not in a sequentially-descending order xuất hiện khi:
- Nhảy từ
<h1>sang<h4> - Dùng
<h3>mà không có<h2>trước đó - Dùng heading chỉ để tạo style, không quan tâm thứ tự
- Component được tái sử dụng nhưng heading không được kiểm soát
Ví dụ sai thường gặp
<h1>Trang sản phẩm</h1>
<h4>Mô tả</h4>
<h2>Thông tin chi tiết</h2>
Thứ tự trên làm screen reader hiểu sai cấu trúc nội dung, dù giao diện không thay đổi.
Ví dụ đúng chuẩn
<h1>Trang sản phẩm</h1>
<h2>Mô tả</h2>
<h2>Thông tin chi tiết</h2>
Nếu cần chia nhỏ nội dung bên trong:
<h3>Chất liệu</h3>
<h3>Kích thước</h3>
Vì sao dev hay mắc lỗi này
Nguyên nhân phổ biến nhất là dùng heading như một công cụ tạo style, thay vì công cụ mô tả cấu trúc.
- Muốn chữ to hơn nên dùng
<h4> - Không reset heading trong component
- CMS cho phép editor chọn heading tùy ý
- Không kiểm tra accessibility audit
Thực tế, kích thước chữ nên được kiểm soát bằng CSS, không phải bằng level heading.
Ảnh hưởng của lỗi này đến accessibility và SEO
Thứ tự heading sai gây ra nhiều vấn đề:
- Screen reader khó điều hướng nội dung
- Người dùng không thể hiểu nhanh cấu trúc trang
- Công cụ tìm kiếm hiểu sai mối quan hệ nội dung
- Điểm accessibility trong Lighthouse bị trừ
Đây là lỗi “âm thầm”, nhưng tác động lâu dài.
Cách khắc phục hiệu quả
- Luôn bắt đầu mỗi trang bằng một
<h1> - Không nhảy cấp heading nếu không có lý do rõ ràng
- Dùng CSS để điều chỉnh kích thước chữ
- Kiểm soát heading trong component tái sử dụng
- Audit heading structure định kỳ
Những sai lầm cần tránh
- Dùng heading để tạo style
- Có nhiều
<h1>không kiểm soát - Để CMS editor tự do chọn heading
- Fix audit bằng cách đổi tag bừa bãi
Lợi ích khi sửa lỗi thứ tự heading
Khi cấu trúc heading đúng chuẩn:
- Nội dung rõ ràng và dễ hiểu hơn
- Screen reader điều hướng nhanh và chính xác
- SEO ngữ nghĩa được cải thiện
- HTML sạch và dễ bảo trì hơn
Kết luận
Lỗi Heading elements are not in a sequentially-descending order không làm hỏng giao diện, nhưng làm hỏng cách máy và công nghệ hỗ trợ hiểu nội dung của bạn. Heading không phải là công cụ tạo style, mà là xương sống của cấu trúc nội dung. Chỉ cần dùng đúng thứ tự, bạn đã cải thiện đáng kể accessibility và semantic quality của toàn bộ trang.
Bình luận