ARIA Introduction
Websites were simple, accessible documents in the early days of the Internet. But accessibility was lost when websites became applications. Accessible Rich Internet Aplications (ARIA) extends HTML to create accessible web applications.
ARIA is a set of HTML attributes for developers to control the information surfaced by assistive technology. ARIA can define an element's label, state, properties, and role.
ARIA is a powerful tool and must be used with care. The first rule of ARIA is to not use ARIA. Use semantic HTML and augment with ARIA. However, we often need to use ARIA to extend HTML or fix inaccessible code. Understanding ARIA is critical for today's web developers.
ARIA does not make your application accessible. It makes it understandable. You can't put role="button" on a div and expect it to work with a keyboard and screen reader. Adding role="button" simply tells assistive technology to expect the div is actually a button. You would still need to make the div focusable and listen for onkeypress of enter and spacebar. Which is why it's always better to start with a semantic button.
Commonly used ARIA attributes​
- Roles: button, img, link
- Properties: aria-label, aria-live, aria-haspopup
- States: aria-required, aria-selected, aria-expanded
- Landmarks: main, banner, search, region
- Complex roles: alert, tablist, table, toolbar
You will find ARIA examples within the Tutorial pages.