Skip to main content

What are ARIA attributes?

Accessible Rich Internet Applications (ARIA) defines ways to make your website more accessible to people with disabilities. These definitions are established by the World Wide Web Consortium (W3C).

ARIA attributes are H​T​M​L attributes that can be added to elements to make them meaningful or more accessible.

Semantic H​T​M​L over ARIA

The important thing to realize is that semantic H​T​M​L is always better than using ARIA attributes. Is there no existing H​T​M​L element for your implementation? Then you can use ARIA attributes to make it accessible or as accessible as possible.

The the best thing for an accessible website is semantic H​T​M​L.

What is the support for ARIA?

ARIA is well supported in most assistive devices, but not fully. This is another reason to always look for a solution in semantic H​T​M​L and use ARIA as the last resort. Current support for ARIA can be reviewed on PowerMapper.

Three types of ARIA attributes

There are three basic types for the ARIA attributes that will be explained further below.


Roles indicate what the particular element is or what it’s doing.


Many roles are so-called landmarks and give semantic value to an element. Examples are role="navigation", role="banner" or role="main".

Semantic H​T​M​L is always preferred over ARIA

As mentioned earlier, sematic HTML always takes precedence over ARIA. So in the example above, always go for the H​T​M​L elements <nav> over role="navigation", <header> over role="banner" and <main> over role="main".

Other roles

Other roles give structural meaning to user interface (UI) elements. For example, role="search", role="tablist" and role="tabpanel".


Properties give an element additional meaning. A well-known example is aria-label="" or aria-labelledby="".


States can represent a state of an element. A good example is aria-expanded="true" to indicate that a drop-down menu is actually expanded. Another example is aria-hidden="true" when an element is not visible.


All states are generally dynamic and thus depend on JavaScript to make good use of them.

Want to know more about ARIA attributes?

In the coming period, I will highlight some commonly used ARIA attributes with corresponding examples and best-practices.

View all blog articles

Scroll to top