Tipografías accesibles para personas con dislexia
Descubre las tipografías más recomendadas para personas con dislexia. Aprende cómo elegir fuentes accesibles que mejoren la lectura
Los “mecanismos de salto de bloques de contenido” (más comúnmente llamado, “enlace saltar a”), son una característica de accesibilidad esencial que permite a los usuarios evitar los menús de navegación y otros bloques repetitivos de contenido.
La mayoría de los CMS (sistemas de gestión de contenido) implementan automáticamente el mecanismo para evitar los bloques de contenido (“enlaces saltar a”). En otras palabras, si creas tu página web utilizando un CSM o implementando un plugin, es probable que ya tengas el mecanismo para saltar bloques de contenido, aunque lamentablemente, no siempre es funcional.
En algunos casos, el mecanismo funciona perfectamente (incluso si el propietario de la página no sabe que la web lo tiene). Sin embargo, es una buena idea verificar su funcionamiento en la página web.
Los “enlaces saltar a” son importantes para las personas que utilizan solo el teclado (sin ratón) para navegar por Internet. Esto incluye a las personas que utilizan lectores de pantalla (software que convierte el texto en audio o braille) y otras tecnologías de asistencia.
Los usuarios de teclado navegan principalmente utilizando los comandos Tab y Shift+Tab, que mueven el enfoque del teclado hacia arriba y hacia abajo en la página web.
Si un sitio web tiene docenas de hipervínculos de navegación en la parte superior de cada página, es posible que necesites presionar la tecla Tab varias veces para llegar al contenido en cada página, lo cual es frustante, especialmente si estás pasando por un proceso de varias páginas (como el proceso de compra de algún artículo en la web).
Los mecanismos de salto de bloques de contenido suelen aparecer cuando el usuario presiona Tab por primera vez en una nueva página. El usuario puede presionar Enter para activarlo, evitando elementos repetitivos que aparecen en todo el sitio web.
En realidad se trata simplemente de un enlace que ancla al primer elemento de la página tras el bloque de contenido repetitivo, a continuación te dejo el código para que puedas copiar y pegar en tu web. Pero cuidado, debes cambiar el identificador por el primer identificador tras el bloque que quieras saltar (en este caso hemos usado 'Content').
Al comienzo del body debemos incluir el siguiente código, en algún HTML genérico, por ejemplo en el de la cabecera:
<a class='admin-bar skip-link' href='#content'>Saltar al contenido principal</a>
Y en la hoja de estilos o en la cabecera:
.skip-link{ z-index: 9999; padding: 5px; padding: 0.5rem; font-size: 1rem; color: #000; background: #FFF; position: absolute; top: -5rem;}
.skip-link:focus{top:0;}
Debemos asegurarnos que en toda la web el cuerpo siempre esta identificado con el id 'content'.
Las Pautas de Accesibilidad al Contenido Web (WCAG) requieren “enlaces saltar a” en el Criterio de Éxito (SC) 2.4.1, 'Bypass Blocks' (Evitar Bloques). Aquí está el texto completo del requisito:
'Un mecanismo está disponible para pasar por alto bloques de contenido que se repiten en varias páginas web'.
Hemos visto muchas implementaciones de “enlaces saltar a” que cumplen con el criterio WCAG SC 2.4.1, pero no cumplen con otros criterios importantes.
Para determinar si el mecanismo de salto de bloques de contenido de tu web mejora la accesibilidad, pruébalo y así detectarás si comete alguno de estos errores comunes:
Según WCAG SC 2.4.4, 'Link Purpose (In Context)' (Propósito del Enlace [En Contexto]), todos los hipervínculos deben tener un texto que explique su propósito. En otras palabras, los usuarios deben poder entender exactamente cuál es el propósito o la función del enlace al que van a dirigirse.
Si tu mecanismo de salto de bloques de contenido tiene un texto corto, por ejemplo, 'saltar' o 'bypass', algunos usuarios no sabrán para qué sirve ese mecanismo. Es mucho mejor poner un texto un poco más largo pero que entiendan los usuarios. Por ejemplo, ‘Ir a contenido’ o ‘Saltar a contenido’.
Muchos sitios web tienen este mecanismo visualmente ocultos hasta que el usuario presiona la tecla Tab por primera vez. Eso es aceptable, pero asegúrate de que el mecanismo se vuelva visible cuando recibe el enfoque del teclado.
Recuerda, la accesibilidad web no es solo para personas ciegas, hay personas con diferentes tipos de discapacidades. Muchos usuarios de teclado pueden percibir el contenido visualmente, y si tu mecanismo no aparece realmente en la página, algunos usuarios no podrán encontrarlo.
Todo el contenido de texto debe mantener una relación de contraste de color adecuada con su fondo (existen analizadores de contraste de color para ello). De lo contrario, el texto puede ser ilegible para usuarios con deficiencias en la visión del color y otras discapacidades visuales.
Esto también es aplicable al mecanismo. WCAG SC 1.4.3 requiere un contraste de al menos 4.5:1 para texto normal y 3:1 para texto grande. En otras palabras, el texto debe destacar lo suficiente con su fondo para que sea fácilmente legible para todos los usuarios.
Puedes tener buenas razones para agregar más de un 'enlace saltar a' a una página. Por ejemplo, si has publicado un artículo que ocupa varias páginas, puedes incluir una tabla de contenidos al principio de cada página. Podrías incluir también un “enlace saltar a” para el menú de navegación, junto con otro “enlace saltar a” separado para evitar la tabla de contenidos.
Es importante que recuerdes que, los usuarios de teclado, necesitarán pasar por cada mecanismo de salto de bloques antes de llegar al contenido. La mayoría de los sitios web solo necesitan uno o dos “enlaces saltar a”; si agregas de más, piensa en cómo afectarán la experiencia del usuario. Las pautas son más efectivas si las usas antes de hacer el contenido, en vez de después.
Si quieres ayuda con algún problema de accesibilidad o para saber si tu web realmente es accesible a todos los usuarios, ADDAW puede ayudarte realizando una auditoría completa a tu página web.
-Esencial para accesibilidad, permite a usuarios evitar menús repetitivos.
-Algunos CMS implementan los mecanismos de saltar a bloques de contenido automáticamente o a través de algún plugin.
-Importantes para usuarios de teclado (sin ratón), como personas con lectores de pantalla.
-Navegación principal con comandos Tab y Shift+Tab.
-Evita la frustración al presionar varias veces Tab para llegar al contenido.
Texto Confuso:
-Debe explicar claramente el propósito, evita términos poco concisos o cortos como 'saltar' o 'bypass'.
-Recomendamos un texto más descriptivo como 'Ir a contenido' o 'Saltar a contenido'.
-Que esté oculto visualmente es aceptable, pero debe volverse visible al recibir el enfoque del teclado.
-El “enlace saltar a” debe tener un contraste adecuado para que sea legible, siguiendo los estándares WCAG.
-Limita a uno o dos enlaces para no complicar la experiencia del usuario de teclado.
-Asociaciones como ADDAW puede proporcionar una auditoría completa para garantizar la accesibilidad de tu página web.
Auditora de accesibilidad web, desarrolladora de contenido, gestión de redes sociales y otros medios audiovisuales. El progreso existe cuando no mejoras lo que está hecho, sino cuando te esfuerzas por lograr lo que queda aún por hacer.
Descubre las tipografías más recomendadas para personas con dislexia. Aprende cómo elegir fuentes accesibles que mejoren la lectura
Descubre cómo las tecnologías CAPTCHA han avanzado hacia soluciones más accesibles. Este artículo explora desde las pruebas visuales y auditivas hasta las innovaciones actuales, ofreciendo una visión completa sobre cómo hacer CAPTCHA más inclusivo.
Este artículo explica como hacer un correo electrónico más accesible e inclusivo para todo tipo de personas y como beneficia a todos el hacerlo.
Justificar texto en la web dificulta la lectura y la legibilidad. Descubre por qué es una mala elección en diseño web.
La metodología WCAG EM nos permite realizar auditorías de accesibilidad con un procedimiento seguro y estandarizado.
Para que sirven las declaraciones de accesibilidad y que pasos se deben seguir para realizarlas correctamente
Mejora la accesibilidad de tus PDFs: claves para crear documentos inclusivos y accesibles para todos
¿Los emojis favorecen a la accesibilidad? ¿O no lo hacen? Sí, pero no de cualquier manera, aquí recogemos algunas formas correctas y consejos.
Mejora la accesibilidad web con los tests de accesibilidad automáticos. Descubre herramientas y mejora la experiencia del usuario en tu sitio
Los cuatro principios rectores de las WCAG establecen que los contenidos web deben ser Perceptibles, Operables, Comprensibles y Robustos (POCR).
Un árbol de decisión es una sencilla manera de saber cuándo hay que escribir un texto alternativo en una imagen y cuándo no.
Un vídeo accesible incluye subtítulos; una transcripción; buen uso del color de los textos y de los parpadeos. Debe crearse en un formato accesible
Cuando el texto alternativo se coloca bien, mejora tanto la accesibilidad del sitio web como el SEO de la pagina. ¡Conoce las claves para hacerlo bien!
Descubre en qué consiste el Acta Europea de Accesibilidad, los sectores y productos obligados a cumplir, y cómo afectará tanto a empresas como a usuarios.
Como afecta la accesibilidad a la seguridad cuando iniciamos sesión en una web, y las pautas a seguir según la WCAG 2.2