Accessibility
Testing and validation
Run automated tests using the likes of Axe, Lighthouse, WAVE.
Manually test desktop scenarios with keyboard only (no mouse).
Validate HTML with W3C validator. Ensuring no duplicate IDs, missing labels, or invalid ARIA.
Checklist for Developers
Semantic HTML and structure
Keyboard accessibility
Images and media
Text and content
Forms
ARIA and roles
Responsive and zoom
Responsibilities of a developer
Ensure semantic integrity
Don’t skip heading levels or misuse elements out of context. Plus, always test the final structure for proper screen reader flow and navigation.
Add meaningful contextual values
When using DS components, and based on a component’s context, provide meaningful values for attributes like ‘aria-label’, ‘aria-described by’. Always label a modal, or describe a custom button’s purpose.
Test focus behavior
Make sure all dynamic content (popups, modals, menus) are accessible without a mouse. Remember to always run full-application focus tests.
Provide meaningful text alternatives
Always add clear, contextual labels when using components. Remember to add alternative text and meaningful link labels. Always test how screen readers interpret your final interface.