Accesibilidad y SEO: mejoras que cumplen dos objetivos

La accesibilidad suele recibir presupuesto como una obligación de cumplimiento. Por eso termina en la misma lista que la renovación de un seguro: es necesaria, genera poco entusiasmo y se pospone hasta que algo obliga a actuar. Ese enfoque deja fuera la parte del trabajo que se paga dos veces, una en conversión y otra en posicionamiento orgánico.

La coincidencia no es casual. Un lector de pantalla y un rastreador de buscadores hacen el mismo trabajo. Ambos procesan una página sin verla. Ambos dependen por completo de la estructura y del texto que usted incluyó en el marcado. Una página difícil para uno suele ser difícil para el otro.

Dónde la accesibilidad y el SEO son el mismo trabajo

Estructura de encabezados. Quienes usan lectores de pantalla suelen navegar saltando entre encabezados. Por eso una página necesita un solo H1 y una jerarquía lógica de H2 y H3. Los buscadores usan esa misma estructura para entender de qué trata la página y qué fragmento responde cada pregunta. Cuando los encabezados se eligen por su tamaño visual, como ocurre en muchas páginas creadas sin un sistema, el resultado parece un bloque plano para ambos.

Texto descriptivo en los enlaces. “Leer más” no aporta información cuando una persona abre la lista de enlaces de una página con su lector de pantalla, una forma habitual de navegar. Tampoco le dice nada al buscador sobre el destino. El texto del enlace es una de las señales más claras sobre el contenido de la página enlazada. “Haga clic aquí” desperdicia esa señal.

Texto alternativo en las imágenes. Se escribe para las personas que no pueden ver una imagen, y la búsqueda de imágenes lo interpreta para entender ese mismo contenido. Un diagrama que contiene información importante y tiene un atributo alt vacío es invisible para ambos.

Marcado semántico. Un <button> real se anuncia como botón, recibe el foco del teclado y funciona sin JavaScript. Un <div> con apariencia de botón no hace nada de eso. Un rastreador que sigue su ruta de conversión encuentra el mismo obstáculo.

Velocidad y estabilidad visual. El contenido que salta mientras carga desorienta a cualquier persona y puede impedir el uso a quienes tienen limitaciones motoras o cognitivas. También es una señal de posicionamiento que se mide directamente.

Ninguno de estos puntos exige una concesión. Hacerlos bien sirve a ambos públicos con una sola pieza de trabajo.

Dónde coincide con la conversión

Otro grupo de mejoras no tiene efecto en buscadores, pero sí aparece en la tasa de conversión.

Las relaciones de contraste existen para que las personas con baja visión puedan leer el texto. También determinan si cualquier persona puede leer su llamada a la acción en un teléfono bajo la luz del día. El fallo más común que encontramos es usar el color de marca en texto pequeño con una relación cercana a 4:1. No supera una prueba visual y tampoco cumple la norma.

Las etiquetas de formulario existen para los lectores de pantalla. También evitan que una persona tenga que adivinar qué pide un campo después de que el texto de ejemplo desaparece al escribir la primera letra. Los formularios que dependen solo de placeholders aumentan los errores de forma medible. La tasa de errores en un formulario es la tasa de conversión vista desde otro ángulo.

Los estados de foco visibles existen para quienes navegan con teclado. También muestran dónde está cualquier persona que recorre un proceso de compra con la tecla de tabulación. Quitar el contorno de foco porque parecía desordenado es una de las decisiones pequeñas más costosas del diseño web.

El tamaño mínimo de las áreas táctiles existe para personas con movilidad limitada. También evita los toques equivocados que vuelven frustrantes los formularios móviles para todo el mundo.

Aproximadamente un tercio de una auditoría de accesibilidad típica corresponde a trabajo que usted haría de todos modos para mejorar la conversión. Otro tercio ayuda al posicionamiento orgánico. Priorice esos dos tercios y el programa empezará a financiarse antes de llegar a las partes sin retorno comercial directo.

Dónde termina la coincidencia y cómo defender ese trabajo

Parte del trabajo sí consiste únicamente en cumplimiento y no tiene una ventaja comercial directa. Fingir lo contrario debilita su argumento ante quienes aprueban el presupuesto.

El funcionamiento completo por teclado de un componente interactivo complejo. El uso correcto de ARIA en un widget personalizado. Los subtítulos y las transcripciones de video. Las alternativas con movimiento reducido. Todo esto requiere tiempo real de ingeniería y no cambiará una tasa de conversión.

Defiéndalo por las razones correctas. Existe una exposición legal que crece en la mayoría de las jurisdicciones. También está la pregunta que aparece en las licitaciones: las compras del sector público y de grandes empresas piden cada vez más una declaración de conformidad, y no tenerla puede hacerle perder el negocio antes de que alguien lea su propuesta. Además, excluir a personas de su sitio es una decisión que alguien tomó, casi siempre sin darse cuenta.

No estire el argumento comercial para cubrir este último tercio. Presente el argumento comercial donde es cierto, publique esos dos primeros tercios y use el valor demostrado para conseguir el espacio necesario para terminar.

Una secuencia que funciona

Ordene el trabajo según el costo frente al beneficio combinado, no según el orden en que lo mostró la herramienta de auditoría.

1. Contraste. Es la mejora más económica de la lista, afecta a todas las páginas y puede medirse tanto en una auditoría como en una prueba de conversión. Suele requerir unos pocos cambios de tokens si su sistema de diseño los utiliza, y una tarde larga si no los utiliza.
2. Estados de foco. Un cambio en la hoja de estilos restablece la navegación por teclado en todo el sitio.
3. Etiquetas y mensajes de error en formularios. Es un trabajo acotado, tiene un efecto directo en la conversión y saca a su página comercial más importante de la lista de fallos.
4. Estructura de encabezados. Mejora la accesibilidad y ofrece a los buscadores un esquema real. Conviene resolverla en las plantillas, no página por página, para que la solución se mantenga.
5. Texto de enlaces y atributos alt. Es trabajo de contenido, no de ingeniería, por lo que puede avanzar en paralelo con todo lo anterior.
6. Rutas por teclado en componentes interactivos. Es la parte costosa. Empiece por los componentes que forman parte de la ruta de conversión.

Los tres primeros puntos suelen requerir una semana. Mejorarán la puntuación de la auditoría más que cualquier otro elemento de la lista y son los resultados que puede mostrar cuando alguien pregunte qué compró el presupuesto.

Pruébelo con las herramientas que usan sus visitantes

Los verificadores automáticos detectan quizá un tercio de los problemas reales. Vale la pena ejecutarlos en el proceso de compilación para que una regresión provoque un error visible, pero no le dirán si su sitio realmente se puede usar.

Tres comprobaciones manuales encuentran gran parte de lo que esas herramientas no detectan y ninguna exige un especialista:

Desconecte el mouse y complete su principal ruta de conversión usando solo el teclado. Si queda atrapado o pierde la referencia de dónde está, lo mismo les ocurre a todas las personas que navegan de esa manera.

Active el lector de pantalla que ya está instalado en su equipo y escuche una página. La primera vez resulta incómodo, pero es la forma más rápida de descubrir que sus encabezados son decorativos y que todos sus enlaces dicen “leer más”.

Amplíe la página al 200 por ciento. El texto debe reorganizarse sin exigir desplazamiento horizontal. Esta prueba revela supuestos de diseño que ninguna herramienta automática le mostrará.

Cada una de estas tres pruebas también descubre problemas que no tienen relación con una discapacidad y sí con el funcionamiento de su sitio. Ese es el argumento, y se sostiene sin necesidad de convencer a nadie de que el cumplimiento es interesante.