Accessibility Testing

• PerceivableThông tin và UI có thể nhận biết bằng mọi sense. Test: alt text cho images, captions cho videos, không dùng chỉ màu sắc để convey information.
• OperableTất cả functionality dùng được bằng keyboard (không chỉ mouse). Test: keyboard navigation, focus visible, không có time limits không cần thiết, no seizure-triggering content.
• UnderstandableText readable, behavior predictable, errors được identify và có hướng dẫn fix. Test: clear error messages, consistent navigation, language attribute đúng.
• RobustContent parse được bởi assistive technologies. Test: valid HTML, ARIA correct, semantic markup, compatible với screen readers.

Chỉ dùng keyboard để test — không chạm mouse:

1. Tab Order: Nhấn Tab từ đầu trang. Focus phải di chuyển theo thứ tự logic (top-left → bottom-right, theo reading order). Không có jumps bất thường.
2. Focus Indicator: Tại mỗi focused element, phải nhìn thấy rõ ràng element nào đang focused (outline, highlight, underline). Không bao giờ "lost focus."
3. Activation: Button → Enter hoặc Space. Link → Enter. Checkbox → Space. Radio → Arrow keys. Dropdown → Space/Arrow/Enter.
4. Modal/Dialog: Khi modal mở, focus phải trap trong modal (Tab không ra ngoài). Escape đóng modal. Sau khi đóng, focus trả về element đã trigger modal.
5. Navigation Menu: Arrow keys điều hướng trong menu. Escape collapse menu. Enter/Space select item.
6. Skip Links: Đầu trang nên có "Skip to main content" link (thường ẩn, chỉ hiện khi focused). Enter → focus nhảy tới main content. Quan trọng cho screen reader users.
7. Carousels/Sliders: Arrow keys để navigate. Pause button accessible bằng keyboard.

Screen Readers phổ biến:

• NVDA (Windows)Free, open-source. Phổ biến nhất Windows. Dùng với Chrome hoặc Firefox. Download: nvaccess.org. Keys: Insert+F7 = elements list, Insert+Space = toggle browse/focus mode.
• VoiceOver (macOS)Built-in, miễn phí. Bật: Cmd+F5 hoặc System Preferences → Accessibility. Dùng với Safari. VO+Arrow = navigate, VO+Space = activate.
• VoiceOver (iOS)Settings → Accessibility → VoiceOver. Swipe để navigate, double-tap để activate. Critical vì nhiều người khiếm thị dùng iPhone.
• TalkBack (Android)Built-in Android screen reader. Settings → Accessibility → TalkBack. Swipe navigate, double-tap activate.

Khi test với screen reader, verify:

• Page title announces correctly khi navigate đến page mới
• Images: informative images có meaningful alt text; decorative images có alt="" (skip được)
• Form inputs: label được đọc khi focus vào input
• Buttons: purpose rõ ràng ("Submit Order" không phải "Click here")
• Error messages: announced automatically khi form submit fails (aria-live)
• Modal: "dialog" role được announce, close button accessible
• Dynamic content updates: aria-live regions announce changes

• Contrast Ratio: Normal text: minimum 4.5:1 (AA). Large text (≥18pt or 14pt bold): 3:1. Check tại webaim.org/resources/contrastchecker
• Không dùng chỉ màu sắc: Error fields phải có icon + text + màu đỏ, không chỉ màu đỏ. Graphs phải có labels/patterns ngoài màu sắc.
• Zoom 200%: Ctrl+ (Windows) hoặc Cmd+ (Mac) zoom tới 200%. Content phải vẫn readable, không bị cắt, không bị horizontal scroll (trừ tables/maps).
• Color blindness: Chrome DevTools → Rendering → Emulate vision deficiencies. Test Deuteranopia (phổ biến nhất), Protanopia, Achromatopsia.
• Focus indicator contrast: Focus outline cũng phải đủ contrast. White outline trên white background = invisible.

• aria-labelĐặt tên cho element khi không có visible text: <button aria-label="Close">×</button>. Screen reader đọc label thay vì "×".
• aria-describedbyLink input với helper text/error: <input aria-describedby="email-error">. Screen reader đọc description khi focus.
• aria-expandedTrạng thái mở/đóng: aria-expanded="true/false" trên button điều khiển dropdown/accordion.
• aria-liveAnnounce dynamic changes: aria-live="polite" (đợi user xong), aria-live="assertive" (interrupt ngay). Dùng cho error messages, status updates.
• aria-hiddenaria-hidden="true" ẩn element khỏi screen reader. Dùng cho decorative icons bên cạnh text label. Đừng dùng để ẩn important content.
• roleGán semantic role: role="alert" cho errors, role="dialog" cho modals, role="navigation" cho nav. Dùng HTML semantic elements khi có thể.

• axe DevToolsChrome/Firefox extension (free). Scan page → list violations với severity và fix guidance. Best free tool. axe-core cũng có thể integrate vào Playwright: await checkA11y(page).
• LighthouseBuilt-in Chrome DevTools → Lighthouse → Accessibility score 0-100. Shows specific violations. Run in CI với lighthouse-ci npm package.
• WAVEwave.webaim.org — paste URL hoặc dùng extension. Visual overlay hiển thị errors/warnings/features directly trên page.
• Pa11yCLI tool, Node.js. pa11y https://example.com. Tích hợp vào CI pipeline. Config WCAG level và rules.