ARIA attributes and How to Ase Them
ARIA is an acronym for Accessible Rich Internet Applications. It is another tool for web designers to make content accessible for screen readers.
Why use ARIA?
ARIA attributes were created to help screen readers identify page elements that do not have conventional HTML tags. These are usually responsive page elements created with JavaScript such as widgets, hints and error messages, or live content updates. It is important to remember that you should always try to use HTML tags before ARIA because they override HTML semantics that add information as well as affect the behavior of screen readers.
How to Use ARIA Attributes
Let’s start with a button. In many cases, we can just use the <button> tag because we are creating a button for the purpose of one action like submitting a form.
<button type= “submit” > Submit Form </button >
But what if you wanted to create a button that toggles? The aria attribute “aria-pressed” gives an element a true or false state.
<button type= “button” aria-pressed= “true”> Opt in to emails </button>
The true or false state would not be communicated without the Attribute, but it is also important to remember the “ button type= “ so that the browser knows what the purpose of the button is. The user can toggle between the true and false states by using the mouse “enter” or “space” keys as well as touch screens. This is how you would style it.
Button {
color: white;
background-color: #000;
padding: 2px 5px;
}
[aria-pressed] {
position: relative;
bottom: 3px;
right: 3px;
box-shadow: 2px 2px 0 #ffffff, 3px 3px #000;
}
[aria-pressed= ‘true’] {
box-shadow: inset 0 0 0 0 #000000, inset 3px 3px 0 #fff;
}
Conclusion
While you most likely will not be using ARIA attributes often (unless you are really into JavaScript), it is important to have them in your web design tool belt. Visual Studio Code has many ARIA attributes built into their EMMET functionality. If you want to learn all the technical aspects of ARIA, the W3C has a manual. If you want to learn more in a more approachable way, I recommend the book, Inclusive Components by Heydon Pickering.