Accessibility & Responsive QA
A practical acceptance checklist for keyboard access, semantics, contrast, zoom, and narrow screens.
What you will learn
- Run a repeatable manual QA pass.
- Prevent clipped mobile controls.
- Improve semantic and keyboard behavior.
Keyboard pass
Complete the primary task without a mouse.
- Logical focus order
- Visible focus
- No keyboard trap
- Escape closes overlays
- Enter and Space activate expected controls
- Focus returns after dialogs
Semantic pass
Use native elements first: button for actions, link for navigation, heading levels for structure, label for form controls, table markup for tabular data, and dialog semantics for modals.
Responsive pass
Test at 320px, 375px, 768px, 900px, and a wide desktop. Also test browser zoom at 200%.
- No horizontal page clipping
- Menu close button remains visible
- Dialogs fit the viewport
- Tables scroll inside their wrapper
- Buttons wrap without overlap
- Text is not covered by previews
Theme and contrast
Review light, dark, and custom primary colors. Status must not be communicated by color alone, and muted text must remain legible on every surface.