{"product_id":"claude-audit-accessibility-wcag-kiểm-tra-khả-nang-truy-cập-website","title":"Claude audit Accessibility (WCAG) — Kiểm tra khả năng truy cập website","description":"\n\u003cp\u003eAccessibility (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.\u003c\/p\u003e\n\n\u003ch2\u003eTổng quan WCAG 2.1 AA\u003c\/h2\u003e\n\u003cp\u003eWCAG (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.\u003c\/p\u003e\n\n\u003ch3\u003eBốn nguyên tắc POUR\u003c\/h3\u003e\n\u003cp\u003eWCAG được xây dựng trên 4 nguyên tắc cốt lõi, viết tắt là POUR.\u003c\/p\u003e\n\u003cul\u003e\n  \u003cli\u003e\n\u003cstrong\u003ePerceivable (Nhận biết được):\u003c\/strong\u003e 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\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eOperable (Thao tác được):\u003c\/strong\u003e 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\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eUnderstandable (Hiểu được):\u003c\/strong\u003e 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\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eRobust (Vững chắc):\u003c\/strong\u003e 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\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch2\u003eClaude review HTML cho Accessibility Issues\u003c\/h2\u003e\n\u003cp\u003eCá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.\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003eKiểm tra accessibility của đoạn HTML sau theo WCAG 2.1 AA:\n\n[Dán HTML code của trang hoặc component]\n\nHãy phân tích và báo cáo theo format:\n\n1. Danh sách vi phạm (Violations):\n   Mỗi vi phạm cần có:\n   - WCAG criterion bị vi phạm (ví dụ: 1.1.1 Non-text Content)\n   - Mức độ nghiêm trọng: Critical \/ Major \/ Minor\n   - Vị trí trong code (dòng hoặc selector)\n   - Mô tả vấn đề\n   - Code sửa đề xuất (before\/after)\n\n2. Cảnh báo (Warnings):\n   - Các điểm cần kiểm tra thủ công\n   - Các trường hợp có thể vi phạm tùy context\n\n3. Best practices bị bỏ qua:\n   - Không vi phạm WCAG nhưng nên cải thiện\n\n4. Tóm tắt:\n   - Điểm a11y tổng thể (thang 0-100)\n   - Top 3 vấn đề cần sửa trước\n   - Ước tính thời gian sửa\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch3\u003eAudit toàn trang với danh sách kiểm tra\u003c\/h3\u003e\n\u003cp\u003eKhi 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.\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003eTạo accessibility audit checklist hoàn chỉnh cho website\ntheo WCAG 2.1 AA. Tôi sẽ dùng checklist này để kiểm tra\ntừng trang trên site.\n\nChia checklist theo khu vực trang:\n1. Document Level:\n   - HTML lang attribute\n   - Page title\n   - Viewport meta tag\n   - CSS: prefers-reduced-motion, prefers-color-scheme\n\n2. Navigation:\n   - Skip navigation link\n   - Consistent navigation structure\n   - Breadcrumbs\n   - Focus indicator visible\n\n3. Content:\n   - Heading hierarchy (h1 -\u0026gt; h2 -\u0026gt; h3, không skip)\n   - Link text descriptive (không dùng \"click here\")\n   - Reading order logical\n   - Language changes marked (lang attribute)\n\n4. Images \u0026amp; Media:\n   - Alt text cho mọi img\n   - Decorative images có alt=\"\"\n   - Complex images có long description\n   - Video captions và audio descriptions\n\n5. Forms:\n   - Labels associated với inputs\n   - Error messages descriptive và accessible\n   - Required fields indicated\n   - Autocomplete attributes\n\n6. Interactive Elements:\n   - Keyboard operable\n   - Focus management\n   - ARIA roles và states\n   - Touch target size\n\n7. Color \u0026amp; Visual:\n   - Color contrast ratios\n   - Color không phải cách duy nhất truyền tải thông tin\n   - Text resize lên 200% không bị mất nội dung\n\nMỗi item: checkbox, WCAG criterion, cách test, pass\/fail criteria\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003ePhân tích Color Contrast\u003c\/h2\u003e\n\u003cp\u003eTươ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.\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003eKiểm tra color contrast cho Design System với palette sau:\n\nBackground colors:\n- White: #FFFFFF\n- Light Gray: #F3F4F6\n- Dark: #1F2937\n- Primary Dark: #1E3A5F\n\nText colors:\n- Primary Text: #111827\n- Secondary Text: #6B7280\n- Muted Text: #9CA3AF\n- White Text: #FFFFFF\n- Link: #2563EB\n- Link Hover: #1D4ED8\n\nUI colors:\n- Success: #10B981\n- Warning: #F59E0B\n- Error: #EF4444\n- Info: #3B82F6\n\nHãy:\n1. Tạo bảng contrast ratio cho TẤT CẢ các cặp\n   text\/background có thể sử dụng\n2. Đánh dấu cặp nào PASS và FAIL theo WCAG AA\n   (4.5:1 cho normal text, 3:1 cho large text)\n3. Đề xuất điều chỉnh cho các cặp FAIL\n   (thay đổi tối thiểu để đạt chuẩn)\n4. Kiểm tra thêm cho non-text elements (icons, borders)\n   cần tỷ lệ 3:1\n5. Kiểm tra cho dark mode nếu có\n6. Lưu ý: #6B7280 trên #F3F4F6 có pass không?\n   #9CA3AF trên #FFFFFF có pass không?\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eAlt Text Generation\u003c\/h2\u003e\n\u003cp\u003eMọ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.\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003eViết alt text cho các hình ảnh trên website theo best practices:\n\nNguyên tắc:\n- Ngắn gọn (dưới 125 ký tự nếu có thể)\n- Mô tả nội dung và chức năng, không mô tả hình thức\n- Không bắt đầu bằng \"Hình ảnh của...\" hoặc \"Image of...\"\n- Decorative images dùng alt=\"\"\n- Complex images (biểu đồ, infographic) cần long description\n\nDanh sách hình ảnh cần alt text:\n1. Logo công ty trên header (link về trang chủ)\n2. Banner hero: Người phụ nữ đang dùng laptop trong quán cà phê\n3. Product photo: Chai nước hoa 50ml trên nền trắng\n4. Team photo: 12 người mặc áo polo xanh, đứng trước văn phòng\n5. Chart: Biểu đồ cột thể hiện doanh thu Q1-Q4 2024\n6. Icon decorative: Biểu tượng ngôi sao cạnh rating\n7. User avatar trong comment section\n8. Background image của section testimonial\n9. Screenshot: Giao diện dashboard sản phẩm\n10. Infographic: 5 bước quy trình đặt hàng\n\nVới mỗi hình:\n- Alt text đề xuất (tiếng Việt)\n- Giải thích tại sao chọn cách mô tả đó\n- Có nên dùng alt=\"\" không và tại sao\n- Có cần aria-label hoặc long description không\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eARIA Labels và Roles\u003c\/h2\u003e\n\u003cp\u003eARIA (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 đã đủ.\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003eReview việc sử dụng ARIA trong code sau và đề xuất sửa chữa:\n\n[Dán HTML code]\n\nKiểm tra theo các quy tắc ARIA:\n1. Rule 1: Không dùng ARIA nếu native HTML element\n   đã có semantic tương đương\n   (ví dụ: dùng button thay vì div role=\"button\")\n\n2. Rule 2: Không thay đổi native semantics trừ khi\n   thực sự cần thiết\n   (ví dụ: không thêm role=\"heading\" cho button)\n\n3. Rule 3: Tất cả interactive ARIA controls phải\n   keyboard operable\n\n4. Rule 4: Không dùng role=\"presentation\" hoặc\n   aria-hidden=\"true\" cho focusable elements\n\n5. Rule 5: Tất cả interactive elements phải có\n   accessible name\n\nVới mỗi vấn đề tìm thấy:\n- Giải thích vấn đề\n- ARIA rule bị vi phạm\n- Code trước và sau khi sửa\n- Impact lên screen reader (sẽ đọc gì trước\/sau khi sửa)\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch3\u003eARIA cho Single Page Applications\u003c\/h3\u003e\n\u003cp\u003eSPA 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.\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003eTôi đang phát triển SPA bằng React. Hãy hướng dẫn cách xử lý\naccessibility cho các pattern sau:\n\n1. Route changes:\n   - Cách announce page change cho screen reader\n   - Focus management khi navigate giữa các route\n   - Document title update\n\n2. Dynamic content loading:\n   - aria-live regions cho nội dung cập nhật\n   - Loading states announcement\n   - Error states announcement\n   - Infinite scroll accessibility\n\n3. Modal\/Dialog:\n   - Focus trap implementation\n   - Focus restoration khi đóng modal\n   - Escape key handling\n   - Background content inert\n\n4. Toast\/Notification:\n   - aria-live=\"polite\" vs \"assertive\"\n   - Auto-dismiss timing (tối thiểu cho screen reader)\n   - Dismiss button accessible\n\n5. Tabs:\n   - role=\"tablist\", role=\"tab\", role=\"tabpanel\"\n   - Arrow key navigation\n   - Active tab state (aria-selected)\n\nCho mỗi pattern: code example React\/TypeScript đúng chuẩn a11y\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eKeyboard Navigation\u003c\/h2\u003e\n\u003cp\u003eMọ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.\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003eTạo keyboard navigation test plan cho website e-commerce\ngồm các trang: Homepage, Product listing, Product detail,\nCart, Checkout.\n\nVới mỗi trang, liệt kê:\n1. Tab order mong đợi (thứ tự focus khi nhấn Tab)\n2. Interactive elements cần focus:\n   - Links, buttons, form inputs\n   - Custom components (dropdown, accordion, carousel)\n   - Skip navigation target\n\n3. Keyboard shortcuts cần hỗ trợ:\n   - Tab \/ Shift+Tab: Di chuyển focus\n   - Enter \/ Space: Activate button\/link\n   - Arrow keys: Navigate menu\/list\n   - Escape: Close overlay\/dropdown\n   - Home \/ End: Jump to first\/last item\n\n4. Focus indicators:\n   - Visible focus ring cho mọi focusable element\n   - Focus ring không bị ẩn bởi CSS (outline: none)\n   - Focus ring đủ contrast (3:1 với background)\n\n5. Focus traps:\n   - Modal: focus bị trap trong modal khi mở\n   - Dropdown: focus management khi mở\/đóng\n   - Form: focus di chuyển đến error khi submit\n\n6. Common issues cần kiểm tra:\n   - div\/span có onClick nhưng không có role=\"button\"\n     và tabIndex\n   - Custom dropdown không hỗ trợ arrow keys\n   - Carousel tự động không dừng khi focus\n   - Focus bị mất sau khi dynamic content update\n\nFormat: Bảng test cases có thể dùng làm manual testing checklist\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eScreen Reader Compatibility\u003c\/h2\u003e\n\u003cp\u003eScreen 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.\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003eTạo screen reader testing script cho trang Product Detail:\n\nTrang bao gồm: header navigation, breadcrumb, product images\ngallery, product title, price, variant selector (size, color),\nquantity input, Add to Cart button, product description tabs\n(Overview, Specs, Reviews), related products carousel.\n\nVới mỗi phần, mô tả:\n1. Screen reader nên đọc gì (expected announcement)\n2. Thứ tự đọc (reading order)\n3. Cách interact bằng screen reader:\n   - Cách navigate bằng headings (H key)\n   - Cách navigate bằng landmarks (D key)\n   - Cách browse images\n   - Cách interact với form controls\n\n4. Test scenarios:\n   - Scenario 1: Navigate từ đầu trang đến Add to Cart\n   - Scenario 2: Chọn size và color rồi thêm vào giỏ\n   - Scenario 3: Đọc reviews (chuyển tab, đọc từng review)\n   - Scenario 4: Navigate related products carousel\n\n5. Common screen reader issues:\n   - Image alt text thiếu hoặc không hữu ích\n   - Form labels không associated\n   - Dynamic price change không được announce\n   - Tab panel content không được đọc khi switch tab\n\nVoiceOver testing (macOS):\n- Liệt kê VoiceOver commands cần dùng\n- Expected rotor items (headings, links, form controls)\n- VoiceOver cursor behavior mong đợi\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eAutomated Audit Checklist\u003c\/h2\u003e\n\u003cp\u003eKế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.\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003eThiết lập quy trình accessibility audit tự động cho dự án web:\n\nTech stack: React + Next.js + TypeScript\n\n1. Development-time tools:\n   - eslint-plugin-jsx-a11y: Rules nào nên enable?\n   - @axe-core\/react: Cách integrate vào dev environment\n   - Storybook a11y addon: Setup và cấu hình\n\n2. CI\/CD integration:\n   - axe-core trong Playwright\/Cypress tests\n   - Pa11y CI cho automated page testing\n   - Lighthouse CI accessibility score threshold\n\n3. Manual testing checklist (cho những gì tự động không bắt):\n   - Keyboard navigation test\n   - Screen reader test (VoiceOver, NVDA)\n   - Zoom test (200%, 400%)\n   - Motion sensitivity test\n   - Cognitive load assessment\n\n4. Reporting template:\n   - Summary dashboard\n   - Violations by severity\n   - Violations by WCAG criterion\n   - Trend over time (improving or degrading?)\n   - Remediation timeline\n\n5. Remediation priority framework:\n   - P0: Blocks user from completing core tasks\n   - P1: Makes core tasks significantly harder\n   - P2: Affects secondary tasks\n   - P3: Best practice improvement\n\nCho tôi cấu hình cụ thể cho mỗi tool và sample test code.\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003ePrompt cho Comprehensive A11y Review\u003c\/h2\u003e\n\u003cp\u003eKhi 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.\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003eThực hiện comprehensive accessibility review cho HTML sau.\nĐây là component\/page [mô tả chức năng].\n\n[Dán HTML code]\n\nReview theo 7 khía cạnh:\n\n1. SEMANTIC HTML:\n   - Heading hierarchy đúng không?\n   - Landmark regions (header, nav, main, footer) đầy đủ không?\n   - Lists, tables dùng đúng element không?\n   - Links vs buttons dùng đúng không?\n\n2. PERCEIVABLE:\n   - Alt text cho tất cả meaningful images\n   - Color contrast đạt AA (4.5:1 \/ 3:1)\n   - Thông tin không chỉ dựa vào color\n   - Text resize 200% có bị overlap\/hidden không?\n\n3. OPERABLE:\n   - Tất cả interactive elements keyboard accessible\n   - Focus order logical\n   - Focus indicators visible\n   - No keyboard traps\n   - Touch targets \u0026gt;= 44x44px\n\n4. UNDERSTANDABLE:\n   - Language declared (html lang)\n   - Error messages clear and associated\n   - Labels descriptive\n   - Consistent navigation\n\n5. ROBUST:\n   - Valid HTML (no duplicate IDs, proper nesting)\n   - ARIA used correctly\n   - Works with assistive technology\n\n6. RESPONSIVE A11Y:\n   - Accessibility maintained across breakpoints\n   - Touch vs mouse interactions\n   - Orientation support\n\n7. MOTION \u0026amp; ANIMATION:\n   - prefers-reduced-motion respected\n   - Auto-playing content can be paused\n   - No content flashes more than 3 times per second\n\nOutput format:\n- Bảng tổng hợp: [Severity] [WCAG Criterion] [Issue] [Fix]\n- Code diff cho top 5 vấn đề nghiêm trọng nhất\n- Overall accessibility score estimation\n- Time estimate để remediate tất cả issues\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eRemediation Priority\u003c\/h2\u003e\n\u003cp\u003eSau 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.\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003eTôi vừa hoàn thành accessibility audit và có danh sách sau.\nHãy giúp tôi sắp xếp ưu tiên và lập kế hoạch remediation:\n\n[Dán danh sách a11y issues từ audit]\n\nPhân loại theo:\n1. Impact (tác động đến user):\n   - Blocker: Ngăn user hoàn thành task hoàn toàn\n   - Critical: Gây khó khăn nghiêm trọng\n   - Major: Ảnh hưởng trải nghiệm đáng kể\n   - Minor: Gây bất tiện nhưng không chặn task\n\n2. Effort (nỗ lực sửa chữa):\n   - Quick fix: Dưới 1 giờ\n   - Moderate: 1-4 giờ\n   - Complex: 1-3 ngày\n   - Major refactor: Hơn 3 ngày\n\n3. Scope (phạm vi ảnh hưởng):\n   - Toàn site (global header, footer, nav)\n   - Nhiều trang (shared components)\n   - Một trang (page-specific)\n\nTạo remediation plan:\n- Sprint 1: Tất cả Blocker + Quick fix Critical\n- Sprint 2: Remaining Critical + Quick fix Major\n- Sprint 3: Remaining Major + toàn site issues\n- Ongoing: Minor improvements\n\nKèm theo:\n- Estimated total effort (person-days)\n- Testing strategy sau khi fix\n- Regression prevention (automated tests để giữ a11y score)\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eBước tiếp theo\u003c\/h2\u003e\n\u003cp\u003eAccessibility 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 \u003ca href=\"\/collections\/ung-dung\"\u003eThu vien Ung dung Claude\u003c\/a\u003e.\u003c\/p\u003e\n","brand":"Minh Tuấn","offers":[{"title":"Default Title","offer_id":47730151784660,"sku":null,"price":0.0,"currency_code":"VND","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0821\/0264\/9044\/files\/claude-audit-accessibility-wcag-ki_m-tra-kh_-nang-truy-c_p-website.jpg?v=1774715638","url":"https:\/\/claude.vn\/products\/claude-audit-accessibility-wcag-ki%e1%bb%83m-tra-kh%e1%ba%a3-nang-truy-c%e1%ba%adp-website","provider":"CLAUDE.VN","version":"1.0","type":"link"}