What is ARIA?
ARIA stands for Accessible Rich Internet Applications.
It is a system of attributes that can be applied to web elements to expand their functionality beyond the interactivity available to native browser elements.
It is quite an expansive topic on it’s own and cannot possibly be covered here – but we can look at some general ideas.
ARIA-label tells screen readers what to speak
In the example below, The relevance of the text to the button may be apparent for someone not visually impaired, but when a screen reader is moving between elements it speaks out loud what the element is. In this case it skips the regular text and lands on the link and says “Link, Heck Yeah!”.
Not very helpful… but we can use ARIA to create a more helpful interaction. if we give it a ARIA Label – done in the code as aria-label=”Sign up for our newsletter and get $10 off your first order!” – the screen reader now reads out the label: “Link, Sign up for our newsletter and get $10 off your first order!”
Note: HTML also allows a “title” attribute for elements. This title shows when a user hovers over the element. However, it should not be confused as being A11y-helpful – screen readers do not speak the title attribute.
ACTION ITEM: Review the site to discover elements that need extra ARIA applied… especially labels.
ARIA-hidden tells screen readers to skip
Some web resources are not accessible. For example, a link to a map for directions to a business location.
No amount of ARIA labeling can compensate for the visual data available in a map. In this case, we can add aria-hidden=”true” – which has the effect of hiding it for screen readers without changing it’s visibility for other users.
ACTION ITEM: Review the site to discover links to resources that are not accessible and apply aria-hidden.
Forms likely need a lot of ARIA definitions
As mentioned elsewhere, Web Forms are particularly challenging in terms of navigation and interaction.
The full scope of what may need to be done to all the forms on a site cannot be covered here. Each form must be considered separately based on it’s purpose.
ACTION ITEM: Review each form individually and assess what ARIA attributes should be applied.