Los enlaces o botones etiquetados como «Más información» o «Saber más» son elementos recurrentes en las interfaces de usuario. Su objetivo es proporcionar a los usuarios la posibilidad de ampliar información sin sobrecargar la interfaz con exceso de texto.
Sin embargo, estos elementos pueden representar un obstáculo para las personas que utilizan tecnologías de asistencia como lectores de pantalla si no se diseñan de manera accesible.
## Tipos de elementos utilizados para «Más información»
Existen diversas formas de implementar estos elementos en una interfaz:
1. **Enlaces (``)**: Se utilizan para dirigir a los usuarios a otra página o sección donde pueden encontrar más información detallada.
2. **Botones (`
## Características de accesibilidad que deben cumplir
Para garantizar la accesibilidad de estos elementos, se deben considerar las siguientes prácticas:
– **Proporcionar contexto adicional**: Es importante que el propósito del enlace o botón sea claro. En lugar de un texto genérico como «Más información» o «Saber más», se debe especificar el contenido relacionado. Existen diversas técnicas para lograr esto, las cuales se detallan en el apartado siguiente.
– **Uso adecuado de roles y atributos ARIA**: Si se utilizan elementos personalizados en lugar de los semánticamente correctos (`` o `
## ¿Y cómo proporcionar ese contexto adicional?
Existen varias formas de proporcionar más contexto a estos elementos, ya sea de forma visible o solamente perceptible para los lectores de pantalla, pero en caso de elegir la segunda opción, siempre se habrá de garantizar que el texto accesible comience o contenga el texto visible.
Algunas de las formas de agregar contexto a estos elementos son las siguientes:
### Uso del atributo `aria-label`
Este atributo permite proporcionar una etiqueta accesible cuando el texto visible del enlace o botón no es suficientemente descriptivo.
«`html
Más información
«`
En este caso, los lectores de pantalla anunciarán «Más información sobre accesibilidad web» en lugar de simplemente «Más información».
Hay qué ser muy cuidadosos con el uso de este atributo, ya que su contenido reemplazará completamente el texto visible del enlace ante las tecnologías de accesibilidad, por lo que poner un texto inexacto o muy diferente del visible generará más problemas que soluciones.
Puede encontrarse más detalles en las siguientes técnicas de las WCAG 2.2:
– [ARIA6: Using aria-label to provide labels for objects](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA6)
– [ARIA8: Using aria-label for link purpose](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA8)
– [ARIA14: Using aria-label to provide an invisible label where a visible label cannot be used](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA14)
### Uso del atributo `aria-labelledby`
Cuando el contexto ya está presente en otro elemento de la interfaz, `aria-labelledby` permite referenciarlo para proporcionar mayor claridad.
«`html
Accesibilidad web
Aquí, el enlace hereda la descripción del encabezado asociado, proporcionando un contexto más claro sin necesidad de texto adicional. Al añadir los dos IDs en el atributo, tanto el propio como el del encabezado, las tecnologías de asistencia concatenarán ambos textos y leerán el enlace como «Más información Accesibilidad web»
Más detalles pueden ser consultados en estas técnicas de las WCAG:
– [ARIA7: Using aria-labelledby for link purpose](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA7)
– [ARIA9: Using aria-labelledby to concatenate a label from several text nodes](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA9)
– [ARIA10: Using aria-labelledby to provide a text alternative for non-text content](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA10)
– [ARIA16: Using aria-labelledby to provide a name for user interface controls](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA16)
### Inclusión de contenido oculto mediante CSS
Otra estrategia consiste en agregar elementos que proporcionen información contextual sin estar visibles para los usuarios visuales, pero accesibles para tecnologías de asistencia.
«`html
Más información
sobre accesibilidad web
«`
Y en el CSS:
«`css
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
«`
Esta técnica asegura que el texto adicional sea leído por los lectores de pantalla sin afectar el diseño visual de la interfaz.
**Nota importante**: Esta clase normalmente ya viene incluida en Frameworks como bootstrap, pero en caso de no existir será necesario añadirla.
Más detalles sobre esta técnica pueden encontrarse en el siguiente enlace: [C7: Using CSS to hide a portion of the link text](https://www.w3.org/WAI/WCAG21/Techniques/css/C7)
## Conclusión
El uso de enlaces y botones «Más información» es una práctica extendida en el diseño de interfaces, pero si no se implementan de manera accesible, pueden generar confusión y barreras para muchos usuarios. Aplicar técnicas como `aria-label`, `aria-labelledby` y contenido oculto con CSS permite mejorar la experiencia de todos, asegurando que la información adicional sea clara y comprensible.
Diseñar con accesibilidad no solo beneficia a personas con discapacidad, sino que mejora la usabilidad general del sitio o aplicación para todas las personas.