aria-
Attributes beginning with and related to accessibility can be found on many web pages and in quite a few StackOverflow questions . For example:
<div class="text">
<label id="tp1-label" for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" size="20"
aria-labelledby="tp1-label"
aria-describedby="tp1"
aria-required="true" />
<div id="tp1" class="tooltip"
role="tooltip"
aria-hidden="true">El nombre es obligatorio</div>
</div>
What are attributes and what are they for aria-*
? How many are there and which are the most important? And why should they be used?
ARIA stands for Accessible Rich Internet Applications , it is a technical specification whose objective is to increase the accessibility of dynamic content and dynamic interface components developed with HTML, JavaScript, Ajax and associated technologies.
ARIA describes how to add semantics and metadata to HTML content in order to make interface controls and dynamic content more accessible, especially to people with disabilities.
Reference
Attributes
aria-*
are used to add semantic information to elements of a website, specifically properties and states (which are part of roles), which can:Reference
The list of attributes
aria-*
is as follows:Reference
To say what the most important attributes are, I think it is a bit subjective, there is no official reference or recommendation and I think it is better to see the compatibility offered or not by devices such as screen readers, Braille keyboards, etc.
Here I leave a constantly updated link that shows the compatibility of some ARIA attributes with the different screen readers that exist.
We should use ARIA attributes so that people who have (we) have a disability can easily navigate and understand the structure of the websites that we implement/develop/create.
Among the devices for people with disabilities are:
In this link in English there are some stories of how some people with disabilities use the web and what tools we can use so that these people can better navigate our websites.
It may not be taken as an answer but this article can help to know and understand the standard
WAI-ARIA
In conclusion
What is ?
It is a set of attributes to help improve the semantics of a website or a web application to help assistive technologies, such as screen readers for the blind, make sense of certain things that are not native to HTML.
about its use?
This article can help you understand the WAI-ARIA standard.
What is ARIA?
ARIA is short for Accessible Rich Internet Applications. ARIA is a set of attributes that you can add to HTML elements that define ways to make web content and applications accessible to users with disabilities who use assistive technology (AT). When accessibility issues can't be managed with native HTML, ARIA can help bridge those gaps.
How many are there and which are the most important?
These are all the roles in one image. In addition to roles, it has states and properties.
For more information, see the official WAI-ARIA documentation or Google's Introduction to ARIA.