Noticias y consejos

Seis cambios introducidos en Noticias y Consejos del Centro AT3 para mejorar la legibilidad para todos, incluidas las personas con discapacidad y las personas mayores.

Verdadera confesión: Me gusta escribir sobre cosas de las que no sé demasiado. A lo largo de los años he observado que esta ingenuidad es valiosa para llegar a un gran número de personas. Al fin y al cabo, lo que es nuevo para mí suele serlo para los demás. Pero cuando empecé a investigar cómo crear enlaces accesibles, pensé que era un tema que conocía razonablemente bien.
Me equivoqué.
"Dado que los enlaces son tan básicos para la funcionalidad de los contenidos web, los enlaces inaccesibles son uno de los obstáculos más graves para la accesibilidad general". —WebAIM "Introducción a los enlaces y el hipertexto"
Gulp.
Por ello, este mes se han introducido algunos cambios en AT3CenterBlog.com para mejorar la experiencia y la usabilidad del sitio para un público más amplio. Ese público incluye visitantes con discapacidad visual y/o cognitiva, personas mayores, así como cualquiera que utilice un teléfono inteligente o una tableta. Sí, la mayoría de nosotros.
A continuación se exponen seis normas para enlaces de hipertexto accesibles que han provocado cambios en este sitio.

Uno: el texto del enlace debe informar fuera de contexto

Creía que ya lo tenía claro. En AT3CenterBlog no encontrarás "haz clic aquí" o "lee más" como enlaces independientes. Sabía que los usuarios de lectores de pantalla a menudo escanean los enlaces de una página para ojear el contenido y la estructura. Los enlaces deben ser descriptivos e inteligibles por sí solos. Además, "haga clic aquí" es innecesario y molesto. Los lectores de pantalla ya anuncian cuándo un texto es un enlace.
Aun así, el menú de mi sitio ofrecía dos páginas: "¿Qué es AT?" y "Acerca de".
¿Sobre qué?
Ahora dice "Sobre este blog".
Más información accesibilidad del texto del enlace y frases que deben evitarse (como por qué ya no incluyo el "leer más sobre" dentro del enlace).

Dos: Los enlaces deben parecer enlaces

Esto es tan obvio. Creía que ya lo tenía claro. El corolario de esta regla es que el texto que no es un enlace no debe parecerse a un enlace. De ahí que ya nadie subraye los títulos de los libros (aunque a los dinosaurios nos enseñaron a hacerlo en nuestros trabajos mecanografiados).
Aun así, el menú de este sitio ofrecía "Qué es AT" y "Acerca de" utilizando la misma fuente gris que el cuerpo del texto.
Ahora son rojos.
Nota: existe una excepción a esta regla para los enlaces de navegación principales de un sitio. He observado que WebAIM.org también tiene un menú sin enlaces distinguidos. Sin embargo, creo que poner el mío en rojo ayudaría a cualquiera que no sepa de convenciones web (como algunos miembros de mi propia familia...).

Tres: Los enlaces de color deben tener una relación de contraste de 3:1

La mejor práctica consiste en subrayar todos los enlaces del contenido. Sin embargo, si los enlaces no están subrayados, las directrices de accesibilidad web (WCAG 2.0) exigen que el texto del enlace sea discernible del texto del cuerpo en una relación de contraste de al menos 3:1.
He utilizado WebAIM comprobador de contraste de enlaces después de inspeccionar mi página para conocer el valor hexadecimal de mis colores. Descubrí que tenía que ajustar los colores del texto del cuerpo y del texto de los enlaces para conseguir esa proporción. Por supuesto, una solución más fácil sería subrayar todos los enlaces, pero no me gusta lo recargado que queda en la página.
Más información requisitos de color y contraste.

Cuatro: El color no basta para pasar el ratón por encima o centrar la atención en el teclado

Esto era nuevo para mí. Si un sitio web utiliza el color en lugar del subrayado para designar los enlaces, esos enlaces deben cambiar de forma diferente cuando el ratón pasa por encima de ellos. Lo mismo ocurre con el "keyboard focus" (uso de las pulsaciones del teclado para navegar por los enlaces). Los enlaces "deben presentar un 'designador sin color'".
Probando esta regla, no encontré ningún cambio cuando usé mi ratón para pasar por encima de un enlace AT3CenterBlog. Con el foco del teclado (utilizando la tecla de tabulación) me encontré con que se destacan con un contorno sutil caja.
Para cumplir con WCAG 2.0, he cambiado mis enlaces para que sean más perceptibles para la selección. Ahora todos los enlaces aparecen subrayados al pasar el ratón por encima o con el teclado (gracias, Ayuda WordPress).
Más información apariencia del enlace.

Cinco: Los Linktips no pueden proporcionar información vital

Ouch. Esto duele. Un linktip (o tooltip) es el texto que a veces aparece cuando pasas el ratón por encima de un enlace. Sin embargo, nadie ve un linktip en un dispositivo móvil o utilizando el teclado. Los lectores de pantalla tienen que estar configurados para leerlos (algunos no pueden).
Los Linktips se crean con HTML usando el "atributo title". Aunque no soy programador, los he estado codificando a mano. Ahora los Linktips están muertos para mí. Más información problemas de accesibilidad con el atributo title.

Seis: Los enlaces que se abren en una nueva pestaña necesitan una etiqueta permanentemente visible

Ouch otra vez. Tenía la impresión de que podía utilizar el linktip para avisar a los usuarios de los enlaces que se abren en una nueva pestaña. En cambio, esa información debería formar parte del propio texto del enlace. Por otra parte, había aprendido que estaba bien poner la frase "todos los enlaces se abren en una nueva pestaña" en una página. Sin embargo, ¿cómo podría encontrar esto alguien que escanea enlaces con un lector de pantalla?
Cuanto más leo, más me resigno a que los enlaces se abran en la misma pestaña (y a que los visitantes confíen en su botón de retroceso). Este es un cambio que he introducido en esta entrada y en las siguientes.
El Consorcio World Wide Web (W3C) recomienda que los enlaces se abran en una nueva ventana o pestaña sólo cuando sea necesario (por ejemplo, cuando al abrir un enlace se cierra la sesión de un usuario en una zona segura de un sitio).
Si tiene algún problema de accesibilidad con las Noticias y Consejos del Centro AT3, por favor envíame un correo electrónico. Juntos podríamos mejorar el sitio (¡y escribir un blog sobre ello!)