La etiqueta aria ayuda a definir una string y proporciona información adicional sobre la estructura del documento para los usuarios que utilizan tecnología de asistencia. En la mayoría de los casos, arial-label se usa para reemplazar una etiqueta existente con información más precisa. Sin embargo, debemos tener cuidado al usar aria-label ya que no funciona con todos los elementos HTML.
El atributo aria-label se puede utilizar con elementos HTML como:
- Seleccione
- área de texto
- botón
- a(cuando href=”#” está en uso)
- audio y video (cuando control=”#” está en uso)
El atributo aria-label no siempre funciona con elementos HTML como span, p, div. Puede funcionar en algunas de las combinaciones de tecnología de asistencia de navegación.
Sintaxis:
<button aria-label="open" onclick="function()">CLICK</button>
Aquí, se creará un botón con «clic» escrito en él. La etiqueta aria: proporciona una etiqueta que menciona exactamente su salida/función mediante el uso de tecnologías de asistencia.
Ejemplo:
<!DOCTYPE html> <html> <head> </head> <body> <center> <h1 style="color:green">GeeksforGeeks</h1> <button value="open">open</button> <button aria-label="opens a new window" value="open"> open </button> </center> </body> </html>
Aquí, como puede ver, se abrirá una página HTML que contendrá botones uno al lado del otro que son idénticos entre sí sin ninguna diferencia. Ahora, si alguien está usando una extensión Chromevox en Chrome y tiene los auriculares puestos mientras presiona la pestaña, escuchará la palabra «abrir» cuando se seleccione el primer botón, mientras que cuando se seleccione el segundo botón escuchará la frase «abre un ventana nueva” . Esto es particularmente útil en casos de personas con problemas de visión que pueden ver los dos botones pero no pueden comprender el texto escrito en ellos.
Salida:
Antes de hacer clic en el botón:
Después:
Publicación traducida automáticamente
Artículo escrito por somsagar2019 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA