What is ARIA?

Accessible Rich Internet Applications (ARIA) is a set of different roles and attributes that allow your application to be more accessible for people with disabilities.

Accessible coding with ARIA can have a significant impact as approximately 15% of the population have some kind of disability, according to the World Health Organization.

Roles help screen readers and user agents to properly and consistently display and read your page to the user. It also helps boost your page's SEO.

Each semantic html element has their own intrinsic roles. When using semantic elements, you don't have to worry about your element's role. However, if you need to use divs, it's imperative that you add the proper semantic roles to your elements and keep in mind that each role can only have specific children.

ARIA attributes allow the modification of elements' states and properties. This instructs assistive technology on how to interact with and present the content to the user.

ARIA attributes are divided into 4 categories: widget attributes, live region attributes, drag-and-drop attributes and relationship attributes.

This attribute defines a string that helps to name the element the attribute is on.

aria-label should be used sparingly as a last resource if there are no other ways to add an accessible name to the element or the available name is not properly descriptive of the element.

Read more

You can create your own aria-* attributes as needed, opening the door for a huge variety of interactions and code structures.

Be careful to not use pre-existing aria attributes here or use too much, as this can possibly lower the accessibility of your page.

Alt text (alternative text) is used as a way to help people with disabilities and user agents to better understand what that image is all about.

It should be concise and explain the image in a few words. If the image includes words that are important for the understanding of the image, these words should be included in the alt text. Alt-text is what is shown in place of the image when users choose not to display images in their browsers.

Alternatively, the title attribute doesn't necessarily describe the image or icon, it is a way to add more information in case the image is not sufficiently self-explanatory. Titles are also what's displayed in the browser tooltip when you hover over the image.

Since titles cannot be read out loud by user agents, you should always opt for using alt-text instead.