How we can solve this problem?
The answer is ARIA and today we will learn ARIA.
ARIA stands for the 'Accessible Rich Internet Application'. ARIA in DOM bridges the gap between the DOM and Assistive tools. Where-ever there is no semantic tag ARIA helps in adding the additional information to make it accessible for the tools.
1) ARIA are the HTML attributes
2) ARIA adds subtle information in the DOM for the Assistive tools.
There is 3 part of the ARIA:
aria-role in layman means telling the tools 'what' it is. Eg: with semantic HTML
header assistive tools can recognize that it is a header. If you are working on a feature such as a menu and there is no native HTML then we can use
aria-role. AT will identify 'what' tag it is because of 'aria-role'. An important thing to remember about
aria-role once they are set they won't get changed.
Eg: Here we are using
role=banner. This will notify the screenreaders
this is a banner.
<div aria-role="banner"> <h1>Some Heading...</h1> </div>
There are 7 categories of Roles:
e. Composite widget
f. Live region
aria-property in layman language telling the AT 'what' property it has. It is more descriptor of the tool. It explains the relationship with the other elements. You can use the aria property with native and non-native
HTML tags. Similarly, like the
property can't be changed too.
Eg: In this example as the input has no
label tag we can use ARIA property for AT to read the label.
<input type="search" aria-label="enter product name to search..." />
Eg: In this based on the user action we can toggle the
aria-checked state and AT will be notified accordingly.
<ul> <li aria-checked="false">Apple</li> <li aria-checked="true">Orange</li> </ul>
There is a saying:
No ARIA is better than the wrong ARIA.
The reason for this is ARIA augments the ADOM (accessibility DOM) for the assistive tools. Wrong ARIA will provide the wrong information to the assistive users.
Eg: instead of using role="button" use native tag. It would be too noisy for the AT
<div role="button">I am button</div>
1) No ARIA is better than bad ARIA
2) Always prefer semantic tag over ARIA
3) Do not change the behavior of the native HTML tags
4) For any focusable elements do not add