ARIA is an acronym that stands for Accessible Rich Internet Applications.
ARIA was developed to help people with disabilities access web applications and content in a better and more understandable way.
ARIA helps provide additional information about the semantics of various elements of a web page to assistive technologies, such as screen readers.
ARIA comes as a form of attributes in HTML elements, as shown below:
<!-- An "ul" element with ARIA role as menubarand "li" as menuitem--><ul role="menubar"><li role="menuitem">Home</li><li role="menuitem">About</li><li role="menuitem">FAQ</li></ul>
In the example above, assistive technology (a screen reader, for example) interprets ul as a menu and reads it aloud with enough information that the end-user (typically someone with a disability) can understand.
As noted earlier, ARIA is a form of attributes in an HTML element.
There are three ways in which ARIA can be used as attributes on HTML elements:
Roles define a type of user interface (UI) element (e.g., role=“ROLE_NAME”). Once a role is set, it does not change.
Examples are shown below:
<!-- using aria role on a button --><button role="button">Click me</button><!-- using aria on a heading --><h1 role="heading">This is a heading</h1><!-- using aria on an image --><img role="img" src="image-source" alt="aria"/>
From the example above, we can see that ARIA can be used as role and can have values such as img, document, heading, list, listitem, etc., depending on the element to which it is applied.
States and properties are applied to elements and used to support ARIA roles that exist on a page.
States can change independently or with user interaction (i.e. aria-checked and aria-disabled), usually with JavaScript.
See the example below:
<!-- accessible name: send email --><button aria-label="send email">send</button><!-- accessible name: Your name --><input aria-label="Your name" type="text" name="name" placeholder="What's your name?"/>
Other commonly used ARIA states and properties include the following: