5 Formas de solucionar el enlace "leer más"
Los enlaces con texto "Leer más" se utilizan comúnmente en sitios web, pero no son muy descriptivos cuando se leen fuera de su contexto circundante. Esto no es un problema para la mayoría de los usuarios en la web, pero ver enlaces fuera de su contexto circundante es un error muy común que afecta a los usuarios de lectores de pantalla.
El criterio 2.4.4 La finalidad del enlace (en contexto) de las directrices de accesibilidad al contenido web (WCAG 2.1) que intenta proporcionar una respuesta para estos enlaces no descriptivos. Este criterio de éxito se centra en garantizar que el texto del enlace que utiliza para los enlaces sea comprensible. Enlaces como "Haga clic aquí", "Leer más" o "Más información" son ejemplos comunes de enlaces que no son muy descriptivos.
¿Cuál es el impacto para los usuarios de lectores de pantalla?
Los usuarios lectores de pantalla a menudo no tienen la ventaja del contexto circundante para los enlaces "Leer más", y por lo tanto estos enlaces pueden ser inútiles para este tipo de usuarios. Estos usuarios escucharán "Leer más, enlace", pero no se proporciona ninguna información de a donde estos enlaces los llevarán.
Si un usuario encontró un vínculo no descriptivo en su lista, podría pasar a él y, a continuación, leer el texto alrededor del vínculo para comprender el contexto. Pero el usuario no puede estar seguro de si el enlace no descriptivo hace referencia al contenido antes o después del enlace, y esto puede hacerlo frustrante.
Si el contenido de la página es contenido estático y no se actualiza con el tiempo, hay varios métodos disponibles para que estos vínculos sean comprensibles.
- Opción uno: Simplemente cambie el texto del enlace para que sea más descriptivo. Esta opción es de lejos la mejor práctica, ya que beneficia a todos, siempre y cuando el texto del enlace se relacione claramente con la página que está vinculada.
- Opción dos: Texto oculto dentro del enlace
Otra opción que hará que el enlace sea accesible es incluir texto oculto dentro del enlace que no sea visualmente visible, pero que se pueda leer con un lector de pantalla.
Podemos hacer esto agregando algo de texto a nuestro vínculo y, a continuación, agregando un elemento al texto que nos gustaría ocultar visualmente, esto se consigue agregando la clase "sr-only". Con esta opción se tendrá el mismo aspecto visual.
<a href="#">
Leer más
<span class="sr-only">
Sobre cómo la accesibilidad benefia a todos
</span>
</a>
El "sr-only" CSS class:
.sr-only {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
width: 1px !important;
height: 1px !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden;
white-space: nowrap;
}
Opción tres: Elimine el enlace "Leer más"
En algunas situaciones, es posible simplemente eliminar el enlace "Leer más" y hacer que el encabezado descriptivo sea el enlace.
Al igual que todos los hipervínculos, asegúrese de que el encabezado vinculado se subraya de lo contrario las personas pueden no darse cuenta de que hay un vínculo.
La desventaja es que la apariencia de un enlace puede no ser tan obvia.
- Opción cuarta: Utilice aria-label para reemplazar el texto del enlace
Es posible reemplazar el texto del vínculo de un hipervínculo mediante el atributo aria-label. Cualquier valor que utilice para la etiqueta aria se convertirá en el nuevo nombre del enlace. Se tiene presente la jerarquía, si en un elemento existe la etiqueta ARIA el contenido de esta prevalece ante cualquier etiquetado
Esta opción es similar a agregar texto oculto, pero viene con algunas desventajas. Por ejemplo, el valor de una etiqueta aria no siempre cambia cuando las personas cambian el idioma de la página web mediante varias y no siempre es distinguible, especialmente con lectores de pantalla con versiones antiguas y navegadores web.
<a href="#" aria-label="Leer más sobre los servicios del equipo de acceso digital">
Leer más
</a>
- Opción quinta: Utilice aria-labelledby para hacer referencia a otro texto en la página
Al igual que aria-label, aria-labelledby se puede utilizar para nombrar objetos en su sitio web. En lugar de agregar directamente una etiqueta, puede hacer referencia a una etiqueta en otro lugar de la página para proporcionar contexto para un objeto. Aria-belledby también admite la vinculación de varias etiquetas para hacer un nombre más descriptivo para el objeto.
<h2 id="blog-title-0">
Servicios de acceso digital
</h2>
<p>
El equipo de Babel-accesibilidad proporciona una variedad de soluciones personalizadas para hacer que su sitio web, aplicación o documentos sean accesibles.
</p>
<a href="#" id="read-more-0" aria-belledby="read-more-0 blog-title-0">
Leer más
</a>