No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Accesibilidad Web: Implementación de Skip Navigation

4/12
Recursos

¿Cómo facilitar la navegación para usuarios con discapacidades motrices y visuales?

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?

¿Qué es el "skip navigation"?

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.

¿Cómo se crea un "skip navigation"?

Implementar un "skip navigation" requiere un entendimiento básico de HTML y CSS:

  1. HTML: Crear una etiqueta <a> justo después de la apertura del <body>.

    <a href="#content" class="skip-link">Ir al contenido principal</a>
    
  2. Destino: El enlace deberá conectar con un ID en el elemento que contiene el contenido principal.

    <main id="content">
        <!-- Contenido principal -->
    </main>
    
  3. 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;
    }
    

¿Por qué es importante el foco en la navegación?

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.

¿Cuándo es necesario implementar el "skip navigation"?

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 caso de estudio inspirador

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

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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.

Es interesante el tema. Yo uso NVDA como lector de pantalla y hay muchas funcionalidades que ayudan a explorar sitios, como la e para buscar campos de edición o la k para los links. El punto es que también es relevante revisar la compatibilidad de la accesibilidad de los sitios frente a distintas herramientas como los lectores de pantalla. Por ejemplo, tengo la esperanza de que el botón bajo el campo d edición en el que estoy escribiendo este comentario sirva para publicarlo, pues no está etiquetado como tal cosa. (sé que funciona porque ya he dejado otros comentarios, pero es un ejemplo)

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