¿Cómo crear enlaces accesibles?

May 09 2022
Nosotros, los desarrolladores, siempre intentamos escribir un código limpio y tener en cuenta que otros desarrolladores tendrán que leer nuestro código, comprenderlo y poder trabajar con él. Escribimos documentación, elegimos cuidadosamente los nombres de nuestras variables para que quede claro qué contiene esa variable, y escribimos funciones limpias y nombramos las funciones para describir mejor su funcionalidad.
Foto por Cristina Morillo

Nosotros, los desarrolladores, siempre intentamos escribir un código limpio y tener en cuenta que otros desarrolladores tendrán que leer nuestro código, comprenderlo y poder trabajar con él.

Escribimos documentación, elegimos cuidadosamente los nombres de nuestras variables para dejar en claro qué contiene esa variable, y escribimos funciones limpias y nombramos las funciones para describir mejor su funcionalidad. ¿Cómo es que no hacemos lo mismo para todos nuestros usuarios finales, especialmente cuando podemos lograrlo escribiendo HTML semántico correcto?

Sé que todos quieren que su sitio web sea totalmente accesible para todos los usuarios, no hay duda al respecto. Pero todavía lo tratamos como una ocurrencia tardía, después de que el sitio web se activa, ejecutamos algunas pruebas y secuencias de comandos automatizadas para decirnos cuál es nuestra posición con respecto a la accesibilidad e intentar solucionarlo. Arreglar todo lo que surge de esas pruebas puede ser complicado y abrumador.

Todavía estoy tratando de descubrir cómo inspirar a las personas para que se tomen la accesibilidad en serio. Lo intentaré de esta manera, escribiré sobre el código y cómo nuestro código se transmite a los lectores de pantalla.

Tengamos en cuenta que crear un sitio web accesible no tiene por qué ser una molestia y tampoco es necesario que aprendas a navegar un sitio web con un lector de pantalla. Te voy a mostrar algunos consejos y trucos para hacer que escribir código sea accesible… espera… ¡más accesible!

¿Donde empezamos?

Foto por Porapak Apichodilok

Cuando me sumergí en la accesibilidad y comencé a aprender todo lo que hay que saber, vi que esas pruebas y scripts no cubren todo.

Pensé que podría comenzar esto con algo que podría pensar que es básico y accesible desde el primer momento. Un enlace. Pero hay algunas cosas que debemos tener en cuenta. Voy a repasar cómo los lectores de pantalla manejan los enlaces y que todos deben agregar un enlace "Saltar al contenido principal" cuando tienen navegación en su sitio web.

Enlaces que se abren en una nueva pestaña o ventana

Para mi sorpresa, los lectores de pantalla no brindan la información de que los enlaces se abrirán en una nueva pestaña o en una nueva ventana. Cuando nosotros, los desarrolladores, usamos target=”_blank” o target=”_new” en el código, no hay forma de que un usuario de lector de pantalla sepa qué sucede si hace clic en él.

Hay algunas maneras de lograr esto.

Estilos globales

De acuerdo con este artículo podemos, por ejemplo, usar el elemento ::after para decirle al usuario del lector de pantalla que este enlace abre una nueva pestaña.

Esto se hace agregando esto:

content: 'Opens in a new tab',

Pero tenga en cuenta que esto significa que el lector de pantalla lee todo el contenido de las clases ::after y ::before (excepto las cadenas vacías).

a[target=”_blank”]:after{
   content: "Opens in a new tab";
   position: absolute;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   margin: -1px;
   padding: 0px;
   width: 1px;
   height: 1px;
   border: 0;
}

Creando un componente

Otra forma de crear este tipo de enlace es crear un componente para enlaces de texto que maneje la opción de abrir una nueva ventana o pestaña. Podemos manejarlo agregando un lapso o una etiqueta aria que lo anuncie al usuario.

const link = {
   target: '_blank',
   title:'Home page'
}
return (
  <a href="/" target={link.target||'_self' }>
    {link.title}
      <span>
        {`Opens in a new 
          ${link.target === '_blank' ?'tab' : 'window' }
        `}
      </span>
  </a>
)

a span {
   position: absolute;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   margin: -1px;
   padding: 0px;
   width: 1px;
   height: 1px;
   border: 0;
}

const link = {
   target: '_blank',
   title:'Home page'
}
return (
   <a href="/" 
      target={link.target || '_self' } 
      aria-label={`${link.title} opens in new 
                   ${link.target === '_blank' ? 'tab' : 'window' }
                 `}
   >
      {link.title}
   </a>
)

Los usuarios de lectores de pantalla tienen un atajo para obtener una lista de todos los enlaces en la página, como un índice en un libro. Los enlaces deben ser descriptivos por sí mismos. No pueden contener simplemente, por ejemplo, "Leer más".

¿“Leer más” de qué?

Si tiene bloques de artículos de noticias con título, descripción y luego un enlace para leer más sobre el artículo, podría, por ejemplo, agregar una etiqueta aria que diga "Leer sobre..." y el nombre del artículo.

Aquí hay un ejemplo de un lector de pantalla donde el usuario pide ver una lista de todos los enlaces en la página. Como puede ver, esta no es una buena lista.

Creando un enlace accesible para todos

Aquí hay algunas pautas sobre la apariencia de los enlaces en un sitio web:

  • Los enlaces tienen que ser visualmente distinguibles del texto que no los rodea. El enlace podría ser de un color diferente con un subrayado.
  • Los enlaces deben tener un estado de foco visible y ser accesibles con el teclado.
  • Si parece un enlace, tiene que comportarse como un enlace → que cambia la URL de la página.
  • Debería ser fácil para los usuarios hacer clic en un enlace, así que tenga en cuenta que debe tener un buen relleno dentro del enlace. Es realmente difícil para las personas con malas habilidades motoras, por ejemplo, para mí, poder pasar el mouse sobre enlaces que tienen menos de 16 px por 16 px de tamaño.
  • Los enlaces deben tener un estilo de indicador de desplazamiento visual.
  • El cursor debe aparecer en el estilo de puntero, para indicar que es un enlace.

En Chrome, puedes inspeccionar el enlace y ver lo que lee la pantalla sin dejar de escuchar la música que estás escuchando.

Cuando inspecciona el enlace y puede inspeccionar el árbol de accesibilidad:

Aquí hemos seleccionado un enlace y en el árbol de accesibilidad podemos ver el enlace y tiene el texto “Blog”.

Si el título de nuestro enlace no tiene sentido y no sabemos por qué no se muestra correctamente, podemos mirar debajo de nuestro árbol de accesibilidad y ver todos los atributos agregados al enlace.

Conclusión

Esto puede parecer mucho trabajo, pero todas estas son soluciones que solo tiene que abordar una vez por proyecto. Puede crear un estilo global para un enlace que se abre en una nueva ventana o pestaña o crear un componente de enlace.

Espero que esto haya despertado su interés y encuentre esto factible como una tarea en su próximo sprint.

© Copyright 2021 - 2022 | unogogo.com | All Rights Reserved