Component Library
Code Errors
Issue Description
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
- A element has an ARIA 'role' attribute even though native semantics are available, don' t apply ARIA roles if you can convey the same information using native semantics.
- A link visually looks like a button, or a link is used when button functionality is required (or vice versa).
- Images are used as form controls but not identified up correctly by assistive technology.
Recommendation
By taking advantage of the semantic value of these native HTML elements, you can create accessible content with no extra effort. When it comes to dynamic or interactive features on a website, HTML often needs a little bit of help to convey the right context and meaning to browsers and assistive technologies using ARIA, giving developers additional semantic markup options to improve website accessibility, but should only be used when native HTML markup will not suffice, and not as an alternative for poor structure, and that ARIA should like HTML conform to coding standards.
- Use links for navigation, buttons for actions.
- Where possible, it is recommended to use native HTML elements (<button>, <input type="button">) rather than an ARIA role (role="button") to style components.