What are the aria- * attributes in HTML5?

They are related to page accessibility for people who encounter difficulties due to some condition Special. The term stands for Accessible Rich Internet Applications.

These attributes give better semantics to what is being done by allowing browsers and special software (screen readers, for example) to help the person with special needs take advantage of the content.

When enabled, these attributes are read and perform something different to facilitate those who have difficulties. It may be an explanation of what that is, or it may take a slightly different action to allow usability in adverse conditions.

Curiously, simpler pages are often interpreted more easily by these people. As the content becomes more dynamic, it becomes more important to have these attributes. But it is rare to find pages like this, either because of the professionals' ignorance of the existence and need of this resource, or more rarely because of lack of budget and / or will of the client.

The main attribute is role to tell you the role of that element on the page. The basic HTML is intended to indicate the mechanisms that the browser should perform, they are little or nothing semantic within the context of the page.

But he alone is not enough. It is necessary to clarify all the important properties that the element has so that it is accessible by those who can not identify in the "normal" page.

For example, aria-checked indicates whether an option on a radio button is checked. This is important for those who can not find out visually. Obviously all code needs to know how to manipulate the DOM to update this information properly.

Reference .