accessibility

Tổng quan về accessibility skill

accessibility skill làm được gì

accessibility skill giúp bạn thiết kế, triển khai và rà soát UI dễ tiếp cận theo WCAG 2.2 Level AA. Skill này tập trung vào việc chuyển ý đồ sản phẩm thành các quyết định ngữ nghĩa cụ thể: phần tử native, vai trò ARIA, nhãn, gợi ý, hành vi focus và các thuộc tính accessibility theo từng nền tảng cho Web, iOS và Android.

Ai nên cài accessibility skill

accessibility skill phù hợp nhất với frontend engineer, đội design system, UX auditor và product designer cần hướng dẫn có thể áp dụng ngay vào triển khai, thay vì một checklist accessibility chung chung. Nó đặc biệt hữu ích khi bạn làm accessibility cho UX Audit và cần đi từ nhận định kiểu “flow này có vẻ rủi ro” sang các hướng khắc phục cụ thể.

Skill này giúp bạn hoàn thành công việc gì

Công việc thực sự cần giải quyết không chỉ là “làm cho đúng chuẩn”. Mục tiêu là ánh xạ đúng một component hoặc flow vào accessibility tree để người dùng công nghệ hỗ trợ nhận được đúng role, name, state, thứ tự và mô hình tương tác. Skill này nhấn mạnh vào semantic mapping, quản lý focus, đặt nhãn và các nguyên tắc POUR thay vì chỉ tóm tắt chính sách ở mức khái quát.

Vì sao nên chọn thay vì dùng prompt thông thường

Một prompt thông thường thường chỉ trả về lời khuyên accessibility mơ hồ. accessibility skill hữu ích hơn khi bạn cần lối suy luận có cấu trúc, chẳng hạn: xác định role của component trước, ưu tiên semantic native, sau đó mới chốt nhãn, trạng thái, hành vi bàn phím và cách xử lý focus. Nhờ vậy, việc dùng accessibility trở nên dễ hành động hơn trong review triển khai và audit.

Cách dùng accessibility skill

Ngữ cảnh cài đặt và nên đọc gì trước

Cài skill qua quy trình skills của bạn, sau đó mở skills/accessibility/SKILL.md trước tiên. Skill này không có script bổ sung hay file tham chiếu đi kèm, nên gần như toàn bộ hướng dẫn hữu ích đều nằm trong tài liệu duy nhất đó. Hãy đọc theo thứ tự:

1. When to Use
2. Core Concepts
3. How It Works
4. phần nói về việc xác định role của component

Đây là một bản cài accessibility khá gọn: thiết lập ít vướng víu, nhưng bạn nên chuẩn bị sẵn ngữ cảnh sản phẩm còn thiếu để tự bổ sung.

accessibility skill cần những đầu vào nào

accessibility skill hoạt động tốt nhất khi bạn cung cấp:

• nền tảng: Web, iOS, hoặc Android
• component hoặc flow: button, modal, form, tabs, menu, carousel, v.v.
• mục tiêu người dùng: người dùng đang muốn làm gì
• cách triển khai hiện tại: HTML, JSX, SwiftUI/UIKit, Jetpack Compose/View XML, hoặc ảnh chụp màn hình kèm ghi chú hành vi
• ràng buộc: giới hạn của design system, markup legacy, widget bên thứ ba
• mục tiêu audit: WCAG 2.2 AA, hỗ trợ bàn phím, hành vi screen reader, thứ tự focus, target size, hoặc vấn đề về naming/state

Đầu vào yếu: “Make this accessible.”
Đầu vào mạnh: “Audit this React modal for WCAG 2.2 AA. Check semantic role, accessible name, focus trap, escape behavior, initial focus, return focus, and screen reader announcement. Suggest corrected JSX.”

Biến một mục tiêu còn mơ hồ thành prompt mạnh

Để dùng accessibility skill hiệu quả hơn, hãy dùng cấu trúc prompt như sau:

• Xác định role của UI và liệu có nên thay phần hiện tại bằng phần tử native hay không.
• Mô tả accessibility tree kỳ vọng.
• Liệt kê thông tin bắt buộc về label, role, state, value và hint.
• Xác định hành vi bàn phím và focus.
• Chỉ ra các rủi ro theo WCAG 2.2 AA.
• Trả về code đã chỉnh sửa kèm phần tóm tắt audit ngắn.

Ví dụ:
“Use the accessibility skill to review this custom dropdown on Web. First decide whether it should be a native select, button + listbox, or another pattern. Then provide the expected ARIA, keyboard interactions, focus movement, visible focus requirements, target size concerns, and revised code.”

Quy trình gợi ý cho audit và triển khai

Khi làm accessibility cho UX Audit, hãy bắt đầu ở cấp độ flow rồi mới đi sâu vào component:

1. gọi tên tác vụ và rủi ro thất bại
2. xác định đúng role thực sự của từng phần tử có tương tác
3. kiểm tra lựa chọn semantic native trước
4. xác minh labels, names, values và states
5. rà soát thứ tự bàn phím và khả năng thấy focus
6. kiểm tra về mặt khái niệm cách screen reader sẽ đọc thông báo
7. yêu cầu code hoặc spec đã được khắc phục

Nếu bạn đang triển khai thay vì audit, hãy yêu cầu skill đưa ra acceptance criteria để bàn giao cho engineering và QA, chứ không chỉ là lời khuyên dạng văn xuôi.

Câu hỏi thường gặp về accessibility skill

accessibility skill có phù hợp cho người mới bắt đầu không?

Có, nếu bạn đã nắm các kiến thức cơ bản về xây UI. Skill này giải thích các ý tưởng cốt lõi của accessibility theo cách dễ hiểu, nhưng nó không phải một khóa nhập môn đầy đủ về WCAG. Nó phù hợp hơn như công cụ hỗ trợ triển khai có hướng dẫn, thay vì là nguồn học duy nhất của bạn.

Skill này có đủ để đưa ra quyết định cài đặt không?

Phần lớn là đủ. Skill có phạm vi rõ ràng, quy trình cụ thể và tập trung vào khía cạnh kỹ thuật thực tế. Hạn chế chính nằm ở độ sâu của gói cài: không có ví dụ đi kèm, test script hay file tham chiếu riêng cho từng nền tảng. Nếu bạn muốn nhiều tài sản tái sử dụng sẵn có, skill này sẽ hơi mỏng; nếu bạn cần hướng dẫn nhanh để áp dụng ngay, nó rất dễ tiếp nhận.

accessibility skill khác gì so với prompt accessibility chung chung?

Khác biệt nằm ở cách đóng khung vấn đề. Hướng dẫn accessibility này đặt trọng tâm vào nhận diện role, semantic mapping, tư duy theo accessibility tree, nhãn và quản lý focus. Prompt chung chung thường nhảy thẳng đến thuộc tính ARIA, dễ dẫn tới overengineering hoặc chọn sai pattern.

Khi nào không nên dùng skill này?

Không nên chỉ dựa vào accessibility skill cho legal sign-off, kiểm thử tương thích công nghệ hỗ trợ phức tạp, hoặc các edge case quá chuyên biệt trên nền tảng native. Skill này mạnh nhất ở phần tư duy thiết kế và code, chứ không thay thế được việc test thủ công với thiết bị thật, screen reader thật và quy trình chỉ dùng bàn phím.

Cách cải thiện accessibility skill

Cung cấp ngữ cảnh UI đầy đủ hơn, không chỉ gửi snippet code

Yếu tố tác động lớn nhất đến chất lượng là ngữ cảnh. Hãy nêu rõ tác vụ người dùng, control đó đổi trạng thái hay điều hướng, giao diện đang hiển thị gì về mặt thị giác và hiện tại đang hỏng ở đâu. Khuyến nghị accessibility phụ thuộc vào hành vi, không chỉ vào markup. Một div có thể đại diện cho nhiều pattern khác nhau; skill cho kết quả tốt hơn khi bạn mô tả rõ kiểu tương tác mong muốn.

Yêu cầu chọn pattern trước khi hỏi về ARIA

Một lỗi rất thường gặp là cố áp ARIA lên sai loại component. Để cải thiện đầu ra accessibility, hãy hỏi: “What pattern is this actually?” Ví dụ, hãy yêu cầu skill quyết định giữa button native, link, disclosure, tab, dialog hoặc listbox trước khi đi vào remediation. Cách này thường giúp tránh tạo custom widget không cần thiết.

Yêu cầu đầu ra theo từng phần sẵn sàng cho triển khai

Để dùng accessibility skill hiệu quả hơn, hãy yêu cầu phản hồi có cấu trúc:

• issue found
• user impact
• WCAG 2.2 concern
• recommended semantic pattern
• exact code change
• test steps

Định dạng này phù hợp hơn để bàn giao cho engineering, QA hoặc người phụ trách design system so với một câu trả lời dài dạng bài luận.

Lặp lại với bằng chứng lỗi thực tế

Sau lượt đầu tiên, hãy cải thiện đầu ra của accessibility skill bằng cách phản hồi lại những chi tiết cụ thể: nội dung screen reader đọc ra, keyboard trap, thiếu visible focus hoặc số đo touch target. Skill sẽ giá trị hơn nhiều khi bạn dùng nó như một vòng lặp tinh chỉnh cho các phát hiện từ UX audit, thay vì một lần kiểm tra compliance là xong.