What are HTML5 Aria-* attributes for?

Question

I have seen, since the release of HTML5, several attributes aria in HTML tags, for example aria-disabled, aria-required, aria-readonly, among others.

What are they for?

Answer 1

They are related to page accessibility for people who encounter difficulties due to some special condition. The term means 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 enjoy the content.

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

Curiously simpler pages are usually more easily interpreted 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 due to ignorance of the professionals of the existence and necessity of this resource, or more rarely due to lack of budget and/or will of the client.

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

But he alone is not enough. It is necessary to inform more clearly all the important properties that the element has so that this is accessible by those who can not identify on the page "normal".

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

Reference.