Using semantic HTML plays a key role when it comes to accessibility.
WAI-ARIA, the Accessible Rich Internet Applications specification, defines a way to make Web content and Web applications more accessible to people with disabilities.
Note: It is recommended to use semantic elements as the primary method to achieve accessibility rather than adding aria attributes. Adding aria attributes should be seen as a secondary method for creating accessible elements.
role attribute describes the role the element plays in the context of the document.
Check the list of WAI-ARIA roles here
When using icons or images that aren’t absolutely needed to understand the context, we should use
On the other hand, if an icon is crucial to understand the context we should do one of the following:
aria-labelin the element with a meaningful description
aria-labelledbyto point to an element that contains the explanation for that icon
In forms we should use the
for attribute in the label statement:
<div> <label for="name">Fill in your name:</label> <input type="text" id="name" name="name"> </div>
- On MacOS you can use VoiceOver by pressing
- On Windows you can use Narrator by pressing Windows logo key + Ctrl + Enter.