Accesibilidad

Hola, ¿qué tal? ¿Cómo estás? Espero que todo vaya muy bien. Te saluda Alex Ávalos y te doy la bienvenida a Web en Línea,

el podcast que te enseña a elegir con criterio desarrollar una web potente y lanzarla siguiendo las buenas prácticas que garantizan el éxito.

Imagina que quieres entrar a un edificio, pero no hay rampas, solo escaleras.

Y vos andas en silla de ruedas.

¿Vas a poder entrar? No, definitivamente no vas a poder entrar.

El edificio está ahí, está, el edificio existe, está abierto, pero no para vos.

Ahora, imagina que entras a un sitio web, pero sos ciego y la web no tiene descripciones

en las imágenes, los botones no tienen nombres claros y el lector de pantalla no entiende

nada. La web existe, está online, pero no para vos. Eso es inaccesible, es inaccesibilidad

Y está pasando en millones de webs ahora mismo.

Según la OMS, más de mil millones de personas viven con alguna discapacidad.

Eso es el 15% de la población mundial.

Y la mayoría de webs los excluyen.

Claro, no por maldad.

Lamentablemente lo hacen por ignorancia.

Porque no saben cómo debe de hacerse una web accesible.

O porque piensan que eso no es importante.

O que lo van a dejar para después.

Pero sí es importante.

No solo porque es lo correcto, sino porque una web accesible es mejor para todos.

Pero también es mejor para el SEO, es mejor para la usabilidad y por supuesto,

es mejor para tu negocio. Por eso, en este episodio vamos a hablar de accesibilidad web.

¿Qué es, por qué importa y cómo hacer tu web accesible?

¿Qué es accesibilidad y por qué importa? Vamos a ver el primer punto.

¿Qué es la accesibilidad web?

Accesibilidad significa que tu web puede ser usada por todos, independientemente de sus capacidades.

Esto incluye personas con discapacidad visual, es decir, ciegos o con baja visión,

con discapacidad auditiva, sordos o con hipoacusia,

discapacidad motriz, dificultad para usar, por ejemplo, el mouse o el teclado, discapacidad

cognitiva, dificultad para procesar información compleja, con conexiones lentas, es decir,

con internet paupérrimo de tercer mundo, sí, esto también es accesibilidad. Y con dispositivos

antiguos. No todos tienen el iPhone, el último iPhone, el 17 Pro Max, naranja, no todos.

Pero también beneficia a personas mayores con limitaciones relacionadas con la edad.

También personas con lesiones temporales, por ejemplo, si tiene el brazo quebrado y enyesado,

También le beneficia. También beneficia a personas en situaciones difíciles, por ejemplo, si están tratando de ingresar y de usar tu sitio web bajo el sol o con una mano ocupada o con mucho ruido a su alrededor.

La accesibilidad no es un favor, es diseño por y para todos. Las buenas prácticas de accesibilidad mejoran la web para todos y esto es importante tenerlo presente.

Por ejemplo, los subtítulos en los videos, por supuesto, ayudan a sordos a ver y entender el contenido.

Pero también a quien está en un lugar ruidoso le ayuda, o por ejemplo, a quien habla otro idioma,

o a quien prefiere, por el motivo que sea, leer en lugar de estar escuchando.

El buen contraste de los colores ayuda, por supuesto, a las personas con baja visión, pero también a todos cuando hay mucha luz.

La navegación clara con el teclado ayuda a quien no puede usar el mouse, pero también a quien prefiere usar atajos de teclado, porque es mucho más rápido.

La accesibilidad no es hacer una versión especial de nuestra web para personas con discapacidad.

No. Es hacer una web que funcione bien para todos desde el inicio.

¿Y por qué esto importa?

Vamos a verlo por varias razones.

Razón 1. Simple y llanamente, porque es lo correcto.

Internet debe ser por y para todos y punto.

Veamos la razón dos, la legalidad. En muchos países hay leyes de accesibilidad web. En Estados Unidos: ADA (Americans with Disabilities Act). En Europa, ya que lo estoy diciendo en inglés, no es muy good looking, pero voy a hacer lo posible.

En Europa: European Accessibility Act y en muchos países de latam también hay leyes similares. Si tu web no es accesible, dependiendo de la legalidad, hombre, te pueden demandar y lo están haciendo.

Y el próximo año en la Unión Europea va a ser mucho más delicado. Ya vemos miles de demandas por inaccesibilidad web cada año y el próximo esto va a peor.

Razón tres, es bueno para el SEO. Google, bueno, ahora con la inteligencia artificial y Gemini y Nano Banana y todas estas cosas, pues puede ser que sí.

Pero digamos que técnicamente Google no puede ver tu web, así como lo hacemos nosotros con los ojos. No puede.

La lee con la tecnología que es bastante similar a un lector de pantallas.

Si tu web es accesible para los lectores de pantallas, va a ser accesible para Google.

Y por lo tanto, vas a tener un mejor SEO y tu web en un mejor ranking.

Veamos la razón número cuatro.

Expandir tu audiencia.

Si, por ejemplo, el 15% de la población tiene alguna discapacidad, esto, tu web, si no es accesible, los excluye. Es decir, que estás perdiendo 15% de potenciales clientes a nivel mundial.

Razón 5, y con esto cerramos este bloque. Mejor usabilidad para todos. Una web accesible es más clara, es más fácil de navegar en ella, es mucho más rápida, ofrece una mejor experiencia para todos.

No hacer tu web accesible es un gran error. Es un gran error en el tema de los negocios, de la ética y del profesionalismo.

Hablemos ahora de los principios y las prácticas básicas. Es decir, cómo hacer que tu web sea accesible. Por supuesto, hay estándares internacionales. Está la WCAG la Web Content Accessibility Guidelines, que son las pautas oficiales y tiene tres niveles.

El A que es el básico, el AA que es el intermedio, que este es el estándar legal y el AAA que es el avanzado.

No te asustes, por supuesto no necesitas ser un experto, necesitas seguir principios básicos.

Por eso lo vamos a ver.

Principio 1. Perceptible. La información debe de ser presentada de forma que todos puedan percibirla.

¿Cómo lo pones en práctica? Por ejemplo, con las alt, estos textos alternativos en las imágenes.

Cada imagen debe tener el atributo alt, describiendo qué hay en esa imagen.

Pero claro, si la imagen es simplemente decorativa, el alt puede estar vacío porque la imagen es decorativa. Pero si es informativa, debería de llevar una descripción clara.

Ahora vivimos en un mundo muy privilegiado. Si vos no tenés, digamos, la facilidad o vas un poco pillado de tiempo, a Nano Banana le puedes dar una imagen y le puedes pedir que te la describa.

Y luego lo ajustas y ya tenés la descripción para el texto alternativo de la imagen.

Veamos, los subtítulos y transcripciones para la multimedia.

Los videos deberían de tener subtítulos.

Los podcasts deberían de tener transcripciones.

Un audio descriptivo debería de estar en el contenido visual importante.

Buen contraste en los colores.

Texto oscuro sobre un fondo claro y viceversa.

Un mínimo, por ejemplo, de 4.5:1 para el texto normal y un 3:1 en la proporción para texto grande.

Principio 2. Operable.

La interfaz de tu web debe de ser usable de diferentes formas.

¿Cómo lo pones en práctica?

Por ejemplo, con la navegación completa del teclado.

Que todo lo que haya lo podás hacer con el mouse, pero también con el teclado si se necesita.

Por ejemplo, poder navegar entre las diferentes opciones o menús con el Tab, poder usar el Enter para activar y la tecla Escape para cerrar.

Sin trampas en el teclado, porque ya me ha pasado que maximizas algo y ¡oh no! Ya no puedo salir. Si entras a una modal con Tab, deberías de poder salir con Escape o con la misma Tab o con Espacio o dándole a cualquier tecla.

También tener el tiempo suficiente para poder leer y decidir tomar una decisión. Leer y tener el tiempo para poder pensar si quiero aceptar o cancelar. No pongas a las ventanas, a las modales, no pongas temporizadores.

En algunas webs, supuestamente para agilizar y todo lo demás, se abre la modal y se cierra en 5 segundos.

Mal. La gente necesita tiempo.

Y también sería muy bueno, ahora hablando sobre lo operable, que en tu web no haya contenido que parpadea o destelle.

Porque puede causar convulsiones.

De hecho, si destella más de tres veces por segundo, mal, muy mal.

Vamos a ver, principio tres, que sea comprensible.

La información debe de ser fácil de entender.

¿Cómo lo ponemos en práctica?

Creando textos para nuestras webs con un lenguaje claro y simple, con oraciones cortas, con párrafos cortos, de preferencia que no lleve jerga innecesaria o texto de relleno.

lamentablemente muchas IA's a la hora de generar texto te quieren meter esto estas frases que

tengan gancho y todo lo demás no y también de preferencia si lo quieres poner en práctica

debería de usarse los términos menos términos técnicos el menor número de términos técnicos

idealmente deberías de poder explicarlo

pero claro depende del tipo de web

si tu web va para un especialista

una rama o un nicho en particular

pues claro si el término técnico tiene que ir

pues tiene que ir

pero muchos quieren adornar

que se vea más pro y todo lo demás

eso sobra

en la navegación también debería de haber una consistencia

El menú no debería de cambiar de lugar. Los botones no deberían de cambiar de función o de nombre. Si es ok, es ok. Si es aceptar, es aceptar. Sería raro que en la primera parte de la web diga aceptar y más adelante diga ok.

De hecho, la estructura debería de ser predecible y los mensajes de error deberían de ser claros.

Muchos, pues como la página se llama error 404, pues le ponen error 404 y todo, ya está.

No, sí, le puedes poner el título error 404, pero debería de incluirse algo que diga, por ejemplo, página no encontrada o no encontramos esta página.

Aquí está el buscador o quieres ir al inicio, clic aquí.

También deberían de haber etiquetas claras en los formularios.

Cada campo debería de tener una etiqueta visible, no solo para el placeholder que desaparece cuando pones el puntero, sino que también de forma visible.

Vamos a ver, principio 4. Robusta.

El contenido debe de funcionar con diferentes tecnologías.

Si lo querés poner en práctica, yo te recomendaría que revises que el HTML sea semántico.

Usa las etiquetas correctas para el uso correcto.

para los botones.

Y de igual forma

Esto le dice a los lectores de pantallas qué es cada cosa.

Y ayuda a la comprensión de toda la web, de toda la página, lo que estamos viendo.

Aplicar el ARIA cuando sea necesario.

Es decir, los Attribute for Attributes for Accessible Rich Internet Applications.

Este es el episodio en el que más English y vos sabes que más. English is not very good looking. Bueno, esto ayuda a describir los elementos dinámicos, pero solo cuando el HTML semántico no nos alcanza o nos queda corto.

Además, deberíamos de, en nuestra web, garantizar que es compatible con los lectores de pantallas.

Podrías probar algunas herramientas como el NVDA dentro de Windows, esto es gratis.

De pago está el JAWS.

También en Mac tenemos el VoiceOver, que está integrado en el propio sistema.

En Android tenemos el TalkBack, que también viene con el sistema.

Con los navegadores, no solo con Chrome, también en Firefox, Safari y Edge,

tenemos también lectores de pantalla que nosotros podemos usar para verificar

que nuestra web realmente es compatible con estos lectores.

Y claro, después de hablar de todo esto, nos vendría muy bien dar un repasito a las herramientas que tenemos para verificar la accesibilidad de nuestra web.

Porque no podemos solamente confiar o quedarnos con nuestro criterio. Necesitamos testear porque más de algún detalle se nos puede escapar.

Vamos a ver, la herramienta número uno que yo te podría recomendar, sin lugar a dudas, son las extensiones en los navegadores.

Es mucho más fácil, mucho más sencillo, lo tenés ahí a la mano.

Podría ser, por ejemplo, axe DevTools, que encuentra problemas automáticamente.

WAVE, que analiza visualmente los problemas.

Y el todopoderoso Lighthouse en la Chrome DevTools.

Esto incluye dentro de las opciones de Lighthouse la auditoría de accesibilidad.

Como herramienta 2, podríamos revisar, darle una mirada a los verificadores de contrastes.

WebAIM Contrast Checker es uno.

Colour Contrast Analyser podría ser otro.

Estos te dicen si tus colores pasan o no pasan.

Si le queremos dar otra vuelta de tuerca,

también podríamos mencionar como herramienta 3,

la navegación solo con el teclado.

Hacer la prueba.

La herramienta softbox, tu mano, tu mano y el teclado.

Dale, desconectá, apagá el mouse.

Y ahora probá navegar en tu web solo con el teclado.

Y probá si podés llegar a todo.

Probá si podés moverte en la web.

Probá si podés ir hasta aquel botón que está de aquel lado.

¿Podés llegar a todo?

¿Sí o no?

Ahora que estás solo con el teclado, ¿ves claramente dónde estás?

O se te hace difícil a la hora de, con las teclas, moverte, llegar o quedar en el punto exacto en pantalla.

¿Funciona todo? Sí o no.

Si no funciona todo, si se te ha hecho difícil o imposible llegar a un botón o desplegar un menú,

ahí hay problemas. Hay que meterle mano.

Como cuarta herramienta podríamos mencionar los lectores de pantalla.

Esto, si no hay por dónde, te instalas uno y probas tu web.

Así.

En un inicio, pues puede ser que todos los warning, aviso y errores

pueda ser un poco frustrante, pero vas a ir entendiendo

cómo se experimenta en tu web.

La gente que tiene problema y como vos no lo tenés, pues claro,

ni te enterabas, ¿no?

Y como herramienta número 5 podríamos mencionar a los simuladores.

Hay simuladores de daltonismo, hay simuladores de baja visión, hay muchos tipos de simuladores.

Estos te muestran cómo otros ven tu web.

Y lo más importante, que te podría recomendar para cerrar esta parte, no es herramienta,

pero yo creo que es muy importante y sería un plus súper genial si pudieras testear con usuarios reales.

Sí, usuarios reales.

Pedile a una persona con discapacidad que entre a tu web.

Esta persona va a encontrar problemas que ninguna otra herramienta va a poder detectar.

Porque la accesibilidad no es un checklist, es un proceso.

Es un proceso continuo de mejora, continua.

Y cada cambio puede añadir un problema que no lo temías.

Así que es muy recomendable testear regularmente.

Yo no sé cómo vas con esto de la accesibilidad.

Yo siempre lo he tenido como una asignatura pendiente,

pero me di cuenta de mi gran error cuando comencé de lleno a utilizar como única red social a Mastodon.

Cuando quiero compartir una imagen, me aparece como error si no agrego un texto alternativo, el Alt, a esa imagen.

Me aparece como un error, incluso dependiendo de la aplicación de Mastodon que estoy usando en el celular

o en mi escritorio, en mi Linux o en mi Mac, no me deja publicar el Tooth, el Post en Mastodon,

si no añado ese texto alternativo. Esto me hizo darme cuenta de mi gran error,

que esto no es opcional, deberíamos de tenerlo todos, todos como norma.

Así que si te parece, te voy a resumir el episodio a manera de cierre.

Uno, la accesibilidad web significa que todos pueden usar tu web, independientemente de sus capacidades permanentes, temporales o caso de uso particular. Todos deberían de poder usarla y beneficiarse. Todos, no solo una persona con discapacidad. Todos deberían de poder usarla y beneficiarse.

Dos, los cuatro principios que vimos de la WSAG, te los recuerdo, son perceptible, operable, comprensible y robusto. Seguí estas prácticas básicas uno a uno. Date tiempo, sí, sí, en un inicio va mucha faena, pero poco a poco, uno a uno y lo vas a lograr.

Tres, usa herramientas para testear, pero lo más importante es probar con navegación por teclado y lectores de pantallas.

Una web accesible no es un favor. Es diseño profesional, es responsabilidad y también es un mejor negocio.

En el próximo episodio vamos a hablar de SEO básico y de cómo lograr que la gente te encuentre en Google o en motores de búsqueda sin volverte loco ni gastar fortunas en publicidad.

Y con esto ya estamos listos para el commit y hacer el push.

Te recuerdo, una web que excluye al 15% de la población no es una web profesional.

La accesibilidad es diseño y diseño inclusivo para todos.

No es un extra opcional.

Si tienes dudas sobre accesibilidad o quieres compartirme tu experiencia o tu opinión de este episodio,

me puedes encontrar en web en línea punto org barra contacto.

Te espero en el próximo episodio.

Hasta entonces.

¡Salú!