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
Roles indicate what the particular element is or what it’s doing.
Landmarks
Many roles are so-called landmarks and give semantic value to an element. Examples are role="navigation", role="banner" or role="main".
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 <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
Properties give an element additional meaning. A well-known example is aria-label="" or aria-labelledby="".
States
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.
JavaScript
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.