Accessibility (a11y): web cho TẤT CẢ MỌI NGƯỜI

Accessibility cơ bản: 5 phút setup, giá trị cả đời

Quy tắc	Làm gì	Ví dụ
Alt text cho hình	Mô tả hình ảnh cho screen reader	<img alt=“Biểu đồ doanh thu Q3 2026”>
Semantic HTML	Dùng đúng tag: nav, main, article, button	<button> thay vì <div onClick>
Keyboard navigation	Mọi thứ click được phải Tab được	Tab → Enter = click. Focus ring phải visible
Color contrast	Text đủ tương phản với background	Tỷ lệ ≥ 4.5:1 cho text thường, ≥ 3:1 cho text lớn
Form labels	Mỗi input phải có label liên kết	<label for=“email”>

// File: a11y.html
<!-- ❌ SAI: div giả làm button -->
<div class="btn" onclick="submit()">Gửi</div>

<!-- ✅ ĐÚNG: button thật, screen reader hiểu -->
<button type="submit" aria-label="Gửi form đăng ký">
  Gửi
</button>

<!-- ❌ SAI: hình không có alt -->
<img src="chart.png">

<!-- ✅ ĐÚNG: mô tả cho screen reader -->
<img src="chart.png" alt="Biểu đồ: doanh thu tăng 40% so với Q2">

<!-- ❌ SAI: input không có label -->
<input type="email" placeholder="Email">

<!-- ✅ ĐÚNG: label liên kết với input -->
<label for="email">Email</label>
<input id="email" type="email" placeholder="you@example.com">

Test accessibility: 2 cách nhanh nhất

(1) Tắt chuột — dùng Tab + Enter điều khiển app. Nếu bạn bị kẹt → user keyboard cũng kẹt. (2) Lighthouse audit — Chrome DevTools → Lighthouse → chọn Accessibility → chạy. Score < 90 = cần fix.