Claude cho Design: Accessibility Review tự động

Accessibility (khả năng tiếp cận) là yêu cầu không thể bỏ qua trong thiết kế sản phẩm hiện đại. Tuy nhiên, nhiều team design tại Việt Nam vẫn bỏ sót bước này do thiếu quy trình rõ ràng. Claude có thể đóng vai trò một accessibility auditor chuyên nghiệp, giúp bạn kiểm tra thiết kế theo chuẩn WCAG 2.1 AA trước khi handoff cho developer.

Tại sao Accessibility quan trọng?

Theo thống kê của WHO, khoảng 15% dân số thế giới sống với một dạng khuyết tật nào đó. Tại Việt Nam, con số này tương đương hàng triệu người dùng tiềm năng. Ngoài ra:

• Google ưu tiên website accessible trong ranking tìm kiếm
• Nhiều doanh nghiệp lớn (ngân hàng, bảo hiểm, chính phủ) yêu cầu WCAG compliance trong tender
• Thiết kế accessible thường đồng nghĩa với UX tốt hơn cho tất cả người dùng
• Tránh rủi ro pháp lý ở thị trường quốc tế (ADA tại Mỹ, EN 301 549 tại EU)

WCAG 2.1 AA — Bộ tiêu chuẩn cần nắm

WCAG (Web Content Accessibility Guidelines) chia thành 4 nguyên tắc: Perceivable, Operable, Understandable, Robust. Dưới đây là các tiêu chí quan trọng nhất ở cấp AA:

Prompt cơ bản: Audit một màn hình

Khi bạn có screenshot hoặc description của một màn hình, dùng prompt này:

Bạn là accessibility auditor chuyên nghiệp. Hãy audit màn hình sau theo chuẩn WCAG 2.1 AA.

Màn hình: [Trang đăng ký tài khoản của ứng dụng fintech VN]
Mô tả:
- Header: Logo trái, "Đăng ký" tiêu đề chính màu xám nhạt (#999999) trên nền trắng
- Form gồm: Họ tên, Email, Số điện thoại, Mật khẩu
- Các field không có label rõ ràng, chỉ có placeholder text
- Nút "Tiếp theo" màu xanh #0099FF trên nền trắng, kích thước 36px
- Không có chỉ báo lỗi khi nhập sai
- Ảnh minh họa bên phải không có alt text

Hãy tổ chức kết quả theo 4 nhóm WCAG và đưa ra mức độ nghiêm trọng:
Critical (chặn người dùng), Major (gây khó khăn đáng kể), Minor (cải thiện nên có).

Output mẫu từ Claude

## Accessibility Audit: Trang Đăng Ký Tài Khoản Fintech
**Chuẩn:** WCAG 2.1 AA

### Tóm tắt
Lỗi tìm thấy: 6 | Critical: 2 | Major: 3 | Minor: 1

---

### Perceivable
| # | Lỗi | Tiêu chí WCAG | Mức độ | Khuyến nghị |
|---|-----|---------------|--------|-------------|
| 1 | Tiêu đề "Đăng ký" dùng màu #999999 trên nền trắng — tỷ lệ tương phản chỉ 2.85:1, không đạt 4.5:1 | 1.4.3 | Critical | Đổi sang #767676 (tối thiểu) hoặc #595959 (khuyến nghị) |
| 2 | Ảnh minh họa không có alt text | 1.1.1 | Major | Thêm alt="" nếu decorative, hoặc mô tả nội dung nếu có nghĩa |

### Operable
| # | Lỗi | Tiêu chí WCAG | Mức độ | Khuyến nghị |
|---|-----|---------------|--------|-------------|
| 3 | Nút "Tiếp theo" cao 36px — nhỏ hơn 44px yêu cầu | 2.5.5 | Major | Tăng chiều cao tối thiểu lên 44px, khuyến nghị 48px |

### Understandable
| # | Lỗi | Tiêu chí WCAG | Mức độ | Khuyến nghị |
|---|-----|---------------|--------|-------------|
| 4 | Placeholder text thay thế label — screen reader không đọc được khi đang nhập | 3.3.2 | Critical | Thêm label element hoặc aria-label cho mỗi input |
| 5 | Không có thông báo lỗi khi nhập sai | 3.3.1 | Major | Thêm inline error message với màu đỏ và icon |

### Robust
| # | Lỗi | Tiêu chí WCAG | Mức độ | Khuyến nghị |
|---|-----|---------------|--------|-------------|
| 6 | Form fields thiếu role và aria attributes | 4.1.2 | Minor | Thêm aria-required="true" cho trường bắt buộc |

### Kiểm tra Color Contrast
| Phần tử | Foreground | Background | Tỷ lệ | Yêu cầu | Kết quả |
|---------|-----------|------------|-------|---------|---------|
| Tiêu đề trang | #999999 | #FFFFFF | 2.85:1 | 4.5:1 | FAIL |
| Nút CTA | #FFFFFF | #0099FF | 3.12:1 | 4.5:1 | FAIL |
| Body text | #333333 | #FFFFFF | 12.63:1 | 4.5:1 | PASS |

### Ưu tiên sửa
1. **Thêm label cho tất cả form fields** — Ảnh hưởng đến người dùng màn hình (screen reader users), chặn hoàn toàn khả năng điền form
2. **Sửa màu tiêu đề và nút CTA** — Người có thị lực kém không đọc được
3. **Tăng kích thước nút** — Khó tap trên mobile, đặc biệt với người dùng lớn tuổi

Prompt nâng cao: Audit toàn bộ flow

Với một flow phức tạp hơn (ví dụ: checkout của sàn thương mại điện tử), bạn có thể yêu cầu Claude audit từng bước:

Audit accessibility cho checkout flow của website thương mại điện tử Việt Nam gồm 4 bước:

Bước 1 - Giỏ hàng: Danh sách sản phẩm dạng bảng, nút +/- số lượng (24x24px), checkbox xóa sản phẩm
Bước 2 - Thông tin giao hàng: Form địa chỉ gồm 8 trường, dropdown tỉnh/thành (500+ options), autocomplete địa chỉ
Bước 3 - Thanh toán: Chọn phương thức (radio buttons), nhập thẻ, OTP via SMS
Bước 4 - Xác nhận: Tóm tắt đơn hàng, nút "Đặt hàng"

Yêu cầu đặc biệt:
- Ứng dụng nhắm đến cả người dùng cao tuổi (50+)
- Cần hoạt động tốt với VoiceOver (iOS) và TalkBack (Android)
- Hỗ trợ keyboard navigation cho desktop

Hãy audit theo từng bước, highlight các điểm rủi ro cao nhất.

Kiểm tra Color Contrast tự động

Claude có thể tính toán và kiểm tra tỷ lệ tương phản nếu bạn cung cấp màu sắc cụ thể:

Kiểm tra color contrast cho design system của chúng tôi.
Tính tỷ lệ tương phản và cho biết pass/fail theo WCAG 2.1 AA:

Text màu / Background màu:
1. #1A1A2E / #FFFFFF (body text)
2. #E94560 / #FFFFFF (error state)
3. #E94560 / #1A1A2E (error on dark)
4. #16213E / #0F3460 (subtle text on dark bg)
5. #FFFFFF / #0F3460 (white text on brand)
6. #A8A8B3 / #FFFFFF (placeholder text)

Với mỗi cặp màu, hãy cho biết:
- Tỷ lệ chính xác (dùng công thức WCAG relative luminance)
- Pass/Fail cho normal text (4.5:1)
- Pass/Fail cho large text (3:1)
- Pass/Fail cho UI components (3:1)
- Đề xuất màu thay thế nếu fail

Tạo Accessibility Checklist cho team

Dùng Claude để tạo checklist phù hợp với quy trình của team bạn:

Tạo accessibility checklist cho design team tại công ty fintech Việt Nam.
Team dùng Figma, build React web app và React Native mobile app.
Mức độ WCAG cần đạt: AA.

Tổ chức checklist theo giai đoạn:
1. Discovery/Wireframe
2. Visual Design
3. Prototype/Interaction
4. Handoff
5. QA trước launch

Mỗi item cần: tên kiểm tra, cách verify, tool recommended (nếu có), ai chịu trách nhiệm (designer/developer/QA).

Kết quả mẫu — Checklist giai đoạn Visual Design

## Accessibility Checklist — Visual Design Stage

### Màu sắc và Tương phản
- [ ] Tất cả body text (< 18px) có contrast ratio >= 4.5:1
      Verify: Plugin Figma "Contrast" hoặc WebAIM Contrast Checker
      Responsible: Designer

- [ ] Text lớn (>= 18px thường hoặc 14px bold) có contrast >= 3:1
      Verify: Figma Contrast plugin
      Responsible: Designer

- [ ] UI components (borders, icons, interactive elements) contrast >= 3:1
      Verify: Figma Contrast plugin
      Responsible: Designer

- [ ] Không dùng màu làm cách duy nhất truyền đạt thông tin
      Verify: Xem bằng Figma color blind simulator
      Responsible: Designer

### Typography
- [ ] Font size tối thiểu 14px cho body text (khuyến nghị 16px)
      Responsible: Designer

- [ ] Line height >= 1.5 cho paragraph text
      Responsible: Designer

- [ ] Không dùng chữ hoa toàn bộ cho đoạn văn dài
      Responsible: Designer

### Interactive Elements
- [ ] Nút và touch target >= 44x44px
      Verify: Đo trong Figma
      Responsible: Designer

- [ ] Focus state rõ ràng cho mọi interactive element
      Responsible: Designer

- [ ] Error states có icon + text (không chỉ màu đỏ)
      Responsible: Designer

Tích hợp vào quy trình Design Review

Cách hiệu quả nhất là dùng Claude như một reviewer thứ hai trong mọi design critique:

Trước khi tôi present design này cho stakeholder, hãy đóng vai một người dùng khiếm thị đang dùng screen reader VoiceOver trên iPhone.

Màn hình là trang chi tiết sản phẩm của app mua sắm:
- Ảnh sản phẩm (carousel 5 ảnh)
- Tên sản phẩm: "Áo thun cotton oversize"
- Giá: 299.000đ (gạch ngang: 450.000đ)
- Rating: 4.5 sao (hiển thị bằng ảnh ngôi sao)
- Nút "Thêm vào giỏ" và "Mua ngay"
- Tabs: Mô tả | Đánh giá (234) | Hỏi đáp (12)

Mô tả trải nghiệm bạn sẽ gặp khi navigate qua màn hình này bằng VoiceOver. Chỉ ra các điểm confusing hoặc incomplete.

Lỗi Accessibility phổ biến tại thị trường Việt Nam

Qua quan sát các sản phẩm digital Việt Nam, một số lỗi hay gặp nhất:

• Font chữ quá nhỏ: Nhiều app Việt dùng 12-13px cho body text, đặc biệt khó đọc với người dùng 40+
• Màu đỏ cho thông báo lỗi: Chỉ dùng màu mà không có icon hoặc text rõ ràng — vô nghĩa với người mù màu đỏ-xanh
• Placeholder thay thế label: Rất phổ biến trong các form Việt, gây khó khăn lớn cho screen reader
• Nút "X" đóng modal quá nhỏ: Thường chỉ 20-24px, không đạt 44px minimum
• Thiếu skip navigation: Người dùng keyboard phải Tab qua toàn bộ menu mỗi trang
• Video autoplay không có controls: Vi phạm WCAG 1.4.2 cho nội dung audio

Workflow đề xuất cho Design Team

1. Thiết lập: Dùng Claude tạo accessibility checklist phù hợp với product của bạn một lần duy nhất
2. Mỗi sprint: Paste design description hoặc Figma export vào Claude để audit nhanh
3. Trước handoff: Chạy full WCAG audit với Claude, fix Critical và Major issues
4. Sau launch: Dùng Claude để phân tích accessibility complaints từ user feedback

Automated tools như axe DevTools bắt được khoảng 30-40% lỗi accessibility. Claude — với khả năng hiểu ngữ cảnh và lý luận về UX — có thể bổ sung phần còn lại, đặc biệt là các lỗi về semantic structure và user experience.

Bước tiếp theo

Bạn đã nắm được quy trình audit accessibility với Claude. Khám phá thêm các kỹ năng design khác tại bộ sưu tập Ứng dụng Claude cho Design — từ design critique chuyên sâu đến xây dựng design system hoàn chỉnh.

Bài viết liên quan

• Claude cho Design: UX Copywriting hiệu quả
• Claude cho Design: Xây dựng Design System
• Claude cho Thiết kế: Tổng quan Plugin
• Claude cho Engineering: Standup và báo cáo tiến độ
• Claude cho Marketing: SEO Audit chuyên sâu