Kiến thức cơ bản về khả năng tiếp cận web — Xây dựng trang web cho mọi người

Hơn một tỷ người trên toàn thế giới đang sống với một dạng khuyết tật nào đó. Con số này chiếm khoảng 15% dân số toàn cầu. Trong số họ có những người mù hoặc khiếm thị, người điếc hoặc lãng tai, người có khuyết tật vận động, khác biệt về nhận thức, hoặc các tình trạng tạm thời như gãy tay hay đau nửa đầu.

Khi chúng ta xây dựng trang web mà không xem xét đến những thực tế này, chúng ta không chỉ gây bất tiện. Chúng ta đang khóa cửa không cho mọi người tiếp cận thông tin, dịch vụ và cơ hội mà người khác coi là điều đương nhiên. Khả năng tiếp cận không phải là một tính năng. Đó là trách nhiệm.

Khả năng tiếp cận web có nghĩa là gì

Khả năng tiếp cận web có nghĩa là thiết kế và phát triển trang web sao cho người khuyết tật có thể nhận biết, hiểu, điều hướng và tương tác với chúng. Điều này cũng có nghĩa là họ có thể đóng góp cho web.

Điều này vượt xa trình đọc màn hình. Khả năng tiếp cận bao gồm:

• Thị giác: mù, thị lực kém, mù màu
• Thính giác: điếc, lãng tai
• Vận động: hạn chế vận động tinh, run tay, liệt
• Nhận thức: chứng khó đọc, ADHD, khó khăn về trí nhớ, khuyết tật học tập
• Tạm thời và tình huống: gãy cổ tay, ánh nắng chói trên màn hình, môi trường ồn ào, internet chậm

Điểm mấu chốt: thiết kế tiếp cận mang lại lợi ích cho tất cả mọi người. Phụ đề giúp ích trong không gian ồn ào. Độ tương phản cao giúp ích dưới ánh sáng mạnh. Điều hướng bằng bàn phím giúp ích cho người dùng nâng cao. Văn bản rõ ràng giúp ích cho người không phải là người bản ngữ. Khả năng tiếp cận không phải là chế độ đặc biệt — đó là thiết kế tốt.

Tiêu chuẩn WCAG

Hướng dẫn Tiếp cận Nội dung Web (WCAG) là tiêu chuẩn quốc tế về khả năng tiếp cận web, được W3C công bố. Phiên bản hiện tại là WCAG 2.2, được tổ chức xung quanh bốn nguyên tắc được biết đến với từ viết tắt POUR:

Nhận biết được (Perceivable)

Thông tin phải được trình bày theo cách mà tất cả người dùng đều có thể nhận biết.

• Văn bản thay thế: mọi hình ảnh cần có thuộc tính alt mô tả nội dung. Hình ảnh trang trí sử dụng alt="".
• Phụ đề và bản ghi: nội dung video cần phụ đề; nội dung âm thanh cần bản ghi.
• Cấu trúc thích ứng: nội dung phải có ý nghĩa khi loại bỏ kiểu dáng. Sử dụng HTML ngữ nghĩa (<h1>, <nav>, <main>, <article>).
• Nội dung phân biệt được: đủ tương phản màu sắc, văn bản có thể thay đổi kích thước, không truyền tải thông tin chỉ bằng màu sắc.

Vận hành được (Operable)

Người dùng phải có thể vận hành giao diện.

• Truy cập bằng bàn phím: mọi phần tử tương tác phải có thể tiếp cận và sử dụng được chỉ bằng bàn phím. Không có bẫy chuột.
• Đủ thời gian: nếu nội dung có giới hạn thời gian, người dùng phải có thể kéo dài hoặc tắt chúng.
• Không kích hoạt co giật: tránh nội dung nhấp nháy hơn ba lần mỗi giây.
• Có thể điều hướng: tiêu đề trang rõ ràng, cấu trúc tiêu đề hợp lý, liên kết bỏ qua điều hướng, chỉ báo tiêu điểm hiển thị.

Dễ hiểu (Understandable)

Nội dung và giao diện phải dễ hiểu.

• Văn bản dễ đọc: chỉ định ngôn ngữ trang (thuộc tính lang). Sử dụng ngôn ngữ rõ ràng, đơn giản khi có thể.
• Hành vi có thể dự đoán: điều hướng phải nhất quán. Trang không được thay đổi ngữ cảnh bất ngờ.
• Hỗ trợ nhập liệu: gắn nhãn rõ ràng cho các trường biểu mẫu. Cung cấp thông báo lỗi hữu ích giải thích vấn đề và cách khắc phục.

Bền vững (Robust)

Nội dung phải đủ bền vững để hoạt động với các công nghệ hiện tại và tương lai.

• HTML hợp lệ: đánh dấu ngữ nghĩa chính xác mà công nghệ hỗ trợ có thể diễn giải một cách đáng tin cậy.
• Tên, vai trò, giá trị: các thành phần tùy chỉnh phải công khai mục đích của chúng cho API khả năng tiếp cận (qua ARIA khi cần).

Mức độ tuân thủ

WCAG định nghĩa ba mức:

Hầu hết các luật pháp trên thế giới yêu cầu tuân thủ Mức AA. Đây là mức bạn nên hướng tới.

Rào cản phổ biến và cách khắc phục

Thiếu văn bản alt trên hình ảnh

Vấn đề: người dùng trình đọc màn hình nghe thấy "hình ảnh" hoặc không nghe thấy gì.

Giải pháp: thêm văn bản alt mô tả cho mọi hình ảnh có thông tin. Với hình ảnh trang trí, sử dụng alt="" để trình đọc màn hình bỏ qua chúng.

<!-- Good -->
<img
  src="chart.png"
  alt="Bar chart showing a 40% increase in sales from January to June 2025"
/>

<!-- Decorative -->
<img src="divider.svg" alt="" />

Tương phản màu sắc không đủ

Vấn đề: người khiếm thị hoặc mù màu không thể đọc được văn bản.

Giải pháp: đảm bảo tỷ lệ tương phản tối thiểu 4,5:1 cho văn bản thường và 3:1 cho văn bản lớn (18px+ hoặc 14px đậm). Sử dụng công cụ kiểm tra tương phản để xác minh các tổ hợp màu của bạn.

Thiếu nhãn biểu mẫu

Vấn đề: người dùng trình đọc màn hình không biết trường biểu mẫu dùng để làm gì.

Giải pháp: mỗi trường nhập liệu cần một phần tử <label> hiển thị được liên kết qua thuộc tính for.

<!-- Good -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" />

<!-- Bad: placeholder is not a label -->
<input type="email" placeholder="Email address" />

Không có điều hướng bằng bàn phím

Vấn đề: người dùng không thể sử dụng chuột bị mắc kẹt.

Giải pháp: sử dụng các phần tử HTML gốc (<button>, <a>, <select>) vốn có thể truy cập bằng bàn phím theo mặc định. Nếu bạn xây dựng các thành phần tùy chỉnh, hãy đảm bảo chúng có thể nhận tiêu điểm và phản hồi các sự kiện bàn phím. Không bao giờ xóa viền tiêu điểm mà không cung cấp giải pháp thay thế.

Thiếu cấu trúc trang

Vấn đề: người dùng trình đọc màn hình không thể điều hướng hiệu quả.

Giải pháp: sử dụng HTML ngữ nghĩa. Một <h1> mỗi trang, cấu trúc tiêu đề hợp lý (không bỏ cấp), mốc điều hướng (<nav>, <main>, <footer>).

Phương tiện tự động phát

Vấn đề: âm thanh bất ngờ gây rối cho người dùng trình đọc màn hình. Video tự động phát có thể gây co giật hoặc khó chịu.

Giải pháp: không bao giờ tự động phát âm thanh. Nếu video tự động phát, đảm bảo nó tắt tiếng theo mặc định và cung cấp nút tạm dừng.

Màu sắc là không đủ

Không bao giờ chỉ dựa vào màu sắc để truyền tải thông tin. Hãy cân nhắc:

• Trường biểu mẫu có viền đỏ cho lỗi cũng cần biểu tượng hoặc thông báo văn bản
• Biểu đồ có đường màu cũng cần hoa văn, nhãn hoặc chú giải
• Liên kết trong văn bản cần gạch chân hoặc dấu hiệu trực quan khác, không chỉ thay đổi màu sắc

Khoảng 8% nam giới và 0,5% nữ giới có một dạng thiếu hụt thị giác màu nào đó. Thiết kế với điều này trong tâm trí không phải là trường hợp ngoại lệ — đó là sự hòa nhập cơ bản.

Kiểm thử khả năng tiếp cận

Kiểm thử tự động

Các công cụ tự động phát hiện khoảng 30-40% vấn đề về khả năng tiếp cận. Đây là bước đầu tiên tốt, nhưng không phải giải pháp hoàn chỉnh.

• axe DevTools (tiện ích mở rộng trình duyệt) — quét trang và báo cáo vi phạm WCAG
• Lighthouse (tích hợp trong Chrome DevTools) — bao gồm kiểm tra khả năng tiếp cận
• WAVE (công cụ web) — lớp phủ trực quan hiển thị các vấn đề

Kiểm thử thủ công

Nhiều vấn đề về khả năng tiếp cận đòi hỏi đánh giá của con người:

• Kiểm thử bàn phím: rút chuột và điều hướng toàn bộ trang web bằng Tab, Enter, Escape và các phím mũi tên. Bạn có thể đến được mọi nơi không? Thứ tự tiêu điểm có hợp lý không?
• Kiểm thử trình đọc màn hình: thử VoiceOver (Mac), NVDA (Windows, miễn phí) hoặc TalkBack (Android). Nội dung có ý nghĩa khi được đọc to không?
• Kiểm thử phóng to: phóng to trình duyệt lên 200%. Bố cục có còn hoạt động không? Có nội dung nào bị cắt hoặc chồng chéo không?
• Giảm chuyển động: bật "giảm chuyển động" trong cài đặt hệ điều hành. Các hoạt ảnh có tôn trọng tùy chọn này không?

Kiểm thử với người dùng

Phản hồi có giá trị nhất đến từ những người thực sự sử dụng công nghệ hỗ trợ trong cuộc sống hàng ngày. Nếu ngân sách cho phép, hãy đưa người dùng khuyết tật vào quy trình kiểm thử của bạn.

Khả năng tiếp cận là một phổ, không phải ô đánh dấu

Khả năng tiếp cận không phải là dự án một lần với đích đến. Đó là thực hành liên tục. Trang web thay đổi, nội dung được thêm vào, và rào cản mới có thể xuất hiện với mỗi bản cập nhật.

Mục tiêu không phải là sự hoàn hảo. Mục tiêu là cải tiến liên tục và sự quan tâm chân thành đến những người sử dụng những gì bạn xây dựng. Bắt đầu với những thay đổi có tác động lớn nhất — tương phản màu sắc, văn bản alt, điều hướng bàn phím, nhãn biểu mẫu — và phát triển từ đó.

Mỗi rào cản bạn loại bỏ là một cánh cửa bạn mở ra.

Danh sách kiểm tra nhanh

• Tất cả hình ảnh có văn bản alt có ý nghĩa (hoặc alt="" nếu là trang trí)
• Tương phản màu sắc đạt WCAG AA (4,5:1 cho văn bản, 3:1 cho văn bản lớn)
• Tất cả trường biểu mẫu có nhãn hiển thị
• Trang web có thể điều hướng hoàn toàn bằng bàn phím
• Tiêu đề tuân theo cấu trúc phân cấp hợp lý
• Chỉ báo tiêu điểm hiển thị
• Ngôn ngữ trang được đặt (thuộc tính lang trên <html>)
• Không có thông tin nào chỉ được truyền tải bằng màu sắc
• Video có phụ đề
• Hoạt ảnh tôn trọng prefers-reduced-motion