Claude audit Accessibility (WCAG) — Kiểm tra khả năng truy cập website

Accessibility (a11y) hay khả năng truy cập website đảm bảo mọi người, bao gồm người khuyết tật, đều có thể sử dụng sản phẩm số của bạn. Theo ước tính, khoảng 15-20% dân số thế giới có ít nhất một dạng khuyết tật. Tại Việt Nam, con số này khoảng 7.8 triệu người. Ngoài trách nhiệm xã hội, accessibility tốt còn cải thiện SEO, tăng chuyển đổi và mở rộng tệp khách hàng tiềm năng. Claude có thể hỗ trợ bạn kiểm tra và cải thiện accessibility website một cách có hệ thống theo tiêu chuẩn WCAG 2.1.

Tổng quan WCAG 2.1 AA

WCAG (Web Content Accessibility Guidelines) là bộ tiêu chuẩn quốc tế do W3C ban hành, được chia thành 3 mức: A (cơ bản), AA (khuyến nghị cho hầu hết website), và AAA (cao nhất). Phần lớn các quy định pháp luật và yêu cầu từ khách hàng enterprise đều nhắm đến mức AA.

Bốn nguyên tắc POUR

WCAG được xây dựng trên 4 nguyên tắc cốt lõi, viết tắt là POUR.

• Perceivable (Nhận biết được): Thông tin và giao diện phải được trình bày theo cách mà mọi người đều có thể nhận biết. Bao gồm: text alternative cho hình ảnh, captions cho video, đủ tương phản màu sắc, và khả năng resize text
• Operable (Thao tác được): Giao diện phải thao tác được bằng nhiều phương thức khác nhau. Bao gồm: điều hướng bằng bàn phím, đủ thời gian đọc nội dung, không gây co giật, và cung cấp nhiều cách tìm nội dung
• Understandable (Hiểu được): Thông tin và cách vận hành giao diện phải dễ hiểu. Bao gồm: text dễ đọc, trang hoạt động theo cách dự đoán được, và giúp người dùng tránh và sửa lỗi
• Robust (Vững chắc): Nội dung phải đủ vững để được diễn giải đáng tin cậy bởi nhiều loại user agent, kể cả công nghệ hỗ trợ. Bao gồm: HTML valid, tương thích với screen readers và các assistive technologies

Claude review HTML cho Accessibility Issues

Cách trực tiếp nhất để sử dụng Claude cho a11y audit là paste HTML code và yêu cầu Claude phân tích theo tiêu chuẩn WCAG.

Kiểm tra accessibility của đoạn HTML sau theo WCAG 2.1 AA:

[Dán HTML code của trang hoặc component]

Hãy phân tích và báo cáo theo format:

1. Danh sách vi phạm (Violations):
   Mỗi vi phạm cần có:
   - WCAG criterion bị vi phạm (ví dụ: 1.1.1 Non-text Content)
   - Mức độ nghiêm trọng: Critical / Major / Minor
   - Vị trí trong code (dòng hoặc selector)
   - Mô tả vấn đề
   - Code sửa đề xuất (before/after)

2. Cảnh báo (Warnings):
   - Các điểm cần kiểm tra thủ công
   - Các trường hợp có thể vi phạm tùy context

3. Best practices bị bỏ qua:
   - Không vi phạm WCAG nhưng nên cải thiện

4. Tóm tắt:
   - Điểm a11y tổng thể (thang 0-100)
   - Top 3 vấn đề cần sửa trước
   - Ước tính thời gian sửa

Audit toàn trang với danh sách kiểm tra

Khi cần audit toàn bộ website thay vì từng đoạn code, Claude có thể tạo checklist có cấu trúc để bạn kiểm tra từng phần một cách có hệ thống.

Tạo accessibility audit checklist hoàn chỉnh cho website
theo WCAG 2.1 AA. Tôi sẽ dùng checklist này để kiểm tra
từng trang trên site.

Chia checklist theo khu vực trang:
1. Document Level:
   - HTML lang attribute
   - Page title
   - Viewport meta tag
   - CSS: prefers-reduced-motion, prefers-color-scheme

2. Navigation:
   - Skip navigation link
   - Consistent navigation structure
   - Breadcrumbs
   - Focus indicator visible

3. Content:
   - Heading hierarchy (h1 -> h2 -> h3, không skip)
   - Link text descriptive (không dùng "click here")
   - Reading order logical
   - Language changes marked (lang attribute)

4. Images & Media:
   - Alt text cho mọi img
   - Decorative images có alt=""
   - Complex images có long description
   - Video captions và audio descriptions

5. Forms:
   - Labels associated với inputs
   - Error messages descriptive và accessible
   - Required fields indicated
   - Autocomplete attributes

6. Interactive Elements:
   - Keyboard operable
   - Focus management
   - ARIA roles và states
   - Touch target size

7. Color & Visual:
   - Color contrast ratios
   - Color không phải cách duy nhất truyền tải thông tin
   - Text resize lên 200% không bị mất nội dung

Mỗi item: checkbox, WCAG criterion, cách test, pass/fail criteria

Phân tích Color Contrast

Tương phản màu sắc là một trong những vấn đề a11y phổ biến nhất. WCAG 2.1 AA yêu cầu tỷ lệ tương phản tối thiểu 4.5:1 cho text thường và 3:1 cho text lớn (trên 18pt hoặc 14pt bold). Claude phân tích color palette và xác định các cặp màu không đạt chuẩn.

Kiểm tra color contrast cho Design System với palette sau:

Background colors:
- White: #FFFFFF
- Light Gray: #F3F4F6
- Dark: #1F2937
- Primary Dark: #1E3A5F

Text colors:
- Primary Text: #111827
- Secondary Text: #6B7280
- Muted Text: #9CA3AF
- White Text: #FFFFFF
- Link: #2563EB
- Link Hover: #1D4ED8

UI colors:
- Success: #10B981
- Warning: #F59E0B
- Error: #EF4444
- Info: #3B82F6

Hãy:
1. Tạo bảng contrast ratio cho TẤT CẢ các cặp
   text/background có thể sử dụng
2. Đánh dấu cặp nào PASS và FAIL theo WCAG AA
   (4.5:1 cho normal text, 3:1 cho large text)
3. Đề xuất điều chỉnh cho các cặp FAIL
   (thay đổi tối thiểu để đạt chuẩn)
4. Kiểm tra thêm cho non-text elements (icons, borders)
   cần tỷ lệ 3:1
5. Kiểm tra cho dark mode nếu có
6. Lưu ý: #6B7280 trên #F3F4F6 có pass không?
   #9CA3AF trên #FFFFFF có pass không?

Alt Text Generation

Mọi hình ảnh có ý nghĩa trên website đều cần alt text mô tả nội dung. Claude giúp bạn viết alt text hiệu quả, ngắn gọn nhưng đủ thông tin cho screen reader.

Viết alt text cho các hình ảnh trên website theo best practices:

Nguyên tắc:
- Ngắn gọn (dưới 125 ký tự nếu có thể)
- Mô tả nội dung và chức năng, không mô tả hình thức
- Không bắt đầu bằng "Hình ảnh của..." hoặc "Image of..."
- Decorative images dùng alt=""
- Complex images (biểu đồ, infographic) cần long description

Danh sách hình ảnh cần alt text:
1. Logo công ty trên header (link về trang chủ)
2. Banner hero: Người phụ nữ đang dùng laptop trong quán cà phê
3. Product photo: Chai nước hoa 50ml trên nền trắng
4. Team photo: 12 người mặc áo polo xanh, đứng trước văn phòng
5. Chart: Biểu đồ cột thể hiện doanh thu Q1-Q4 2024
6. Icon decorative: Biểu tượng ngôi sao cạnh rating
7. User avatar trong comment section
8. Background image của section testimonial
9. Screenshot: Giao diện dashboard sản phẩm
10. Infographic: 5 bước quy trình đặt hàng

Với mỗi hình:
- Alt text đề xuất (tiếng Việt)
- Giải thích tại sao chọn cách mô tả đó
- Có nên dùng alt="" không và tại sao
- Có cần aria-label hoặc long description không

ARIA Labels và Roles

ARIA (Accessible Rich Internet Applications) cung cấp thuộc tính bổ sung để mô tả giao diện cho assistive technologies. Tuy nhiên, ARIA sai còn nguy hiểm hơn không có ARIA. Claude giúp bạn sử dụng ARIA đúng cách theo nguyên tắc: không sử dụng ARIA nếu HTML ngữ nghĩa đã đủ.

Review việc sử dụng ARIA trong code sau và đề xuất sửa chữa:

[Dán HTML code]

Kiểm tra theo các quy tắc ARIA:
1. Rule 1: Không dùng ARIA nếu native HTML element
   đã có semantic tương đương
   (ví dụ: dùng button thay vì div role="button")

2. Rule 2: Không thay đổi native semantics trừ khi
   thực sự cần thiết
   (ví dụ: không thêm role="heading" cho button)

3. Rule 3: Tất cả interactive ARIA controls phải
   keyboard operable

4. Rule 4: Không dùng role="presentation" hoặc
   aria-hidden="true" cho focusable elements

5. Rule 5: Tất cả interactive elements phải có
   accessible name

Với mỗi vấn đề tìm thấy:
- Giải thích vấn đề
- ARIA rule bị vi phạm
- Code trước và sau khi sửa
- Impact lên screen reader (sẽ đọc gì trước/sau khi sửa)

ARIA cho Single Page Applications

SPA có những thách thức a11y riêng do nội dung thay đổi mà không tải lại trang. Claude giúp bạn xử lý các vấn đề phổ biến.

Tôi đang phát triển SPA bằng React. Hãy hướng dẫn cách xử lý
accessibility cho các pattern sau:

1. Route changes:
   - Cách announce page change cho screen reader
   - Focus management khi navigate giữa các route
   - Document title update

2. Dynamic content loading:
   - aria-live regions cho nội dung cập nhật
   - Loading states announcement
   - Error states announcement
   - Infinite scroll accessibility

3. Modal/Dialog:
   - Focus trap implementation
   - Focus restoration khi đóng modal
   - Escape key handling
   - Background content inert

4. Toast/Notification:
   - aria-live="polite" vs "assertive"
   - Auto-dismiss timing (tối thiểu cho screen reader)
   - Dismiss button accessible

5. Tabs:
   - role="tablist", role="tab", role="tabpanel"
   - Arrow key navigation
   - Active tab state (aria-selected)

Cho mỗi pattern: code example React/TypeScript đúng chuẩn a11y

Keyboard Navigation

Mọi chức năng trên website phải thao tác được bằng bàn phím. Đây là yêu cầu quan trọng không chỉ cho người dùng screen reader mà còn cho người dùng có khó khăn vận động và power users thích dùng bàn phím.

Tạo keyboard navigation test plan cho website e-commerce
gồm các trang: Homepage, Product listing, Product detail,
Cart, Checkout.

Với mỗi trang, liệt kê:
1. Tab order mong đợi (thứ tự focus khi nhấn Tab)
2. Interactive elements cần focus:
   - Links, buttons, form inputs
   - Custom components (dropdown, accordion, carousel)
   - Skip navigation target

3. Keyboard shortcuts cần hỗ trợ:
   - Tab / Shift+Tab: Di chuyển focus
   - Enter / Space: Activate button/link
   - Arrow keys: Navigate menu/list
   - Escape: Close overlay/dropdown
   - Home / End: Jump to first/last item

4. Focus indicators:
   - Visible focus ring cho mọi focusable element
   - Focus ring không bị ẩn bởi CSS (outline: none)
   - Focus ring đủ contrast (3:1 với background)

5. Focus traps:
   - Modal: focus bị trap trong modal khi mở
   - Dropdown: focus management khi mở/đóng
   - Form: focus di chuyển đến error khi submit

6. Common issues cần kiểm tra:
   - div/span có onClick nhưng không có role="button"
     và tabIndex
   - Custom dropdown không hỗ trợ arrow keys
   - Carousel tự động không dừng khi focus
   - Focus bị mất sau khi dynamic content update

Format: Bảng test cases có thể dùng làm manual testing checklist

Screen Reader Compatibility

Screen reader là phần mềm đọc nội dung màn hình cho người khiếm thị. Các screen reader phổ biến gồm NVDA và JAWS trên Windows, VoiceOver trên macOS/iOS, và TalkBack trên Android. Claude giúp bạn đảm bảo website hoạt động tốt với screen readers.

Tạo screen reader testing script cho trang Product Detail:

Trang bao gồm: header navigation, breadcrumb, product images
gallery, product title, price, variant selector (size, color),
quantity input, Add to Cart button, product description tabs
(Overview, Specs, Reviews), related products carousel.

Với mỗi phần, mô tả:
1. Screen reader nên đọc gì (expected announcement)
2. Thứ tự đọc (reading order)
3. Cách interact bằng screen reader:
   - Cách navigate bằng headings (H key)
   - Cách navigate bằng landmarks (D key)
   - Cách browse images
   - Cách interact với form controls

4. Test scenarios:
   - Scenario 1: Navigate từ đầu trang đến Add to Cart
   - Scenario 2: Chọn size và color rồi thêm vào giỏ
   - Scenario 3: Đọc reviews (chuyển tab, đọc từng review)
   - Scenario 4: Navigate related products carousel

5. Common screen reader issues:
   - Image alt text thiếu hoặc không hữu ích
   - Form labels không associated
   - Dynamic price change không được announce
   - Tab panel content không được đọc khi switch tab

VoiceOver testing (macOS):
- Liệt kê VoiceOver commands cần dùng
- Expected rotor items (headings, links, form controls)
- VoiceOver cursor behavior mong đợi

Automated Audit Checklist

Kết hợp kiểm tra tự động với kiểm tra thủ công mang lại kết quả tốt nhất. Kiểm tra tự động phát hiện khoảng 30-40% vấn đề a11y, phần còn lại cần kiểm tra thủ công. Claude giúp bạn thiết lập quy trình audit kết hợp cả hai phương pháp.

Thiết lập quy trình accessibility audit tự động cho dự án web:

Tech stack: React + Next.js + TypeScript

1. Development-time tools:
   - eslint-plugin-jsx-a11y: Rules nào nên enable?
   - @axe-core/react: Cách integrate vào dev environment
   - Storybook a11y addon: Setup và cấu hình

2. CI/CD integration:
   - axe-core trong Playwright/Cypress tests
   - Pa11y CI cho automated page testing
   - Lighthouse CI accessibility score threshold

3. Manual testing checklist (cho những gì tự động không bắt):
   - Keyboard navigation test
   - Screen reader test (VoiceOver, NVDA)
   - Zoom test (200%, 400%)
   - Motion sensitivity test
   - Cognitive load assessment

4. Reporting template:
   - Summary dashboard
   - Violations by severity
   - Violations by WCAG criterion
   - Trend over time (improving or degrading?)
   - Remediation timeline

5. Remediation priority framework:
   - P0: Blocks user from completing core tasks
   - P1: Makes core tasks significantly harder
   - P2: Affects secondary tasks
   - P3: Best practice improvement

Cho tôi cấu hình cụ thể cho mỗi tool và sample test code.

Prompt cho Comprehensive A11y Review

Khi bạn cần Claude thực hiện review toàn diện cho một trang hoặc component cụ thể, sử dụng prompt sau để đảm bảo không bỏ sót vấn đề nào.

Thực hiện comprehensive accessibility review cho HTML sau.
Đây là component/page [mô tả chức năng].

[Dán HTML code]

Review theo 7 khía cạnh:

1. SEMANTIC HTML:
   - Heading hierarchy đúng không?
   - Landmark regions (header, nav, main, footer) đầy đủ không?
   - Lists, tables dùng đúng element không?
   - Links vs buttons dùng đúng không?

2. PERCEIVABLE:
   - Alt text cho tất cả meaningful images
   - Color contrast đạt AA (4.5:1 / 3:1)
   - Thông tin không chỉ dựa vào color
   - Text resize 200% có bị overlap/hidden không?

3. OPERABLE:
   - Tất cả interactive elements keyboard accessible
   - Focus order logical
   - Focus indicators visible
   - No keyboard traps
   - Touch targets >= 44x44px

4. UNDERSTANDABLE:
   - Language declared (html lang)
   - Error messages clear and associated
   - Labels descriptive
   - Consistent navigation

5. ROBUST:
   - Valid HTML (no duplicate IDs, proper nesting)
   - ARIA used correctly
   - Works with assistive technology

6. RESPONSIVE A11Y:
   - Accessibility maintained across breakpoints
   - Touch vs mouse interactions
   - Orientation support

7. MOTION & ANIMATION:
   - prefers-reduced-motion respected
   - Auto-playing content can be paused
   - No content flashes more than 3 times per second

Output format:
- Bảng tổng hợp: [Severity] [WCAG Criterion] [Issue] [Fix]
- Code diff cho top 5 vấn đề nghiêm trọng nhất
- Overall accessibility score estimation
- Time estimate để remediate tất cả issues

Remediation Priority

Sau khi audit, bạn sẽ có danh sách dài các vấn đề cần sửa. Sắp xếp thứ tự ưu tiên giúp team tập trung vào những gì quan trọng nhất trước.

Tôi vừa hoàn thành accessibility audit và có danh sách sau.
Hãy giúp tôi sắp xếp ưu tiên và lập kế hoạch remediation:

[Dán danh sách a11y issues từ audit]

Phân loại theo:
1. Impact (tác động đến user):
   - Blocker: Ngăn user hoàn thành task hoàn toàn
   - Critical: Gây khó khăn nghiêm trọng
   - Major: Ảnh hưởng trải nghiệm đáng kể
   - Minor: Gây bất tiện nhưng không chặn task

2. Effort (nỗ lực sửa chữa):
   - Quick fix: Dưới 1 giờ
   - Moderate: 1-4 giờ
   - Complex: 1-3 ngày
   - Major refactor: Hơn 3 ngày

3. Scope (phạm vi ảnh hưởng):
   - Toàn site (global header, footer, nav)
   - Nhiều trang (shared components)
   - Một trang (page-specific)

Tạo remediation plan:
- Sprint 1: Tất cả Blocker + Quick fix Critical
- Sprint 2: Remaining Critical + Quick fix Major
- Sprint 3: Remaining Major + toàn site issues
- Ongoing: Minor improvements

Kèm theo:
- Estimated total effort (person-days)
- Testing strategy sau khi fix
- Regression prevention (automated tests để giữ a11y score)

Bước tiếp theo

Accessibility là hành trình cải tiến liên tục, không phải đích đến. Bắt đầu bằng việc chạy audit tự động với axe-core hoặc Lighthouse cho trang quan trọng nhất, sửa các vấn đề critical trước, rồi dần mở rộng ra toàn site. Tích hợp a11y testing vào CI/CD để ngăn regression. Quan trọng nhất, hãy thử dùng website của bạn chỉ bằng bàn phím hoặc bật screen reader. Trải nghiệm trực tiếp sẽ giúp bạn hiểu sâu hơn bất kỳ checklist nào. Khám phá thêm các hướng dẫn thiết kế khác tại Thu vien Ung dung Claude.