Algunos roles 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 roles 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.
role presentation y role none
Ambos roles tienen el mismo propósito: hacer que un elemento sea ignorado por el lector de pantalla. ¿Cuándo
utilizar estos roles? En SVG decorativos.
Mientras que role='presentation' es el más antiguo y ampliamente soportado,
role='none' es más moderno y explícito, pero tiene el mismo efecto. En la práctica, podemos usar
cualquiera.
A continuación, el siguiente SVG es decorativo, por lo tanto se usará role='none' y el lector de pantalla no
lo anunciará.
role tablist + role tab + role tabpanel
role='tablist' se utiliza para indicar que un contenedor (como un div o un nav) contiene un
conjunto de
elementos que actúan como pestañas (o tabs).
role='tab' se asigna a los elementos de una interfaz de pestañas, que generalmente se representan
como botones o enlaces.
role='tabpanel' se asigna a un contenedor de contenido que está asociado a una pestaña específica.
Este contenido generalmente está oculto cuando la pestaña no está seleccionada y se muestra cuando la pestaña
correspondiente es activada.
A continuación, toca cada botón o prueba hacer foco con 'Tab', y escucha cómo los diferentes lectores de
pantalla anuncian el contenido:
Contenido de Pestaña 1
Contenido de Pestaña 2
💬 NVDA: Cuando el botón recibe foco, anuncia Seleccionado.
💬 Narrador de Windows: Cuando el botón recibe foco, anuncia Seleccionado.
💬 Screen Reader: Cuando el botón recibe foco, anuncia Seleccionado.
💬 TalkBack: Cuando el botón se toca, anuncia Seleccionado.
role alert
role='alert' se utiliza para marcar elementos que contienen mensajes importantes o urgentes que
necesitan ser anunciados de inmediato a los usuarios de lectores de pantalla.
NOTA: La alerta será anunciada solo una vez.
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: Anuncia Alerta, la contraseña es incorrecta.
💬 Narrador de Windows: Anuncia Alerta, la contraseña es incorrecta.
💬 Screen Reader: Anuncia La contraseña es incorrecta,
alerta.
💬 TalkBack: Anuncia La contraseña es incorrecta.
role menu y role menuitem
Si tenemos un menú interactivo, es importante utilizar estos roles juntos para garantizar una estructura
accesible: role='menu' se utiliza para el contenedor del menú, y role='menuitem' se
utiliza para cada opción dentro del menú.
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: Una vez presionado el botón anuncia Menú. Y al movernos
por las opciones del menú anuncia Español 1 de 2, Inglés 2 de 2
💬 Narrador de Windows: Una vez presionado el botón anuncia Menú.
Y al movernos por las opciones del menú anuncia Español, elemento de menú, 1 de 2, Inglés,
elemento
de
menú, 2 de 2
💬 Screen Reader: Una vez presionado el botón anuncia Menú. Y al movernos
movernos por las opciones del menú anuncia Español, elemento de menú, 1 de 2, Inglés, elemento de
menú, 2 de 2
💬 TalkBack: Al movernos por las opciones del menú anuncia Español, elemento
del menú, Inglés, elemento del menú.
role dialog
role='dialog' se utiliza para avisar al lector de pantalla que una sección de la página es un
diálogo modal o ventana emergente.
NOTA: Para que el lector anuncie algo, es necesario moverse a algún elemento dentro
del modal o programar un enfoque.
A continuación, presiona el botón.
Agregar producto al carrito
¿Estás seguro de que deseas agregar el producto al carrito?
💬 NVDA: Anuncia Diálogo.
💬 Narrador de Windows: Menciona el elemento enfocado + el título + el párrafo.
role='alertdialog' se usa para confirmaciones críticas, errores graves y alertas de seguridad.
NOTA: Para que el lector anuncie algo, es necesario moverse a algún elemento dentro
del modal o programar un enfoque.
A continuación, presiona el botón.
Eliminar producto
¿Estás seguro de que deseas eliminar el producto?
💬 NVDA: Anuncia Diálogo, seguido del
contenido de una etiqueta p si la hay, seguido del elemento que hayamos enfocado.
💬 Narrador de Windows: Anuncia Alerta,
seguido del contenido de una etiqueta p si la hay, seguido de elementos interactivos si los hay.