Semantic HTML cho A11y: Cách dùng thẻ đúng để screen reader hiểu đúng

Semantic HTML là lớp nền của A11y. Nếu markup đã đúng vai trò, rất nhiều vấn đề accessibility sẽ tự biến mất: screen reader hiểu cấu trúc, keyboard user có điểm bấm đúng, công cụ tìm kiếm đọc nội dung rõ hơn.

Vì sao semantic quan trọng?

Không phải mọi phần tử đều có tác dụng giống nhau. <button> có hành vi keyboard sẵn, <a> có ý nghĩa điều hướng, <label> gắn nhãn cho input, còn <main>, <nav>, <article> giúp chia vùng nội dung rõ hơn.

Nếu dùng <div> cho tất cả, bạn sẽ phải vá rất nhiều bằng JavaScript và ARIA. Đó là cách làm ngược.

Những thẻ nên ưu tiên

header, nav, main, footer cho landmark.
button, a, label, input, select, textarea cho interaction.
h1 đến h6 cho cấu trúc tài liệu.
section, article, aside cho vùng nội dung có ý nghĩa.
figure và figcaption cho ảnh/diagram có chú thích.

3 lỗi hay gặp

Dùng div role="button" thay vì button.
Nhảy heading từ H2 sang H4 chỉ để “đúng design”.
Gắn ARIA vào một markup đã sai thay vì sửa semantic gốc.

Ví dụ rewrite ngắn

<!-- Sai -->
<div class="btn" onclick="submitForm()">Gửi form</div>

<!-- Đúng -->
<button type="submit" class="btn">Gửi form</button>

Chỉ một dòng thay đổi nhưng bạn đã lấy lại keyboard support, focus style, và native semantics.

Bài nên đọc tiếp

SEO checklist trước khi publish

Title có từ khóa “Semantic HTML” và intent rõ.
Intro đi thẳng vào vấn đề, không lan man.
Heading chỉ dùng text thuần, không nhồi số thứ tự.
Ít nhất 2 internal links tới bài nền tảng và bài liên quan.
Media có mô tả thay vì chỉ là ảnh trang trí.

Tham khảo thêm: aria-labelledby – MDN