WHAT IS ARIA?
Web Accessibility Initiative – Accessible Rich Internet Applications
WAI-ARIA is a set of attributes that define ways to make Web content and Web applications more accessible to people with disabilities. These attributes can be added to any markup, but is especially suited for HTML.
Resource- MDN ARIA docs
Here’s a quick example:
You can also watch me explain the following example here on youtube.
I created a site with an image carousel, the carousel has left and right arrows so the user can click through the images that make up my carousel.
However, in my HTML code there’s initially no information for a screenreader regarding those left/right arrows. A low vision or blind user would get to that part of my site and the screenreader would just read the word “link.”
I can add an ARIA label attribute to each arrow with a semantically meaningful blurb for the screenreader to interpret. I decided my ARIA-label would read, “Click to go to left carousel image.” So much more informative than “link.”
Before ARIA (no ARIA attributes on lines 137 or 140):