Enlaces accesibles

CSS no tiene la misma importancia inmediata para la accesibilidad que HTML, pero puede ayudar o dañar la accesibilidad, dependiendo de cómo se utilice. Para decirlo de otra manera, es importante que consideres algunos consejos de mejores prácticas para asegurarte de que el uso de CSS no arruine la accesibilidad de tus documentos.

Uno de los errores más comunes es establecer un color para un enlace, pero no agregar los estados con :hover, :focusy :active

Un mal ejemplo de esto:

a {
  color: #ca0000;
  text-decoration: none;
}

/* y no le agrego mas estilos a mi enlaces porque no me importa nada */

¿Cuál es el problema y cómo solucionarlo?

• Sin los estados que faltan, nuestro enlace no será accesible, los usuarios pueden confundirse mientras navegan por nuestro sitio web con un mouse o un teclado, porque no podrán identificar donde se puede hacer clic y donde no.
• De forma predeterminada, los navegadores configuran text-decoration: underline;para los enlaces, pero eliminar esta propiedad también puede generar confusión en algunos casos.
• Intenta usar un color que se adapte a tu diseño pero que sea obvio si se puede hacer clic en un texto.

¡Intenta navegar en esta página presionando la Tab y mira lo qué sucede!

Vas a poder detectar facilmente y de manera accesible los enlaces disponibles #Impresionante #LlorandoEnPosicionFetal

Un buen ejemplo de un enlaces con estados seria:

a {
  color: #ff0000;
}

a:hover,
a:visited,
a:focus {
  color: #a60000;
  text-decoration: none;
}

a:active {
  color: #000000;
  background-color: #a60000;
}

¡Opinen y valoren!