Component Library
Element Style
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.
- This element has a 'role' attribute even though native semantics are available.
- Don't apply `role` attributes if you can convey the same information using native semantics.
- A link is used when button functionality is required, or vice versa.
- Images used as form controls are not marked up correctly
Recommendation
As the screen reader focus moves to an element, the user expects to hear an accurate description of the element. Don't apply "role" attributes if you can convey the same information using native semantics.
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.
- 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.
- Make sure any hidden or screen reader specific information is accurate in describing the element.