Don't Over ARIA

I feel that it is important to do a post about a lesser known attribute called ARIA (Accessible Rich Internet Application). This attribute allows for extra information to be given to an HTML element. Many lists I post and the footer bar at the bottom of my pages have aria-labels to let a screen reader identify what the list is for and where the footer is. Lists should generally include an aria-label since they are only identified by a generic "list" identifier otherwise and so remembering what the list belongs to can be mentally taxing. If you use divs to organize your content, giving it an aria-label can also help to ease the mental load on a screen reader user by helping them know exactly what that div group is for.

It is important not to misuse ARIA attributes, however, since it can be extremely annoying to a screen reader user. For example, aria-live allows for a screen reader to announce when an element on the page changes, but if you set an element to have aria-live="assertive" and that element updates a lot, it can do more harm than good since it interrupts what the screen reader is doing every time it updates.

I have found that many of the websites I visit, it seems like especially with video content, aria-live is extremely overused. The live attribute is also accompanied by a ping sound so every time the video counter updates, a ping is played and Voiceover is interrupted to announce the time left on the video. It makes trying to read whatever I am trying to read very frustrating and I will often go searching for a different source of the information simply because I can't get past the first five words.

Something that should be kept in mind when thinking of how a screen reader reads compared to how a person reads, is that a screen reader can't mark its place. When it is interrupted, it can't scan and find where it was to pick up reading...it has to start over from the very beginning. That is why it is also important to keep paragraphs and content in reasonable lengths so if a screen reader user does have an interruption, they don't have to reread ten minutes of content.

It is important to use the HTML attributes and elements where they are available, only use ARIA to add functionality that can't be done by something already in HTML, and keep aria-live polite unless ABSOLUTELY necessary. To learn more about all that ARIA has to offer and how to properly use it, refer to the extensive documentation.