Algunos atributos HTML son esenciales para mejorar la accesibilidad web, especialmente para usuarios de lectores
de pantalla. En esta sección, realizaremos pruebas para demostrar cómo estos atributos pueden optimizar la
experiencia de navegación.
Atención: Para realizar las pruebas, asegúrate de tener un lector de pantalla
activo, como NVDA, Narrador de Windows, Screen Reader, TalkBack o VoiceOver.
alt
El atributo alt se utiliza para proporcionar una descripción detallada sobre una imagen o gráfico.
A continuación, si estás utilizando TalkBack prueba tocar la imagen. Si estás utilizando alguno de los otros
lectores mencionados, prueba llegar a la imagen con las flechas hacia arriba o hacia abajo del teclado.
💬 NVDA: Anuncia Gráfico, Avatar de Luciano Treachi.
💬 Narrador de Windows: Anuncia Avatar de Luciano Treachi.
💬 Screen Reader: Anuncia Avatar de Luciano Treachi.
💬 TalkBack: Anuncia Avatar de Luciano Treachi, Gráfico
alt vacío
El atributo alt vacío (alt="") se utiliza para indicar que una imagen es decorativa y que
no debe ser anunciada por el lector de pantalla.
A continuación, si estás utilizando TalkBack prueba tocar la imagen. Si estás utilizando alguno de los otros
lectores mencionados, prueba llegar a la imagen con las flechas hacia arriba o hacia abajo del teclado.
💬 NVDA: No anuncia la imagen.
💬 Narrador de Windows: No anuncia la imagen.
💬 Screen Reader: No anuncia la imagen.
💬 TalkBack: No anuncia la imagen.
aria-label
El atributo aria-label se utiliza para incluir una descripción que solo será anunciada por un
lector de pantalla. Es muy útil para etiquetar botones o enlaces de iconos/imágenes.
A continuación, toca el botón o prueba hacer foco con 'Tab', y escucha cómo los diferentes lectores de pantalla
anuncian el contenido:
💬 NVDA: Cuando el botón recibe foco, anuncia el contenido de aria-label: Dejar
un me gusta, botón.
💬 Narrador de Windows: Cuando el botón recibe foco, anuncia el contenido de
aria-label: Dejar un me gusta, botón.
💬 Screen Reader: Cuando el botón recibe foco, anuncia el contenido de aria-label:
Dejar un me gusta, botón.
💬 TalkBack: Cuando el botón se toca, anuncia el contenido de aria-label:
Dejar un me gusta, botón
aria-labelledby
El atributo aria-labelledby se utiliza para proporcionar un nombre accesible a un elemento,
utilizando el contenido de uno o más elementos del DOM.
NOTA: Este atributo anula a label, aria-label y al
texto interno del elemento si está presente.
A continuación, prueba posicionarte en el campo o hacer foco con 'Tab', y escucha cómo los diferentes lectores
de pantalla anuncian el contenido:
Todos los campos son obligatorios
💬 NVDA: Cuando el input recibe foco, anuncia el contenido al cual apunta
aria-labelledby: Todos los campos son obligatorios.
💬 Narrador de Windows: Cuando el input recibe foco, anuncia el contenido al
cual apunta aria-labelledby: Todos los campos son obligatorios.
💬 Screen Reader: Cuando el input recibe foco, anuncia el contenido al cual
apunta aria-labelledby: Todos los campos son obligatorios.
💬 TalkBack: Cuando el input se toca, anuncia el contenido al cual apunta
aria-labelledby: Todos los campos son obligatorios.
aria-describedby
El atributo aria-describedby es similar a aria-labelledby, pero se puede usar en conjunto con label
o
aria-label.
A continuación, prueba posicionarte en el campo o hacer foco con 'Tab', y escucha cómo los diferentes lectores
de pantalla anuncian el contenido:
Todos los campos son obligatorios
💬 NVDA: Cuando el input recibe foco, anuncia el contenido de label y luego el contenido de
aria-describedby.
💬 Narrador de Windows: Cuando el input recibe foco, anuncia el contenido de label y omite
aria-describedby.
💬 Screen Reader: Cuando el input recibe foco, anuncia el contenido de label y omite aria-describedby.
💬 TalkBack anunciará: Cuando el input se toca, anuncia el contenido de label y luego el contenido de
aria-describedby.
aria-expanded y aria-controls
El atributo aria-expanded se utiliza para indicar si un elemento (como un menú o acordeón) está
expandido (true) o colapsado (false).
El atributo aria-controls asegura que el lector de pantalla sepa exactamente qué controla cada
botón. Es una buena práctica incluirlo junto a aria-expanded para garantizar mayor semántica y claridad.
A continuación, toca el botón o prueba hacer foco con 'Tab', y escucha cómo los diferentes lectores
de pantalla anuncian el contenido:
Español
Inglés
💬 NVDA: Cuando el botón recibe foco, anuncia Idioma, botón contraído.
💬 Narrador de Windows: Cuando el botón recibe foco, anuncia Idioma, botón
contraído.
💬 Screen Reader: Cuando el botón recibe foco, anuncia Idioma,
botón contraído.
💬 TalkBack: Cuando el botón se toca, anuncia Contraída, Idioma, Botón.
aria-haspopup
El atributo aria-haspopup indica que un cierto elemento tiene un submenú, un diálogo, o una
lista de opciones que se puede desplegar. Este atributo puede recibir el valor de 'true',
'menu', 'dialog', 'grid', 'listbox'.
A continuación, toca el botón o prueba hacer foco con 'Tab', y escucha cómo los diferentes lectores
de pantalla anuncian el contenido:
Español
Inglés
💬 NVDA: Cuando el botón recibe foco, anuncia Idioma, botón de menú submenú.
💬 Narrador de Windows: Cuando el botón recibe foco, anuncia Idioma, elemento de
menú.
💬 Screen Reader: Cuando el botón recibe foco, anuncia Idioma, botón con componente emergente.
💬 TalkBack: Cuando el botón se toca, anuncia Idioma, botón de menú emergente.
aria-hidden
El atributo aria-hidden y el valor 'true', asegura que el contenido no sea anunciado por el lector
de pantalla. ¿Cuándo utilizarlo? En SVG decorativos (íconos, formas, separadores).
A continuación, el siguiente icono SVG tiene el atributo aria-hidden con el valor 'true', por lo tanto no
será anunciado por el lector de pantalla.
aria-busy
El atributo aria-busy se usa en situaciones donde un elemento o una sección de la página está en un
estado de 'carga' o 'ocupado'. Esto permite que las tecnologías de asistencia informen al usuario que algo se
está cargando o procesando y que debe esperar.
A continuación, presiona el botón, o prueba hacer foco con 'Tab' y luego presiona 'Enter'. Escucha cómo los
diferentes lectores de pantalla anuncian el contenido:
💬 NVDA: Cuando el botón es presionado, anuncia Procesando.
💬 Narrador de Windows: Cuando el botón es presionado, no anuncia nada.
💬 Screen Reader: Cuando el botón es presionado, anuncia Cargando...
💬 TalkBack: Cuando el botón es presionado, no anuncia nada.
aria-atomic
El atributo aria-atomic se usa para controlar cómo los lectores de pantalla anuncian las
actualizaciones en el contenido de un elemento cuando este cambia. Si el valor está en 'true', el lector lee
toda la frase. Si está en 'false', el lector solo lee el contenido que cambia.
A continuación, presiona el botón, o prueba hacer foco con 'Tab' y luego presiona 'Enter'. Escucha cómo los
diferentes lectores de pantalla anuncian el contenido:
Estado de la tarea: Pendiente
💬 NVDA: Cuando el botón es presionado, anuncia Estado de la tarea: completado.
💬 Narrador de Windows: Cuando el botón es presionado, anuncia Estado de la tarea: completado.
💬 Screen Reader: Cuando el botón es presionado, anuncia Estado de la tarea: completado.
💬 TalkBack: Cuando el botón es presionado, anuncia Completado.
aria-live
El atributo aria-live indica a los lectores de pantalla que deben prestar atención a las
actualizaciones de contenido en un área específica de la página. Es útil cuando hay contenido dinámico que
cambia, como notificaciones o actualizaciones en tiempo real.
A continuación, presiona el botón, o prueba hacer foco con 'Tab' y luego presiona 'Enter'. Escucha cómo los
diferentes lectores de pantalla anuncian el contenido:
💬 NVDA: Cuando el botón es presionado, anuncia todo lo que esté dentro de aria-live.
💬 Narrador de Windows: Cuando el botón es presionado, anuncia todo lo que esté dentro de aria-live.
💬 Screen Reader: Cuando el botón es presionado, anuncia todo lo que esté dentro de aria-live.
💬 TalkBack: Cuando el botón es presionado, anuncia todo lo que esté dentro de aria-live.
aria-current
El atributo aria-current se utiliza para indicar que un elemento en una lista o en una navegación
es el 'actual' o 'seleccionado'.
A continuación, toca cada enlace o prueba hacer foco con 'Tab', y escucha cómo los diferentes lectores
de pantalla anuncian el contenido:
💬 NVDA: Cuando cada link recibe foco y está seleccionado, anuncia Página actual.
💬 Narrador de Windows: No anuncia nada.
💬 Screen Reader: No anuncia nada.
💬 TalkBack: Cuando cada link recibe foco y está seleccionado, anuncia Página actual.
aria-pressed
El atributo aria-pressed se utiliza para indicar el estado de un botón que puede alternar entre
presionado y no presionado, como en un botón de 'me gusta' o en un botón de 'favorito'.
A continuación, toca el botón o prueba hacer foco con 'Tab', y escucha cómo los diferentes lectores
de pantalla anuncian el contenido:
💬 NVDA: Cuando el botón recibe foco, anuncia Botón conmutador sin pulsar, y
una vez presionado Pulsado.
💬 Narrador de Windows: Cuando el botón recibe foco, anuncia Botón
desactivado, y una vez presionado Botón activado.
💬 Screen Reader: Cuando el botón recibe foco, anuncia Botón sin pulsar, y una
vez presionado Botón pulsado.
💬 TalkBack: Cuando el botón se toca, anuncia Desactivado, botón de
activación, y una vez presionado Activado.
tabindex 0
Los elementos interactivos como 'button', 'a', 'input', 'select', 'textarea',
tienen implícito el atributo tabindex='0', es decir que son enfocables con la tecla 'Tab'. Si
quisiéramos agregar un elemento no interactivo al flujo de tabulación, podemos usar tabindex='0' en dicho
elemento.
A continuación, prueba enfocar cada elemento con 'Tab'. El botón y el input son enfocables por defecto, y además
ahora el párrafo será enfocable ya que tiene el atributo tabindex='0.'
Párrafo enfocable con tabindex 0
tabindex -1
El atributo tabindex='-1' permite dirigir programáticamente el foco a elementos que no son
naturalmente interactivos, como un párrafo, un contenedor de mensajes o una sección. Para realizar un enfoque
programático se necesita algo de código javaScript.
A continuación, presiona el botón o prueba hacer foco con 'Tab' y luego presiona 'Enter'. Una vez presionado el
botón, se enfocará el párrafo de abajo.
Párrafo que será enfocado una vez presionado 'Enter'.
💬 NVDA: Cuando el botón es presionado, anuncia todo el contenido que tenga tabindex -1.
💬 Narrador de Windows: Cuando el botón es presionado, anuncia todo el contenido que tenga tabindex -1.
💬 Screen Reader: Cuando el botón es presionado, anuncia todo el contenido que tenga tabindex -1.
💬 TalkBack: Cuando el botón es presionado, anuncia todo el contenido que tenga tabindex -1.
