Cómo la navegación hace que tu sitio sea más accesible

¿Qué queremos decir con "navegación"?

Utilizamos la "navegación" en el contexto de la accesibilidad de tu sitio web o aplicación para todos los usuarios. Especí­ficamente, qué tan accesible es para las personas que usan tecnologí­as de asistencia, como lectores de pantalla y dispositivos de entrada que no sean un mouse, y qué tan fácilmente estas personas pueden navegar por tus páginas.

En otras palabras, trabajar en la "navegación" se trata de asegurarte de que todos los usuarios puedan consumir el contenido de una página sin importar su navegador web o cualquier discapacidad que puedan tener.

Hacer que tus páginas se naveguen de manera fácil y eficiente es imperativo para que tu sitio web sea accesible para todos los usuarios, ya que las barreras a la navegación impiden que las personas accedan por completo a tu contenido.

Es importante tener en cuenta aquí­ que no estamos hablando de cómo se agrupan tus páginas o qué enlaces tienes en el encabezado o menús de tu sitio web. Esa es la estructura del sitio que abordamos con más detalle en nuestra guí­a de la estructura de sitio para SEO internacional.

El papel que juega la navegación del sitio en el SEO

Globalmente, 15% de las personas experimenta algún tipo de discapacidad., con una quinta parte de esas personas (más de 190 millones de personas) experimentan una "discapacidad significativa". La OMS estima que 2.200 millones de personas experimentan algún tipo de discapacidad visual.

Como cubrimos cuando hablamos de la evolución hacia el uso de Core Web Vitals en los rankings de búsqueda, Google se da cuenta de que sus usuarios quieren que encuentre y recomiende la información más relevante y correcta, esperan que la información esté disponible en las mejores páginas.

Debido a que los rankings de búsqueda de Google equivalen a recomendaciones de Google, se preocupan mucho por la usabilidad y accesibilidad de las páginas. La lí­nea entre UX, accesibilidad y SEO se ha difuminado, casi ha desaparecido.

Qué afecta en la navegación

Cuando revisas la navegación de tu sitio web en busca de posibles problemas de accesibilidad, hay criterios principales a observar:

1. Valores "accesskey"
2. Skip links y secciones de referencia
3. Atributos "id"
4. Encabezados HTML
5. Valores "tabindex"

Valores "accesskey" Values

Las claves de acceso son atributos HTML que puedes agregar a los elementos de una página. Permiten a los usuarios "seleccionar" rápida y fácilmente (conocido como enfocar o activar) ese elemento en la página usando un atajo de teclado.

En PCs con Windows, este atajo se usa tí­picamente presionando la tecla alt y el valor de la tecla de acceso al mismo tiempo. Los usuarios de Mac normalmente presionan el valor alt, ctrl y la tecla de acceso al mismo tiempo.

Mira este código de hiperví­nculo, por ejemplo: <a href="woorank.com" accesskey="w">WooRank</a>. Para este ví­nculo, el valor de la clave de acceso es "w". Un usuario puede enfocarse en este hiperví­nculo presionando las teclas alt + w (o alt + ctrl + w teclas si están en una Mac) y luego seguir el ví­nculo a la página de inicio WooRank presionando la tecla "Intro" o haciendo clic en ella con el mouse.

El valor de la clave de acceso también permite a los usuarios activar campos de entrada de texto mediante atajos de teclado.

El uso de accesskey="n" en el campo de nombre de un formulario permite a los usuarios activar rápidamente ese campo y comenzar a escribir su nombre sin necesidad de un mouse.

Los valores de la clave de acceso hacen que la web sea accesible para las personas que no pueden usar un mouse. Sin los valores de la clave de acceso, estas personas no podrí­an navegar ni interactuar con el contenido en lí­nea.

Puedes tener problemas con los valores de la clave de acceso cuando dos o más elementos en una página comparten el mismo valor.

Los valores de clave de acceso duplicados provocan resultados inesperados o no deseados cuando las personas intentan acceder a ellos usando el teclado. Por ejemplo, si tienes un enlace en tu página como este: <a href="woorank.com" accesskey="w">WooRank</a> y otro enlace después como este: <a href="https://www.wikipedia.org/" accesskey="w">Wikipedia</a>, el navegador no entenderá en qué enlace quiere centrarse un usuario cuando presione alt + w. Esto podrí­a hacer que el navegador se centre en el elemento incorrecto.

Evita este problema asegurándote de que todos los valores de la clave de acceso en una página sean únicos.

Encabezado, skip links y sección de referencia

Los skip links y las secciones de referencia son elementos HTML que puedes agregar a una página para permitir que las personas naveguen rápidamente a las secciones más importantes de esa página.

• Skip links: Los skip links son etiquetas de anclaje que proporcionan un enlace en la página al contenido principal de la página. Este enlace es el primer elemento que aparece en la página y normalmente se oculta visualmente para los usuarios. Poner este enlace al principio del código de la página (después del <head>) lo convierte en el primer elemento seleccionado por las tecnologí­as de asistencia y las personas que presionan la tecla de tabulación en el teclado.
• Secciones de referencia: Las secciones de referencia son elementos HTML que definen secciones del contenido de una página en relación con la importancia de cada sección en la página. Los puntos de referencia comunes son "main" para el contenido principal de la página, "navigation" para el menú de navegación y "sidebar" para el contenido complementario o de apoyo. Las regiones emblemáticas brindan a las personas la posibilidad de navegar directamente a esas secciones para acceder al contenido que buscan.
• Encabezados HTML: Los encabezados HTML son etiquetas que separan los encabezados y subtí­tulos del resto del contenido de la página. Le dan al contenido de la página un esquema y una estructura, lo que facilita su consumo y comprensión. Conoce todos los detalles en nuestra guí­a de encabezados HTML en SEO.

Los skip links, secciones de referencia y encabezados HTML pueden tener un gran impacto en la facilidad con la que las personas pueden navegar por el contenido de una página. La mayorí­a de los sitios web tienen contenido (por lo general, menús de navegación y encabezados) que se repite en muchas, si no en todas, sus páginas. Si bien estos menús de navegación pueden ser muy útiles para las personas que navegan por la web con un mouse, pueden hacer que el uso de una página sea difí­cil y molesto para las personas que usan lectores de pantalla u otras tecnologí­as de asistencia y dispositivos de entrada.

Los skip links, secciones de referencia y encabezados HTML brindan a estos usuarios la capacidad de omitir el contenido repetitivo que no los ayuda y acceder directamente a las partes útiles de la página.

Piénsalo de esta manera:  ¿cuánto más agradable es utilizar un sitio web de recetas que incluye enlaces "Saltar a la receta" que uno que te hace desplazarte hasta encontrar la lista de ingredientes?

Atributos "id"

id es un atributo HTML agregado a un elemento para asignar una etiqueta (también conocida como "identificación") a ese elemento. El CSS y el JavaScript usan atributos id para realizar ciertas tareas basadas en el contenido que se encuentra en el atributo.

Por ejemplo, aquí­ está el código HTML de un botón:

<button id="button1">Enviar</button>

El id="button1" etiqueta este botón como button1. Otros botones, como Cancelar o Retroceder, posiblemente se etiquetarí­an como button2 o button3, respectivamente.

Estos atributos id le dicen a los navegadores que apliquen CSS y/o JavaScripts especí­ficos a estos botones según el contenido del atributo.

El atributo id también lo utilizan las tecnologí­as de asistencia al describir el contenido de la página a las personas que las utilizan. Cuando varios elementos tienen los mismos valores de "id", estas herramientas no pueden describir con precisión la página ni ejecutar comandos de usuario.

Usando estos simples botones, si tanto el botón "Enviar" como el de "Cancelar" usan id="button1", decirle a un lector de pantalla que haga clic en "button1" generará resultados inesperados y no deseados porque el navegador no sabe cuál botón quieres usar. En otras palabras, intentar hacer clic en el botón "Cancelar" muy bien podrí­a terminar con alguien "enviando" en su lugar.

No es difí­cil imaginar cómo esto podrí­a causar problemas graves a los usuarios.

Los valores de id duplicados en una página también causarán problemas de experiencia de usuario para las personas que no utilizan ninguna tecnologí­a de asistencia. Debido a que CSS y JavaScript pueden confiar en que los ids funcionen correctamente, los valores no únicos pueden hacer que la página no se vea ni funcione como se espera.

Al igual que con los valores de accesskey, evita cualquier problema de accesibilidad asegurándose de que todos los atributos deid sean únicos y que no haya duplicados.

Orden de encabezados

Como dijimos rápidamente antes, los encabezados son elementos HTML que especifican los encabezados y subtí­tulos del contenido de la página. Proporcionan estructura al contenido para que sea más fácil de leer y comprender.

Los encabezados HTML deben mantener un orden numérico descendente lógico del 1 al 6, siendo 1 el más importante y 6 el menos importante. Cuando los encabezados HTML no están en orden, se rompe el contorno del contenido.

Este orden roto hará que sea más difí­cil para las personas que usan lectores de pantalla obtener una imagen precisa de la estructura del contenido. También podrí­an tener problemas para navegar de una sección a otra porque los encabezados no reflejan con precisión qué subtí­tulos deben asociarse con qué encabezados.

De nuevo, para obtener detalles completos sobre los encabezados HTML, consulta nuestra guí­a de encabezados HTML.

Valores "tabindex"

El valor de tabindex es un atributo HTML que puedes agregar a un elemento para especificar dónde cae ese elemento en el orden secuencial de elementos enfocables cuando alguien está navegando por la página usando una entrada de teclado (generalmente la tecla de tabulación). Por lo tanto, un elemento con tabindex="1" se enfocará antes que un elemento con tabindex="2".

Sin embargo, especificar un valor de "tabindex" mayor que 0 puede causar problemas de navegabilidad y accesibilidad para los usuarios.

Especificar un valor mayor que 0 le dice a la tecnologí­a de asistencia que se concentre en ese elemento antes de enfocarse en cualquier elemento con un tabindex="0" o cualquier elemento que no tenga el atributo tabindex. Entonces, para enfocarse en esos elementos, el usuario tiene para navegar a través de todo lo que tenga un valor de tabindex más alto antes de que puedan acceder a los otros elementos.

Sin embargo, y esto es importante tenerlo en cuenta, una vez que se ha enfocado un elemento, se elimina de la navegación tabindex. Entonces, si un usuario recorre todos los elementos con un tabindex mayor que 0 y luego necesita volver para acceder a algo con tabindex="10", tendrá que pasar desde tabindex="1" hasta tabindex="9" antes de llegar.

Este comportamiento se convierte en mucho más que una molestia cuando el orden visual de una página no coincide con el orden de las pestañas de la página. Esta situación hará que los usuarios reboten en la página de formas inesperadas e inútiles, lo que generará confusión y errores al intentar ingresar información.

Y debido a que las páginas casi nunca se publican y se dejan solas para siempre, especificar un orden de tabulación requerirá que cuides constantemente el código de la página para mantener el orden de tabulación correcto. Esta tarea simplemente no vale la pena el tiempo, el esfuerzo y los recursos necesarios.

Por último, especificar un orden de tabulación evita que los usuarios naveguen e interactúen con una página de la forma que deseen. El orden de tabulación especificado puede ser mejor o no para lo que intentan lograr en la página.

Para evitar estos problemas, es mejor no especificar un valor de "tabindex" mayor que 0. O cualquier valor de "tabindex".

La superposición del SEO y la accesibilidad

Es importante comprender que, aunque el SEO y la accesibilidad son áreas de enfoque muy diferentes con objetivos muy diferentes, existe una gran superposición en lo que respecta a la optimización.

Centrar el tiempo y el esfuerzo para asegurarte de que todos los usuarios puedan navegar fácilmente por tus páginas para acceder e interactuar con el contenido debe considerarse un pilar fundamental al optimizar tu sitio para Google.

Después de todo, Google está reduciendo progresivamente la lí­nea entre lo que tradicionalmente pensamos como "experiencia de usuario" y "optimización de motores de búsqueda", ya que busca brindar a sus buscadores la mejor experiencia en lí­nea posible.

Auditar la navegación de tu contenido garantizará que cualquier persona pueda acceder a tu contenido en lí­nea.