Use standard controls appropriately and ensure that non-standard controls are properly marked up using WAI-ARIA and throughly tested
Design Notes
Non-standard components, complex widgets
Complexity is the enemy of accessibility. Where possible include simple, conventional HTML elements in designs over complex custom solutions.
For example, if a date is required from a form user then a simple text input generally provides better accessibility than a custom date picker. The reason being browsers can offer a more accessible experience for native HTML elements by default over custom components. As there's no consistent user interface presentation for custom components, they can also pose a usability challenge as they require a user to 'learn' how to use them.
In addition, avoid combining or nesting several interactions in one — such as housing a form with a range slider inside a modal window. This, again, is likely to lead to less accessible experiences for users and require more effort for developers and testers.
Where the solution calls for a complex widget to be designed, collaborate with developers and testers to ensure designs have the best chance of being accessible once built.
Developer Notes
Use standard controls, or ensure non-standard controls are correctly marked up using WAI-ARIA
Help assistive technologies understand and accurately describe custom functionality, such as accordions, tabs and custom form fields.
Follow standard, robust ARIA patterns for non-native patterns and components.
Information and tools:
Testing Notes
Non-standard controls are properly marked up using WAI-ARIA and thoroughly tested
Refer to the ARIA authoring practice information to check how to optimise components for screen readers and other assistive technology. For example, ensuring the expanded /collapsed states for an accordion are announced to non sighted users.
Impact range: Medium - High
Test type: Semi-automated
- ARC Toolkit (ARIA checks and Send DOM to ARIA Checker)
- aXe
Information:
WCAG Reference: Understanding Success Criterion 4.1.2 Name, Role, Value