Viết Component Accessible (a11y) chuẩn WAI-ARIA: Giúp website thân thiện với mọi đối tượng

Đừng biến website thành rào cản với người khuyết tật#

Rất nhiều lập trình viên frontend có thói quen biến thẻ <div> thành nút bấm:

<!-- SAI LẦM KINH ĐIỂN VỀ ACCESSIBILITY: -->
<div class="button" onClick={handleClick}>Bấm vào đây</div>

Người dùng bình thường dùng chuột có thể click được, nhưng người khiếm thị sử dụng phần mềm đọc màn hình (Screen Reader như NVDA hay VoiceOver) hoặc người chỉ dùng bàn phím (Keyboard-only users) sẽ hoàn toàn không thể tương tác hoặc nhận biết đây là một nút bấm!

Accessibility (a11y) không chỉ là trách nhiệm nhân văn mà còn là tiêu chuẩn bắt buộc của các đạo luật quốc tế (như ADA, EAA) và là yếu tố cộng điểm SEO lớn của Google.

4 Nguyên tắc cốt lõi khi xây dựng Accessible UI#

1. Luôn ưu tiên thẻ HTML ngữ nghĩa (Semantic HTML)#

Trước khi nghĩ đến việc thêm thuộc tính ARIA, hãy dùng đúng thẻ native:

• Dùng <button> cho nút bấm thay vì <div>.
• Dùng <a> cho liên kết chuyển trang.
• Dùng <dialog> cho hộp thoại modal.

2. Bắt buộc hỗ trợ điều hướng bằng phím Tab (Focus Management)#

Đảm bảo mọi phần tử tương tác đều có đường viền chỉ báo tiêu điểm (Focus Ring) rõ ràng:

/* Tuyệt đối KHÔNG BAO GIỜ viết outline: none mà không có style thay thế! */
button:focus-visible {
  outline: 2px solid #f97316;
  outline-offset: 2px;
}

3. Khai báo thuộc tính ARIA khi làm Custom Dropdown / Modal#

Nếu làm một menu thả xuống (Dropdown):

<button 
  id="menu-button"
  aria-haspopup="true" 
  aria-expanded="false" 
  aria-controls="menu-list"
>
  Tùy chọn
</button>

<ul id="menu-list" role="menu" aria-labelledby="menu-button" hidden>
  <li role="menuitem"><a href="/profile">Hồ sơ cá nhân</a></li>
  <li role="menuitem"><button>Đăng xuất</button></li>
</ul>

Góc thảo luận#

Website của công ty bạn đã từng được audit về Accessibility chưa? Bạn có thường xuyên dùng phím Tab để thử nghiệm điều hướng trang web của chính mình không?

Xem thêm nội dung liên quan:

• Học Thiết kế Web Chuẩn Quốc tế
• Review công cụ lập trình web