Introducción
Accesibilidad Web: Estrategias de Implementación y Ventas
Estrategias para Vender la Accesibilidad Web
Desarrollo con accesibilidad
Accesibilidad en Diseño Web: Fuentes, Contraste y Colores
Accesibilidad Web: Implementación de Skip Navigation
Accesibilidad Web: Uso Efectivo del Atributo Alt en Imágenes
Etiquetas semánticas y accesibilidad en HTML y ARIA
Flujos y Entornos de Desarrollo con Accesibilidad
Testing Manual de Accesibilidad Web para Desarrolladores
Tests Automáticos de Accesibilidad con WAVE, Lighthouse y AXE
"Creación y Gestión de Design Systems Eficaces"
Priorizar y Automatizar la Accesibilidad Web
Próximos pasos
Trabajo en Equipo y Accesibilidad en Desarrollo Web
Casos de Estudio: Mejores y Peores Prácticas Empresariales
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
En un mundo donde la mayoría de las personas utilizan un mouse o una pantalla táctil para navegar, es esencial recordar que para muchos usuarios con discapacidades motrices o visuales, la experiencia es completamente diferente. Estos usuarios suelen depender del teclado para interactuar con las computadoras, lo que puede convertirse en un desafío considerable si no se tienen en cuenta sus necesidades. La tecla Tab, por ejemplo, es fundamental para ellos, ya que les permite avanzar a través de los elementos de la interfaz. Pero, ¿cómo podemos mejorar esta experiencia?
Para facilitar la navegación en el teclado, se puede implementar una característica conocida como "skip navigation" o "skip to main content". Este es un botón casi invisible que aparece únicamente cuando se enfoca con el teclado y permite al usuario saltar directamente al contenido principal de la página. Este elemento es crucial, ya que puede ahorrarles innumerables presiones de la tecla Tab. Los sitios web, como MDN o el Financial Times, ya lo han implementado. Al presionar Tab, aparece un enlace en el inicio de la página que permite moverse directamente al contenido principal.
Implementar un "skip navigation" requiere un entendimiento básico de HTML y CSS:
HTML: Crear una etiqueta <a> justo después de la apertura del <body>.
<a href="#content" class="skip-link">Ir al contenido principal</a>
Destino: El enlace deberá conectar con un ID en el elemento que contiene el contenido principal.
<main id="content">
<!-- Contenido principal -->
</main>
CSS: Utilizar una clase CSS para ocultar este enlace pero hacerlo visible solo cuando tenga el foco del teclado. Un ejemplo de este CSS podría ser:
.skip-link {
position: absolute;
top: -40px;
left: 0;
background-color: #000;
color: #fff;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
El enfoque de los elementos de la interfaz en una página web es crítico para los usuarios que navegan exclusivamente con el teclado. Cuando los elementos no tienen un foco visual claro, estos usuarios pueden sentirse tan perdidos como cuando nosotros no podemos encontrar el cursor del mouse. A menudo, este efecto de foco es un resplandor celeste o azul alrededor del elemento seleccionado.
En caso de que el color del foco no sea estéticamente agradable, es posible personalizarlo con estilos propios. No obstante, bajo ninguna circunstancia debe deshabilitarse el foco escribiendo outline: none; en el CSS, ya que esto eliminaría toda indicación de enfoque visual, complicando la navegación para los usuarios de teclado.
No siempre es necesario un "skip navigation". Si la estructura de un sitio es sencilla, con pocos elementos de navegación, tal vez no sea crucial. Sin embargo, siempre se debe evaluar la estructura del sitio y considerar opciones adicionales como "skip to search".
Por otro lado, es importante recordar que los lectores de pantalla, utilizados por personas con discapacidades visuales, ya poseen atajos para saltar directamente al contenido principal. Sin embargo, aún es recomendable implementar el "skip navigation" para aquellos que usan teclado pero no un lector de pantalla necesariamente.
Un ejemplo de la importancia de la accesibilidad es el caso de una empresa ficticia llamada Manzana. Al agregar la función de "skip navigation" a su sitio y explicar su significado a sus desarrolladores, se mejoró significativamente la capacidad de la empresa de mantener un sitio accesible. Este pequeño cambio no solo demostró preocupación por todos los usuarios, sino que también fomentó la educación y la conciencia sobre la accesibilidad dentro del equipo de desarrollo.
Espero que se animen a implementar un "skip navigation" en sus próximos proyectos web, fortaleciendo así el acceso universal y haciendo la web más inclusiva para todos.
Aportes 10
Preguntas 0
Skip-navigation o Skip-to-main-content → botón semi-invisibles para facilitar navegación con teclado.
Skip-to-search → pasar directamente al formulario de búsqueda dentro del sitio.
Skip-to-footer → ir de un salto (tecla Tab) directo al pie de página de ese sitio.
Skip-to-accesibility-information → informar cómo funciona la accesibilidad en el sitio.
Cuando Eva menciona sobre el indicador de foco de teclado siempre recuerdo este artículo de Sara Soueidan sobre como hacer estilos de foco que genere una diferencia visual suficiente https://www.sarasoueidan.com/blog/focus-indicators/
El uso de skip links también es interesante si en medio del sitio hay grandes bloques de contenido interactivo por teclado, si quieren ver un ejemplo, este tweet de Manuel Matuzovic muestra uno en la página de la gobernación de Viena https://twitter.com/mmatuzo/status/1511744226463305733
Había realizado navegación interna mediante anclas pero desconocía totalmente la existencia de los skip links. Este curso esta superando mis expectativas y por mucho!!! Gracias por todos los casos de uso y ejemplos reales que compartes, sirven mucho para darse una idea de como se implementa todo esto en la vida real y como podemos empezar nosotros.
Muy interesante la temática! hace poco trabajamos con una empresa que nos desarrolló el sitio, y cuando pedimos herramientas de accesibilidad (pensado en general y en particular para un público de personas mayores) nos dijeron “creo que si presionan ctrl y + se agranda la letra”. Quedé estupefacta…
En resumen un desastre el producto final por varias consideraciones (básicas), una experiencia decepcionante.
Comparto el link a mis notas en caso de que sea útil para alguno de vosotros. https://docs.google.com/document/d/1KeMnNaJnbblMd1F3X6BM9Cq7iz1U9MaG24Nib_BdBaU/edit?usp=sharing
Les recomiendo tambien este curso de accesibilidad de Udacity, es algo viejo pero muy interesante. Yo lo estoy haciendo y de veras da muchas informacion util Curso Accesibilidad Udacity
Yo había implementado el botón de “skip to content” en mi portafolio desde hace mucho porque lo había visto en algunas páginas y me pareció útil e interesante. 😄
Gracias
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?