Một ứng dụng chuyên nghiệp mã nguồn mở hoặc sản phẩm lớn luôn phải tuân thủ các chuẩn tiếp cận (Accessibility).
1. Độ tương phản màu sắc (Color Contrast)
Văn bản phải đủ tương phản với nền để người bị thị lực kém hoặc người đang dùng điện thoại dưới nắng gắt có thể đọc được.
- Chuẩn AA: Tỷ lệ tương phản ít nhất là 4.5:1.
- Công cụ: Dùng Chrome DevTools hoặc plugin "WAVE" để kiểm tra.
2. Semantic HTML: Hãy dùng đúng thẻ
Đừng dùng <div> cho tất cả mọi thứ.
- Dùng
<button>thay vì<div onClick={...}>. Button có thuộc tính tập trung (Focus) và hỗ trợ phím Enter/Space mặc định. - Dùng
<header>,<main>,<footer>,<nav>để Screen Readers (trình đọc màn hình) hiểu được cấu trúc trang.
3. Alt Text cho Hình ảnh
Mọi hình ảnh có ý nghĩa đều phải có thuộc tính alt.
- Bad:
<img src="pic.jpg" /> - Good:
<img src="revenue-chart.jpg" alt="Biểu đồ doanh thu tăng 20% trong quý 3" /> - Decorative: Nếu ảnh chỉ để trang trí, dùng
alt=""để trình đọc màn hình bỏ qua.
4. Keyboard Navigation (Điều hướng phím)
Người dùng chuyên nghiệp hoặc người không dùng được chuột sẽ dùng phím Tab để di chuyển.
- Focus Ring: Đừng bao giờ ẩn vòng focus (
outline: none) mà không có giải pháp thay thế. - Thứ tự Tab: Phải đi theo logic từ trên xuống dưới, từ trái qua phải.
5. Aria Labels
Dùng aria-label cho những phần mà label không hiển thị bằng chữ.
tsx:
<button aria-label="Close modal">
<XIcon />
</button>Kết luận
Xây dựng ứng dụng dễ tiếp cận làm tăng tệp khách hàng của bạn và cải thiện SEO (vì Bot của Google dùng tiêu chuẩn tương tự Screen Readers). Hãy bắt đầu với việc dùng đúng thẻ HTML, bạn đã hoàn thành 80% chặng đường a11y.