Algunas etiquetas 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 estas etiquetas 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.
<label>
La etiqueta <label> se utiliza junto a elementos de formulario como
<input>, <textarea> o <select> para proporcionar una
descripción útil. Esta descripción es visible en la interfaz y también es anunciada por los lectores de pantalla
cuando el usuario se posiciona en el campo correspondiente.
A continuación, prueba posicionarte en el campo o hacer foco con la tecla 'Tab' y escucha cómo
los diferentes lectores de pantalla anuncian el contenido:
💬 NVDA: Anuncia el valor de label + Edición en blanco.
💬 Narrador de Windows: Anuncia el valor de label + Editar.
💬 Screen Reader: Anuncia El valor de label + Edita texto.
💬 TalkBack: Anuncia Editar casilla + El valor de label.
<dialog>
La etiqueta <dialog> representa una caja de diálogo o modal. El comportamiento
por defecto de esta etiqueta en cuanto a la accesibilidad es el siguiente: al abrirse el modal, el primer
elemento interactivo recibe el foco automáticamente. Además, el modal se puede cerrar con la tecla 'Escape'.
Cuando el modal se cierra, el foco regresa automáticamente al elemento que lo abrió.
A continuación, presiona el botón y escucha cómo los diferentes lectores de pantalla anuncian el
contenido:
💬 NVDA: Anuncia Diálogo y hace foco en el primer elemento interactivo del modal.
💬 Narrador de Windows: Hace foco en el primer elemento interactivo y luego anuncia el título del
modal.
💬 Screen Reader: Hace foco en el primer elemento interactivo del modal.
💬 TalkBack: Hace foco en el primer elemento interactivo del modal y luego anuncia Se abrió el
diálogo.
<details> + <summary>
La etiqueta <details> nos proporciona la posibilidad de crear un elemento desplegable
La etiqueta <summary> es el título del elemento desplegable. Aparece siempre, se encuentre
desplegado o no.
A continuación, toca el elemento desplegable, o haz foco con 'Tab' y escucha cómo los
diferentes lectores de pantalla anuncian el contenido:
¿Por qué es importante la etiqueta details para la accesibilidad?
Es importante para la accesibilidad web porque permite a los usuarios, incluidos los que utilizan lectores
de pantalla, acceder y entender secciones de contenido expandible de forma controlada.
💬 NVDA: Anuncia el contenido de la etiqueta <summary> + Botón
contraído.
💬 Narrador de Windows: Anuncia el contenido de la etiqueta <summary> +
Botón contraído.
💬 Screen Reader: Anuncia solo el contenido de la etiqueta <summary>.
💬 TalkBack: Anuncia Contraída + el contenido de la etiqueta <summary>.
<fieldset> + <legend>
La etiqueta <fieldset> se utiliza para agrupar campos relacionados dentro de un
formulario.
La etiqueta <legend> se utiliza para proporcionar un título descriptivo a los
campos agrupados en un fieldset.
A continuación, prueba posicionarte en algún campo o hacer foco con 'Tab' y escucha cómo los
diferentes lectores de pantalla anuncian el contenido:
💬 NVDA: Anuncia el título de <legend> + agrupación + el valor de
<label>
💬 Narrador de Windows: Anuncia solo el contenido de <label> + Editar.
💬 Screen Reader: Anuncia solo el contenido de <label> + Edita texto.
💬 TalkBack: Anuncia solo el contenido de <label> + Editar casilla.
<q> y <blockquote>
Las etiquetas <q> y <blockquote> proporcionan contexto semántico a las
citas. Esto permite que los lectores de pantalla y otras tecnologías de asistencia identifiquen y anuncien
correctamente el texto citado.
La etiqueta <q> está pensada para citas breves que forman parte del flujo de
un párrafo, y suele aplicarse dentro de una oración o al final de una frase. Esta etiqueta agrega
automáticamente comillas alrededor del texto en muchos navegadores, indicando que es una cita breve sin
interrumpir el flujo del texto. Las comillas se pueden estilizar con CSS.
Ejemplo:
Como dice el refrán, el que no arriesga, no gana, una lección que siempre aplicamos en nuestro equipo
de desarrollo.
La etiqueta <blockquote> se utiliza para citas más largas o para aquellas que
se desean destacar visualmente en un bloque separado. Esta etiqueta por sí sola no añade comillas alrededor
del contenido por lo que se deben introducir manualmente.
Ejemplo:
"El éxito no es el final, el fracaso no es fatal: lo que cuenta es el valor para continuar".