Test an Interactive Component for Accessibility
Combine semantic markup, keyboard checks, focus management and automated testing for a dependable component.
Introduction
Interactive components can look correct while remaining difficult to operate without a mouse or understand with assistive technology. Testing needs several layers because automated tools detect only part of the problem. A menu or modal is a useful practice target because it includes state, focus and keyboard behaviour.
How the topic works
Begin with the expected interaction pattern and native elements. Verify the accessible name, role, state and relationships in the browser accessibility tree. Use only the keyboard to open, operate and close the component. Focus should move predictably, remain visible and return to a sensible place. Dynamic status changes need perceivable communication.
Practical workflow
- Write the component’s expected mouse, keyboard and screen-reader behaviour.
- Inspect markup and the accessibility tree for names, roles, states and relationships.
- Test Tab, Shift+Tab, Enter, Space, Escape and arrow keys where the pattern requires them.
- Check focus placement, focus visibility, zoom and reduced-width layout.
- Run automated tests, repair issues and repeat the full manual path.
Tools and technologies
- Browser accessibility inspector
- Keyboard-only test sheet
- An automated checker such as axe
Example
When a modal opens, focus moves to its heading or first meaningful control, background content cannot receive focus, Escape closes it and focus returns to the button that opened it. A validation message is associated with its field and announced.
Common mistakes
- Counting a passing automated scan as complete
- Moving focus without returning it on close
- Adding ARIA roles that contradict native semantics
Security and best practice
Test at 200% zoom and with motion preferences where relevant. Avoid keyboard traps and ensure every action available by pointer also has a keyboard path.
Portfolio task
Key takeaways
- Accessibility requires multiple test methods.
- Focus is part of component state.
- Native patterns reduce custom behaviour and risk.