{"product_id":"claude-cho-design-accessibility-review-tự-dộng","title":"Claude cho Design: Accessibility Review tự động","description":"\n\u003cp\u003eAccessibility (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. \u003cstrong\u003eClaude có thể đóng vai trò một accessibility auditor chuyên nghiệp\u003c\/strong\u003e, giúp bạn kiểm tra thiết kế theo chuẩn WCAG 2.1 AA trước khi handoff cho developer.\u003c\/p\u003e\n\n\u003ch2\u003eTại sao Accessibility quan trọng?\u003c\/h2\u003e\n\n\u003cp\u003eTheo 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:\u003c\/p\u003e\n\n\u003cul\u003e\n  \u003cli\u003eGoogle ưu tiên website accessible trong ranking tìm kiếm\u003c\/li\u003e\n  \u003cli\u003eNhiề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\u003c\/li\u003e\n  \u003cli\u003eThiết kế accessible thường đồng nghĩa với UX tốt hơn cho \u003cem\u003etất cả\u003c\/em\u003e người dùng\u003c\/li\u003e\n  \u003cli\u003eTránh rủi ro pháp lý ở thị trường quốc tế (ADA tại Mỹ, EN 301 549 tại EU)\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch2\u003eWCAG 2.1 AA — Bộ tiêu chuẩn cần nắm\u003c\/h2\u003e\n\n\u003cp\u003eWCAG (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:\u003c\/p\u003e\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n\u003cth\u003eNguyên tắc\u003c\/th\u003e\n\u003cth\u003eTiêu chí\u003c\/th\u003e\n\u003cth\u003eYêu cầu\u003c\/th\u003e\n\u003c\/tr\u003e\n  \u003c\/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n\u003ctd\u003ePerceivable\u003c\/td\u003e\n\u003ctd\u003e1.1.1 Alt text\u003c\/td\u003e\n\u003ctd\u003eMọi ảnh có nghĩa phải có alt text\u003c\/td\u003e\n\u003c\/tr\u003e\n    \u003ctr\u003e\n\u003ctd\u003ePerceivable\u003c\/td\u003e\n\u003ctd\u003e1.4.3 Contrast\u003c\/td\u003e\n\u003ctd\u003eTỷ lệ tương phản \u0026gt;= 4.5:1 (text thường), \u0026gt;= 3:1 (text lớn)\u003c\/td\u003e\n\u003c\/tr\u003e\n    \u003ctr\u003e\n\u003ctd\u003ePerceivable\u003c\/td\u003e\n\u003ctd\u003e1.4.11 Non-text contrast\u003c\/td\u003e\n\u003ctd\u003eUI components \u0026gt;= 3:1\u003c\/td\u003e\n\u003c\/tr\u003e\n    \u003ctr\u003e\n\u003ctd\u003eOperable\u003c\/td\u003e\n\u003ctd\u003e2.1.1 Keyboard\u003c\/td\u003e\n\u003ctd\u003eMọi chức năng có thể dùng bằng bàn phím\u003c\/td\u003e\n\u003c\/tr\u003e\n    \u003ctr\u003e\n\u003ctd\u003eOperable\u003c\/td\u003e\n\u003ctd\u003e2.5.5 Touch target\u003c\/td\u003e\n\u003ctd\u003eKích thước \u0026gt;= 44x44 CSS pixels\u003c\/td\u003e\n\u003c\/tr\u003e\n    \u003ctr\u003e\n\u003ctd\u003eUnderstandable\u003c\/td\u003e\n\u003ctd\u003e3.3.2 Labels\u003c\/td\u003e\n\u003ctd\u003eMọi input phải có label rõ ràng\u003c\/td\u003e\n\u003c\/tr\u003e\n    \u003ctr\u003e\n\u003ctd\u003eRobust\u003c\/td\u003e\n\u003ctd\u003e4.1.2 Name\/Role\/Value\u003c\/td\u003e\n\u003ctd\u003eMọi UI component phải có ARIA đúng\u003c\/td\u003e\n\u003c\/tr\u003e\n  \u003c\/tbody\u003e\n\u003c\/table\u003e\n\n\u003ch2\u003ePrompt cơ bản: Audit một màn hình\u003c\/h2\u003e\n\n\u003cp\u003eKhi bạn có screenshot hoặc description của một màn hình, dùng prompt này:\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003eBạn là accessibility auditor chuyên nghiệp. Hãy audit màn hình sau theo chuẩn WCAG 2.1 AA.\n\nMàn hình: [Trang đăng ký tài khoản của ứng dụng fintech VN]\nMô tả:\n- Header: Logo trái, \"Đăng ký\" tiêu đề chính màu xám nhạt (#999999) trên nền trắng\n- Form gồm: Họ tên, Email, Số điện thoại, Mật khẩu\n- Các field không có label rõ ràng, chỉ có placeholder text\n- Nút \"Tiếp theo\" màu xanh #0099FF trên nền trắng, kích thước 36px\n- Không có chỉ báo lỗi khi nhập sai\n- Ảnh minh họa bên phải không có alt text\n\nHãy tổ chức kết quả theo 4 nhóm WCAG và đưa ra mức độ nghiêm trọng:\nCritical (chặn người dùng), Major (gây khó khăn đáng kể), Minor (cải thiện nên có).\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch3\u003eOutput mẫu từ Claude\u003c\/h3\u003e\n\n\u003cpre\u003e\u003ccode\u003e## Accessibility Audit: Trang Đăng Ký Tài Khoản Fintech\n**Chuẩn:** WCAG 2.1 AA\n\n### Tóm tắt\nLỗi tìm thấy: 6 | Critical: 2 | Major: 3 | Minor: 1\n\n---\n\n### Perceivable\n| # | Lỗi | Tiêu chí WCAG | Mức độ | Khuyến nghị |\n|---|-----|---------------|--------|-------------|\n| 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ị) |\n| 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 |\n\n### Operable\n| # | Lỗi | Tiêu chí WCAG | Mức độ | Khuyến nghị |\n|---|-----|---------------|--------|-------------|\n| 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 |\n\n### Understandable\n| # | Lỗi | Tiêu chí WCAG | Mức độ | Khuyến nghị |\n|---|-----|---------------|--------|-------------|\n| 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 |\n| 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 |\n\n### Robust\n| # | Lỗi | Tiêu chí WCAG | Mức độ | Khuyến nghị |\n|---|-----|---------------|--------|-------------|\n| 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 |\n\n### Kiểm tra Color Contrast\n| Phần tử | Foreground | Background | Tỷ lệ | Yêu cầu | Kết quả |\n|---------|-----------|------------|-------|---------|---------|\n| Tiêu đề trang | #999999 | #FFFFFF | 2.85:1 | 4.5:1 | FAIL |\n| Nút CTA | #FFFFFF | #0099FF | 3.12:1 | 4.5:1 | FAIL |\n| Body text | #333333 | #FFFFFF | 12.63:1 | 4.5:1 | PASS |\n\n### Ưu tiên sửa\n1. **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\n2. **Sửa màu tiêu đề và nút CTA** — Người có thị lực kém không đọc được\n3. **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\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003ePrompt nâng cao: Audit toàn bộ flow\u003c\/h2\u003e\n\n\u003cp\u003eVớ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:\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003eAudit accessibility cho checkout flow của website thương mại điện tử Việt Nam gồm 4 bước:\n\nBướ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\nBướ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ỉ\nBước 3 - Thanh toán: Chọn phương thức (radio buttons), nhập thẻ, OTP via SMS\nBước 4 - Xác nhận: Tóm tắt đơn hàng, nút \"Đặt hàng\"\n\nYêu cầu đặc biệt:\n- Ứng dụng nhắm đến cả người dùng cao tuổi (50+)\n- Cần hoạt động tốt với VoiceOver (iOS) và TalkBack (Android)\n- Hỗ trợ keyboard navigation cho desktop\n\nHãy audit theo từng bước, highlight các điểm rủi ro cao nhất.\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eKiểm tra Color Contrast tự động\u003c\/h2\u003e\n\n\u003cp\u003eClaude 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ể:\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003eKiểm tra color contrast cho design system của chúng tôi.\nTính tỷ lệ tương phản và cho biết pass\/fail theo WCAG 2.1 AA:\n\nText màu \/ Background màu:\n1. #1A1A2E \/ #FFFFFF (body text)\n2. #E94560 \/ #FFFFFF (error state)\n3. #E94560 \/ #1A1A2E (error on dark)\n4. #16213E \/ #0F3460 (subtle text on dark bg)\n5. #FFFFFF \/ #0F3460 (white text on brand)\n6. #A8A8B3 \/ #FFFFFF (placeholder text)\n\nVới mỗi cặp màu, hãy cho biết:\n- Tỷ lệ chính xác (dùng công thức WCAG relative luminance)\n- Pass\/Fail cho normal text (4.5:1)\n- Pass\/Fail cho large text (3:1)\n- Pass\/Fail cho UI components (3:1)\n- Đề xuất màu thay thế nếu fail\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eTạo Accessibility Checklist cho team\u003c\/h2\u003e\n\n\u003cp\u003eDùng Claude để tạo checklist phù hợp với quy trình của team bạn:\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003eTạo accessibility checklist cho design team tại công ty fintech Việt Nam.\nTeam dùng Figma, build React web app và React Native mobile app.\nMức độ WCAG cần đạt: AA.\n\nTổ chức checklist theo giai đoạn:\n1. Discovery\/Wireframe\n2. Visual Design\n3. Prototype\/Interaction\n4. Handoff\n5. QA trước launch\n\nMỗ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).\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch3\u003eKết quả mẫu — Checklist giai đoạn Visual Design\u003c\/h3\u003e\n\n\u003cpre\u003e\u003ccode\u003e## Accessibility Checklist — Visual Design Stage\n\n### Màu sắc và Tương phản\n- [ ] Tất cả body text (\u0026lt; 18px) có contrast ratio \u0026gt;= 4.5:1\n      Verify: Plugin Figma \"Contrast\" hoặc WebAIM Contrast Checker\n      Responsible: Designer\n\n- [ ] Text lớn (\u0026gt;= 18px thường hoặc 14px bold) có contrast \u0026gt;= 3:1\n      Verify: Figma Contrast plugin\n      Responsible: Designer\n\n- [ ] UI components (borders, icons, interactive elements) contrast \u0026gt;= 3:1\n      Verify: Figma Contrast plugin\n      Responsible: Designer\n\n- [ ] Không dùng màu làm cách duy nhất truyền đạt thông tin\n      Verify: Xem bằng Figma color blind simulator\n      Responsible: Designer\n\n### Typography\n- [ ] Font size tối thiểu 14px cho body text (khuyến nghị 16px)\n      Responsible: Designer\n\n- [ ] Line height \u0026gt;= 1.5 cho paragraph text\n      Responsible: Designer\n\n- [ ] Không dùng chữ hoa toàn bộ cho đoạn văn dài\n      Responsible: Designer\n\n### Interactive Elements\n- [ ] Nút và touch target \u0026gt;= 44x44px\n      Verify: Đo trong Figma\n      Responsible: Designer\n\n- [ ] Focus state rõ ràng cho mọi interactive element\n      Responsible: Designer\n\n- [ ] Error states có icon + text (không chỉ màu đỏ)\n      Responsible: Designer\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eTích hợp vào quy trình Design Review\u003c\/h2\u003e\n\n\u003cp\u003eCách hiệu quả nhất là dùng Claude như một reviewer thứ hai trong mọi design critique:\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003eTrướ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.\n\nMàn hình là trang chi tiết sản phẩm của app mua sắm:\n- Ảnh sản phẩm (carousel 5 ảnh)\n- Tên sản phẩm: \"Áo thun cotton oversize\"\n- Giá: 299.000đ (gạch ngang: 450.000đ)\n- Rating: 4.5 sao (hiển thị bằng ảnh ngôi sao)\n- Nút \"Thêm vào giỏ\" và \"Mua ngay\"\n- Tabs: Mô tả | Đánh giá (234) | Hỏi đáp (12)\n\nMô 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.\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eLỗi Accessibility phổ biến tại thị trường Việt Nam\u003c\/h2\u003e\n\n\u003cp\u003eQua quan sát các sản phẩm digital Việt Nam, một số lỗi hay gặp nhất:\u003c\/p\u003e\n\n\u003cul\u003e\n  \u003cli\u003e\n\u003cstrong\u003eFont chữ quá nhỏ:\u003c\/strong\u003e Nhiều app Việt dùng 12-13px cho body text, đặc biệt khó đọc với người dùng 40+\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eMàu đỏ cho thông báo lỗi:\u003c\/strong\u003e 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\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003ePlaceholder thay thế label:\u003c\/strong\u003e Rất phổ biến trong các form Việt, gây khó khăn lớn cho screen reader\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eNút \"X\" đóng modal quá nhỏ:\u003c\/strong\u003e Thường chỉ 20-24px, không đạt 44px minimum\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eThiếu skip navigation:\u003c\/strong\u003e Người dùng keyboard phải Tab qua toàn bộ menu mỗi trang\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eVideo autoplay không có controls:\u003c\/strong\u003e Vi phạm WCAG 1.4.2 cho nội dung audio\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch2\u003eWorkflow đề xuất cho Design Team\u003c\/h2\u003e\n\n\u003col\u003e\n  \u003cli\u003e\n\u003cstrong\u003eThiết lập:\u003c\/strong\u003e Dùng Claude tạo accessibility checklist phù hợp với product của bạn một lần duy nhất\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eMỗi sprint:\u003c\/strong\u003e Paste design description hoặc Figma export vào Claude để audit nhanh\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eTrước handoff:\u003c\/strong\u003e Chạy full WCAG audit với Claude, fix Critical và Major issues\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eSau launch:\u003c\/strong\u003e Dùng Claude để phân tích accessibility complaints từ user feedback\u003c\/li\u003e\n\u003c\/ol\u003e\n\n\u003cp\u003eAutomated 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.\u003c\/p\u003e\n\n\u003ch2\u003eBước tiếp theo\u003c\/h2\u003e\n\n\u003cp\u003eBạ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 \u003ca href=\"\/en\/collections\/ung-dung\"\u003ebộ sưu tập Ứng dụng Claude cho Design\u003c\/a\u003e — từ design critique chuyên sâu đến xây dựng design system hoàn chỉnh.\u003c\/p\u003e\n\n\n\u003chr\u003e\n\u003ch3\u003eBài viết liên quan\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"\/en\/products\/claude-cho-design-ux-copywriting-hi%E1%BB%87u-qu%E1%BA%A3\"\u003eClaude cho Design: UX Copywriting hiệu quả\u003c\/a\u003e\u003c\/li\u003e\n\u003cli\u003e\u003ca href=\"\/en\/products\/claude-cho-design-xay-d%E1%BB%B1ng-design-system\"\u003eClaude cho Design: Xây dựng Design System\u003c\/a\u003e\u003c\/li\u003e\n\u003cli\u003e\u003ca href=\"\/en\/products\/claude-cho-thi%E1%BA%BFt-k%E1%BA%BF-t%E1%BB%95ng-quan-plugin\"\u003eClaude cho Thiết kế: Tổng quan Plugin\u003c\/a\u003e\u003c\/li\u003e\n\u003cli\u003e\u003ca href=\"\/en\/products\/claude-cho-engineering-standup-va-bao-cao-ti%E1%BA%BFn-d%E1%BB%99\"\u003eClaude cho Engineering: Standup và báo cáo tiến độ\u003c\/a\u003e\u003c\/li\u003e\n\u003cli\u003e\u003ca href=\"\/en\/products\/claude-cho-marketing-seo-audit-chuyen-sau\"\u003eClaude cho Marketing: SEO Audit chuyên sâu\u003c\/a\u003e\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"Minh Tuấn","offers":[{"title":"Default Title","offer_id":47722092069076,"sku":null,"price":0.0,"currency_code":"VND","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0821\/0264\/9044\/files\/claude-cho-design-accessibility-review-t_-d_ng_46d03c31-fdce-43e3-8158-8c584f0c5691.jpg?v=1774521974","url":"https:\/\/claude.vn\/en\/products\/claude-cho-design-accessibility-review-t%e1%bb%b1-d%e1%bb%99ng","provider":"CLAUDE.VN","version":"1.0","type":"link"}