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 HTML attributes that can be added to elements to make them meaningful or more accessible.
Semantic HTML over ARIA
The important thing to realize is that semantic HTML is always better than using ARIA attributes. Is there no existing HTML 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 HTML.
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 HTML 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
Semantic HTML is always preferred over ARIA
As mentioned earlier, sematic HTML always takes precedence over ARIA. So in the example above, always go for the HTML elements
Other roles give structural meaning to user interface (UI) elements. For example,
Properties give an element additional meaning. A well-known example is
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.
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