Trợ năng (a11y) trong phát triển frontend với AI

🔄 Tóm tắt bài học: Trong bài học trước, bạn đã nắm vững thiết kế đáp ứng – kiểu chữ linh hoạt, hình ảnh đáp ứng và bố cục ưu tiên thiết bị di động. Giờ hãy đảm bảo các trang của bạn có thể sử dụng được cho tất cả mọi người, bao gồm cả những người điều hướng bằng bàn phím, trình đọc màn hình hoặc các công nghệ hỗ trợ khác.

Trợ năng không phải là một tính năng – mà là một thuộc tính chất lượng của tất cả code frontend tốt. Ước tính có khoảng 15-20% dân số toàn cầu mắc một dạng khuyết tật nào đó. Ngoài vấn đề đạo đức, Trợ năng còn là yêu cầu pháp lý ở nhiều khu vực pháp lý và cải thiện khả năng sử dụng cho tất cả mọi người.

Tham khảo nhanh WCAG

WCAG (Web Content Accessibility Guidelines) có 4 nguyên tắc:

Mức độ tuân thủ:

• A: Tối thiểu (đã loại bỏ các rào cản thiết yếu)
• AA: Tiêu chuẩn (hầu hết các tổ chức đều hướng đến mức này)
• AAA: Nâng cao (nghiêm ngặt nhất, không phải lúc nào cũng đạt được)

Điều hướng bằng bàn phím

Mọi yếu tố tương tác phải có thể truy cập bằng bàn phím:

Các nguyên tắc quản lý sự tập trung:

Prompt AI cho việc kiểm tra bàn phím:

Kiểm tra trợ năng bàn phím của HTML này: [DÁN]. Kiểm tra: (1) Tất cả các phần tử tương tác có nhận được tiêu điểm không? (2) Thứ tự tab có hợp lý không (phù hợp với thứ tự hiển thị)? (3) Các thành phần tùy chỉnh (menu drop-down, cửa sổ pop-up) có hỗ trợ những kiểu bàn phím dự kiến ​​không? (4) Có chỉ báo tiêu điểm hiển thị không? (5) Tiêu điểm có được quản lý chính xác cho nội dung động không (cửa sổ pop-up giữ tiêu điểm, đóng cửa sổ sẽ khôi phục tiêu điểm)?

ARIA: Khi HTML không đủ

Quy tắc ARIA: Sử dụng Semantic HTML trước. ARIA được sử dụng khi HTML gốc không thể hiện được kiểu tương tác.

Các thuộc tính ARIA phổ biến:

Màu sắc & Độ tương phản

Prompt AI để kiểm tra độ tương phản:

Kiểm tra tất cả các tổ hợp màu trên trang của tôi để đảm bảo tuân thủ WCAG AA. Màu sắc của tôi: văn bản #1f2937 trên nền #ffffff, liên kết #3b82f6 trên nền #ffffff, văn bản nút #ffffff trên nền nút #3b82f6. Đối với bất kỳ tổ hợp nào không đạt yêu cầu, hãy đề xuất màu sắc gần nhất đáp ứng yêu cầu.

Giảm chuyển động

Hãy tôn trọng người dùng thích ít hiệu ứng động hơn:

📍 Nơi dán: Mở ChatGPT (chat.openai.com), Claude (claude.ai) hoặc Gemini (gemini.google.com) và bắt đầu một cuộc trò chuyện mới.

📋 Cách sao chép prompt này: Nhấp vào bất kỳ đâu bên trong khối màu xám, nhấn Cmd+A sau đó Cmd+C (Mac) hoặc Ctrl+A sau đó Ctrl+C (Windows). Hoặc sử dụng biểu tượng sao chép xuất hiện.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

✏️ Cách điền thông tin chi tiết: Thay thế mỗi dấu ngoặc vuông [] và trình giữ chỗ trong ngoặc bằng thông tin cụ thể từ tình huống thực tế của bạn. Thông tin đầu vào mơ hồ sẽ tạo ra kết quả đầu ra mơ hồ — hãy cụ thể.

👀 Những gì bạn sẽ thấy: Trong vòng vài giây, AI sẽ trả về một phản hồi có cấu trúc dựa vào prompt ở trên. Hãy đọc kỹ và coi đó là bản nháp, không phải là câu trả lời cuối cùng.

📌 Nên làm gì với kết quả đầu ra: Lưu phản hồi vào file Notes. Chọn đề xuất có tác động cao nhất và thực hiện nó trong tuần này — đừng cố gắng làm mọi thứ cùng một lúc.

⚠️ Nếu thấy không ổn: Nếu các đề xuất có vẻ chung chung, hãy dán nội dung sau: "Hãy cụ thể hơn với ngữ cảnh thực tế của tôi. Bỏ qua những lời khuyên chung chung đi." Nếu bỏ qua các chi tiết quan trọng bạn đã cung cấp, hãy hỏi: "Bạn đã bỏ sót [X] trong ngữ cảnh của tôi — hãy thực hiện lại với đó là ràng buộc chính."

✅ Kiểm tra nhanh: Trang của bạn sử dụng một biểu tượng trang trí (hiển thị xếp hạng sao bằng biểu tượng cảm xúc ngôi sao). Các ngôi sao có cần văn bản thay thế (alt text) không?

Câu trả lời: Nội dung trang trí truyền tải thông tin cần có văn bản thay thế. Nếu các ngôi sao đại diện cho xếp hạng 4/5, hãy thêm aria-label="Rating: 4 out of 5" vào container và aria-hidden="true" vào từng ký tự ngôi sao riêng lẻ. Hình ảnh thuần túy trang trí không truyền tải thông tin nào nên có alt trống: alt="". Sự khác biệt nằm ở chỗ hình ảnh có truyền tải thông tin có ý nghĩa hay không.

Quy trình kiểm tra khả năng trợ năng

Những điểm chính cần ghi nhớ

• Kiểm thử tự động chỉ phát hiện được 30-40% vấn đề trợ năng: Sau khi chạy axe/Lighthouse, hãy điều hướng thủ công qua trang bằng phím Tab (kiểm thử bàn phím), sử dụng trình đọc màn hình (kiểm thử thông báo) và phóng to lên 200% (kiểm thử trực quan) để tìm ra các vấn đề mà công cụ bỏ sót.
• Nội dung động (thông báo, lỗi biểu mẫu, trạng thái load) không hiển thị với trình đọc màn hình trừ khi được thông báo: Sử dụng aria-live="polite" cho các cập nhật thông tin và role="alert" cho những thông báo khẩn cấp — đây là yêu cầu về trợ năng thường bị bỏ sót nhất trong code do AI tạo ra.
• Độ tương phản màu sắc có thể đo lường được và không thể thương lượng: 4.5:1 cho văn bản bình thường, 3:1 cho văn bản lớn (WCAG AA) — khi thiết kế không đáp ứng được độ tương phản, hãy đề xuất màu sắc tuân thủ gần nhất thay vì một màu hoàn toàn khác để duy trì ý đồ thiết kế trong khi vẫn đáp ứng tiêu chuẩn.