What are aria-* attributes in HTML5 for?


Since the release of HTML5, I have seen several aria attributes in HTML tags, such as aria-disabled , aria-required , aria-readonly , among others.

What are they for?


They are related to theaccessibility of the page for people who find difficulties due to some special condition. The term stands forAccessible 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 do something different to make it easier for those who are struggling. It might be an explanation of what that is, or it might take a slightly different action to allow usability under adverse conditions.

Interestingly simpler pages tend to be more easily interpreted by these people. As content becomes more dynamic, it becomes more important to have these attributes. But it is rare to find pages like this, either due to the professionals' ignorance of the existence and need for this resource, or more rarely, due to a lack of budget and/or the client's desire.

The main attribute is role to tell what role that element is on the page. Basic HTML is intended to indicate the mechanisms the browser should perform, they are little or no 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 it is accessible by those who cannot identify it on the "normal" page.

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

Reference .

Scroll to Top