Accessible Rich Internet Applications
ARIA is a set of attributes that you can add to HTML elements to make content web apps more accessible for people who use screen readers, text-to-speech, and any other assistive technologies. When native HTML can’t handle accessibility issues, ARIA helps fix it. ARIA doesn’t affect page layouts or browsing, but rather provides additional semantics for assistive technologies. ARIA consists of 3 components: Roles, States, and Properties.
Roles
Roles describe the user interface element. One example of roles are widget roles i.e., menu bars, opening/closing tabs, etc. Each element should only have one role and once that role is set, it doesn’t change.
There are 6 different types of Roles:
- Widget roles
- Composite roles
- Document structure roles
- Landmark roles
- Live Region roles
- Window roles
Ex: role=”role_name” and role=”search”
States and Properties are the 2 attributes within ARIA that are used together to support existing ARIA roles. They are divided into 4 categories:
- Drag-and-drop attributes
- Live region attributes
- Relationship attributes
- Widget attributes
Properties
Properties describe the characteristics of elements to give them more meaning i.e., have a pop-up associated with them. Most properties are static and don’t change very often.
Ex: aria-labelledby and aria-describedby
States
States describe the current interaction state of an element, informing the assistive technology if it is busy, disabled, selected, or hidden. They can change on their own or with user interaction.
Ex: aria-disabled=”true” and aria-checked=”false”
ARIA gives elements extra labels and descriptions making your webpages easily accessible for people using assistive technology. ARIA isn’t yet completely supported by all browsers and screen readers, so it’s important to keep in mind that it’s best to use native HTML whenever possible. ARIA doesn’t change the design or behavior for non-assistive technology, so it’s a great way to include those that are.