El término ARIA con atributos como aria-labeledby y aria-hidden significa Aplicaciones de Internet enriquecidas accesibles. Estos son el conjunto de estándares y pautas que hacen que las aplicaciones web sean más accesibles para las personas con discapacidad. Esto se utiliza en el contenido interactivo de un documento HTML, como mensajes de error, barras de progreso, sugerencias progresivas, etc.
Hay múltiples atributos ARIA que son los siguientes
- aria-autocompletar
- aria-comprobado
- aria-discapacitado
- aria-expandida
- aria-oculto
- aria-no válido
aria-hidden: el atributo ARIA aria-hidden se usa para indicar tecnologías de asistencia como lectores de pantalla que dictan el contenido del documento a personas con discapacidades que el contenido con este atributo se puede omitir. El lector de pantalla omitirá el contenido del elemento sin dictarlo.
¿Qué tipo de contenido debería tener un atributo oculto en aria ? El contenido que no tiene un significado significativo se puede omitir. Los ejemplos de dicho contenido incluyen lo siguiente.
- Contenido puramente de presentación
- Contenido de marcador de posición
- Contenido que es específico del entorno de usuario basado en navegador
Diferencia entre los atributos ocultos nativos de aria-hidden y HTML:
- Atributo oculto de HTML : se utiliza para indicar que el navegador web no debe mostrar el contenido.
- Atributo oculto de aria : se utiliza para indicar que las tecnologías de asistencia, como los lectores de pantalla, pueden omitir el contenido con este atributo.
Ejemplo:
HTML
<!DOCTYPE html> <html> <body> <h2>Welcome To GFG</h2> <p aria-hidden="true"> This content will be skipped by Screen-Readers </p> </body> </html>
Producción:
Los contenidos del elemento «p» son contenidos no interactivos, por lo que están ocultos para los lectores de pantalla.
Las cosas clave que debe saber sobre aria-hidden son las siguientes.
- aria-hidden no puede ser utilizado por elementos enfocables.
- aria-hidden marcará todos sus elementos secundarios como ocultos. No es posible establecer un elemento secundario con
aria-hidden=”false” y hacerlo visible.
aria-labelledby: El atributo aria-labelledby se utiliza para relacionar etiquetas y el elemento que contiene el texto de etiquetado. El valor de aria-labelledby suele ser el ID de un elemento que contiene el texto de etiquetado. Puede tener más de un id de elemento en su parte de valor.
Esto es muy similar a un elemento de entrada que contiene un atributo for para vincular etiquetas.
Ejemplo:
HTML
<!DOCTYPE html> <html> <body> <h2>Welcome To GFG</h2> <div id="myBillingId">Billing</div> <div> <div id="myFirstName">First Name</div> <input type="text" aria-labelledby="myFirstName" /> </div> <div> <div id="myContactNumber"> Contact Number </div> <input type="text" aria-labelledby ="myFirstName myContactNumber" /> </div> </body> </html>
¿Cuándo usar el atributo de especificación HTML y el atributo ARIA?
Las especificaciones de ARIA también son para contenidos destinados a personas con discapacidades. Puede ser significativo usar el atributo de especificación HTML en algunos casos y la especificación ARIA en algunos casos y esto debe tratarse con respecto a la audiencia objetivo.