Login

Accessibility (a11y) cho web developer: bắt đầu từ những điều đơn giản

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Accessibility (thường viết tắt là a11y) là việc xây dựng website sao cho mọi người đều dùng được, kể cả người khiếm thị, khiếm thính, khó cử động tay, hay chỉ đơn giản là đang dùng điện thoại dưới ánh nắng chói. Tin tốt là phần lớn việc cần làm không phức tạp, chủ yếu là viết HTML đúng cách và chú ý vài chi tiết.

Vì sao nên quan tâm?

  • Nhiều người dùng phụ thuộc vào công nghệ hỗ trợ như trình đọc màn hình hoặc điều khiển bằng bàn phím.
  • Khả năng tiếp cận cũng giúp cả người dùng thông thường: chữ dễ đọc, nút dễ bấm, cấu trúc rõ ràng.
  • Nhiều thực hành tốt về a11y trùng với SEO và chất lượng mã.
  • Ở một số lĩnh vực và quốc gia, tiếp cận được còn là yêu cầu pháp lý hoặc hợp đồng. Hãy tìm hiểu quy định áp dụng cho dự án của bạn.

1. HTML ngữ nghĩa trước hết

Quy tắc quan trọng nhất của ARIA là: nếu có thẻ HTML gốc làm đúng việc, hãy dùng nó, đừng tự chế bằng div. Thẻ button tự có vai trò, focus được bằng bàn phím và kích hoạt bằng Enter, Space. Thẻ a với href cho điều hướng. Thẻ nav, main, header, footer tạo các vùng để người dùng trình đọc màn hình nhảy nhanh. Tiêu đề h1 đến h6 đúng thứ bậc giúp họ nắm cấu trúc trang.

<!-- Tệ: div giả làm nút -->
<div class='nut' onclick='gui()'>Gửi</div>

<!-- Tốt -->
<button type='button' onclick='gui()'>Gửi</button>

2. Dùng được bằng bàn phím

Hãy thử tắt chuột và dùng phím Tab, Shift+Tab, Enter, Space, Esc để thao tác toàn trang. Kiểm tra:

  • Mọi phần tử tương tác đều focus được theo thứ tự hợp lý.
  • Luôn có dấu hiệu focus nhìn thấy được. Đừng viết outline: none mà không thay bằng kiểu khác. Dùng :focus-visible để chỉ hiện khi dùng bàn phím.
  • Hộp thoại (modal) giữ focus bên trong khi mở, đóng được bằng Esc và trả focus về nút đã mở nó.
  • Có liên kết "Bỏ qua đến nội dung chính" ở đầu trang cho người dùng bàn phím.
:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

3. Văn bản thay thế cho hình ảnh

Ảnh mang thông tin cần alt mô tả ngắn gọn nội dung và mục đích. Ảnh trang trí dùng alt='' để trình đọc màn hình bỏ qua. Nút chỉ có biểu tượng cần nhãn:

<button type='button' aria-label='Đóng hộp thoại'>×</button>

4. Màu sắc và độ tương phản

Chữ cần đủ tương phản với nền. Bộ hướng dẫn WCAG nêu mức tối thiểu khoảng 4,5 trên 1 cho chữ thường (cấp AA), thấp hơn một chút cho chữ lớn. Nhiều công cụ kiểm tra tương phản có sẵn trong DevTools. Ngoài ra, đừng chỉ dùng màu để truyền thông tin: lỗi form không nên chỉ khác ở màu đỏ, hãy thêm biểu tượng hoặc chữ.

5. Form dễ dùng

  • Mỗi ô nhập có label liên kết bằng for và id.
  • Thông báo lỗi nêu rõ vấn đề và cách sửa, gắn với ô bằng aria-describedby.
  • Báo lỗi động bằng vùng role='alert' hoặc aria-live để trình đọc màn hình thông báo.
  • Dùng đúng type và autocomplete.
<label for='email'>Email</label>
<input id='email' type='email' aria-describedby='loi-email' aria-invalid='true'>
<p id='loi-email' role='alert'>Email chưa đúng định dạng</p>

6. ARIA khi thật sự cần

ARIA bổ sung ý nghĩa cho các thành phần tùy biến phức tạp như tab, menu thả xuống, bộ chọn ngày. Một vài thuộc tính hay gặp: aria-expanded cho trạng thái mở hoặc đóng, aria-controls liên kết nút với vùng nó điều khiển, aria-hidden để ẩn khỏi công nghệ hỗ trợ. Nhưng ARIA chỉ thêm thông tin, không thêm hành vi: nếu bạn gán role='button' cho div, bạn vẫn phải tự xử lý bàn phím. Dùng sai ARIA còn tệ hơn không dùng.

7. Tôn trọng tùy chọn của người dùng

  • Dùng đơn vị rem cho cỡ chữ để tôn trọng cỡ chữ người dùng thiết lập. Trang vẫn dùng được khi phóng to đến 200 phần trăm.
  • Hỗ trợ prefers-reduced-motion để giảm chuyển động.
  • Vùng bấm đủ lớn trên màn hình cảm ứng.
  • Video có phụ đề, âm thanh có bản ghi lời thoại khi có thể.

Cách kiểm tra

  1. Dùng bàn phím duyệt cả trang.
  2. Chạy Lighthouse hoặc các tiện ích kiểm tra a11y để bắt lỗi dễ phát hiện. Công cụ tự động chỉ phát hiện được một phần vấn đề.
  3. Thử một trình đọc màn hình như NVDA (Windows, miễn phí) hoặc VoiceOver (tích hợp trong thiết bị Apple) với các thao tác chính.
  4. Phóng to trang và thử ở nhiều kích thước màn hình.

Kết luận

Hãy xem a11y như một phần của chất lượng, không phải tính năng thêm vào cuối. Bắt đầu với HTML ngữ nghĩa, bàn phím, alt, tương phản và form có nhãn, bạn đã giải quyết được phần lớn vấn đề thường gặp.

Nếu muốn học xây giao diện đúng chuẩn ngay từ nền tảng, hãy xem các khóa học trên codebem.com.

author_photo
Nguyễn Đình Cường

0 comment