¿Qué es la accesibilidad web?
Una definición canónica de accesibilidad web podría ser “el nivel de opciones de uso que tienen de un site las personas con diversidad funcional”. De esta manera, diremos que una web es accesible si cuenta con opciones para adaptar sus contenidos.
El acceso a los contenidos en un entorno web puede verse truncado para muchas personas. Según el usuario, son muy diversas las limitaciones que pueden existir. Vamos a agruparlas en cuatro grandes familias:
- Visuales: las que están relacionadas con la vista, claro está.
- Motrices: las limitaciones que se relacionan con alguna disfunción en el aparato locomotor.
- Auditivas: las que están relacionadas con el oído, como no.
- Cognitivas: las que pueden afectar a la comprensión del contenido.
De esta manera, en una web completamente accesible se podrán adaptar los contenidos a las distintas necesidades del usuario.
Opciones de una web accesible
Para los usuarios con determinados problemas visuales, deberán existir opciones como eliminar los colores, agrandar o disminuir el tamaño de los textos, aumentar el contraste o detener los movimientos de los objetos animados.
El usuario también deberá tener capacidad de interacción con el sitio web, acceder a cualquier enlace en el contenido, etcétera, sin la necesidad de usar hardware como el ratón o el teclado, por ejemplo. Es posible que un usuario no pueda pulsar dos teclas a la vez o usar una pantalla táctil, un contenido web accesible debe disponer de alternativas para este tipo de cosas.
La información no podrá limitar a lo escrito, el texto deberá poderse escuchar. Así como la información que se ofrezca a través de audio o vídeos deberá estar subtitulada y/o explicada. Un lenguaje excesivamente técnico o de difícil comprensión supondrá también una limitación para ciertas personas.
¿Cómo aprender sobre la accesibilidad web?
El tema de la accesibilidad web puede ser muy desafiante para algunos, pero si estás aquí es porque eres de los nuestros y deseas comprender sobre esto, ¿cierto? Bueno, hay mucho que podría decirte, pero si deseas profundizar en la accesibilidad web, estos cinco recursos que te muestro a continuación pueden un fantástico punto de partida:
- MDN Web Docs: fue desarrollado por Mozzila y tiene muy buenas ideas para abordar los problemas de accesibilidad móvil. Además, trata aspectos importantes de HTML, JavaScript y CSS.
- W3C: esta iniciativa fue creación de World Wide Web y es uno de los recursos más completos para quienes deseen aprender lo básico sobre accesibilidad. Es útil para tratar el tema de las aplicaciones y algunas creaciones digitales, y se acopla a los estándares internacionales más conocidos, como HTML, CSS, entre otros.
- Proyecto A11Y: un proyecto de código abierto que fue desarrollado de manera colectiva. También es muy útil para los neófitos y cuenta con contenido básico para entender todo lo relacionado con la accesibilidad web.
- Foros y comunidades: aunque esta última opción te parezca un poco inusual, no te puedes imaginar la gran cantidad de información valiosa que puedes encontrar en los foros y ciertas comunidades que gozan de prestigio en temas de diseño web. Prueba GitHub, WordPress, entre otros, pueden servirte para iniciar y valorar las experiencias que otros van teniendo.
¿Por qué hacer una web accesible?
Al iniciar este artículo te comentaba que son varias las razones para apostar por una web accesible cuanto antes. Muchas de estas razones tienen que ver con mejorar la experiencia de usuarios y abarcar mayor cantidad de grupos de personas, muchos de los cuales antes eran inaccesibles a la hora de navegar. Sin embargo, hay otro aspecto que quisiera que valores y es el aspecto legal.
En Estados Unidos existe una ley que obliga a los entes gubernamentales y a las instituciones públicas a que sus páginas web sean accesibles para quienes tengan discapacidades. Este reglamento, hace poco, fue extendido a las aerolíneas, por lo que incluso aquí en Europa éstas deben procurar que sus páginas web sean navegables para cualquiera.
¿No es suficiente razón para empezar la carrera? Si desde ya sumas esfuerzos para hacer que tu web cumpla estas exigencias, estarás sacándoles unos cuantos kilómetros de ventaja a tus principales competidores.
Recuerda, el mundo cambia cada día, así que no esperes que sea la ley la que te obligue a hacer estos cambios, ¡depende de tu sector comercial será algo que pasará tarde o temprano! Dentro de poco tiempo todos, absolutamente todos, tendrán la necesidad de hacer accesible la página web de su empresa. Es solo cuestión de tiempo.
¿Cómo diseñar una web accesible?
Hay una serie de cambios básicos que puedes empezar a implementar para hacer tu página web más accesible:
Entiende cada concepto de la accesibilidad web
Normalmente, la gente no sabe diferenciar algunos conceptos importantes en el tema de la accesibilidad web, como por ejemplo la función de HTML, CSS y JavaScript.
En pocas palabras, HTML define cómo será la estructura de tu página web; CSS define cómo se visualiza el contenido de tu página web y JavaScript te ayuda a insertar funcionalidades dinámicas a tu página.
Los lectores de pantalla funcionan con HTML, usualmente. Muchos de los elementos de relleno que incluyes en tus contenidos, para favorecer el SEO y producir contenido de calidad, no es visible en los lectores de pantalla mediante CSS. Aunque esto no significa que debes dejarlos atrás. La opción es agregar contenido oculto en CSS para que los lectores de pantalla puedan precisar.
Para usar JavaScript las salidas deben ser tanto en HTML como en CSS, aunque no debes incrustar código CSS ni JavaScript en HTML.
Texto y contraste
Los colores juegan un papel primordial en el diseño de una web y en su contenido, especialmente si deseas hacer que tus contenidos sean más legibles y accesibles para quienes tienen problemas visuales, navegan con poca luz, tienen visión limitada o son daltónicos.
Es bueno que juegues con el color del texto y el color del fondo. Necesitas que haya un fuerte contraste entre color del texto y el fondo, por lo que, lo más práctico, es elegir texto en color negro sobre un fondo blanco.
Estilo del texto
No sólo tienes que jugar con el color del texto, sino agrega patrones, formas y énfasis donde te sea posible, pues así haces tus textos más legibles y les permites a quienes tienen problemas de visión poder leer y entender los contenidos.
Estilos de encabezados
Los encabezados han de ser una apuesta segura en todos los contenidos, pues permiten organizar mejor la información y arrojan datos de jerarquía a los lectores. Así, un lector de pantalla puede navegar con más facilidad por todo el contenido y saber su orden de importancia.
Si además incluyes una tabla de contenidos en ellos, estarás brindándoles mayor ayuda. Escoge formatos H1, H2, H3, y cuantos sub-títulos necesites para que tus contenidos queden bien organizados y sean más accesibles para todos.
Listas
Las listas son tu mejor aliado para enumerar y numerar contenido voluminoso, ¡no sé por qué a mucha gente les cuesta tanto utilizarlas! Quizás sea por miedo o porque creen que estas no suman valor a sus contenidos.
Te animo a que empieces a incluir listas en todos los contenidos, cada vez que lo consideres necesario, si quieres hacer más legibles tus contenidos y mejorar la accesibilidad de tu web.
Puedes utilizar listas con formas (viñetas) o con números. Verás que estas hacen tus contenidos más organizados y obtendrás mejores resultados.
Limpia tus menús
Los menús son siempre buenos para organizar los elementos y contenidos de una web, pero no todos le sacan provecho, así que debes limpiarlos, ¡bueno, no literalmente! Jeje… Pero sí a mostrarlos de manera eficaz. Por ejemplo, algunas señales visuales te vendrían bien en tus menús, para enfatizar los y destacarlos.
No utilices estados de desplazamientos para revelar el contenido, tampoco satures el menú con un sinfín de opciones, sino que tienes que ser específico. Recuerda, la idea de los menús es hacer más dinámica y puntual la información; no abuses de ellos ni satures tu página con menús a diestro y siniestro.
Entradas de texto
A la hora de diseñar los campos de un formulario, las entradas de textos, debes priorizar el contraste, del cual ya te hablé anteriormente, por lo que tienes que mantener un contraste alto para que el texto sea legible y el lector pueda ver en qué partes hace clic.
Agregar un color de relleno o un borde ayuda mucho, y es indispensable para destacar aquellos textos o palabras importantes que llevan a algún vínculo.
Tienes que tener mucho tacto a la hora de diseñar la anatomía de tus entradas de texto, pues así serás capaz de hacer más legibles tus contenidos y ayudarás a que tus lectores no confundan los textos con el fondo, a la hora de intentar hacer clic en ellos.
Texto alternativo
Las imágenes, gráficos y cuadros que incluyes en tus contenidos no están de adorno; ¡o por lo menos no debería ser así!
El texto alternativo en estos elementos puede hacer mucho más por ti de lo que te imaginas como, por ejemplo, hacer que los lectores de pantalla entiendan de qué trata la fotografía o el gráfico que has añadido al contenido textual.
Si proporcionas un texto alternativo en todas tus imágenes, gráficos, cuadros y tablas, estarás favoreciendo a quienes tienen problemas visuales y, además, estarás mejorando tu SEO, ¿Lo sabías? Revisa estos consejos de SEO para imágenes que ¡sí funcionan!
Diversas vías para los archivos multimedia
Los archivos multimedia son una excelente forma de contenido en estos tiempos; son dinámicos, modernos, versátiles y se adaptan a las necesidades de cada persona, aún cuando estas poseen discapacidades.
Para hacer más accesible tu web puedes agregar subtítulos o transcripciones a tus videos, y compartir material multimedia por diversas vías, no sólo videos.
Las transcripciones te acercan a usuarios con problemas de sonido, a quienes no hablan tu mismo idioma o gente con dificultad para oír.
Contexto agregado y enlace descriptivo
¿Quién se mete por un camino sin saber a dónde va? ¡Nadie! Y no es distinto a la hora de vincular tus contenidos web desde otros textos, por lo que una forma de hacerlos más accesibles es agregándoles contexto y apostando por un enlace descriptivo.
La vinculación interna y externa es importante para el SEO de tu página web, así que aprovecha esto para fortalecer tu SEO y a la vez brindarle apoyo a tus lectores de pantalla. Debes arrojarle luces a tu público sobre hacia qué enlazas y permitirles escanear si en verdad desean ir hacia donde los diriges. Así que te conviene aprender sobre estrategias de Linkbuilding y optimización SEO.
No te sobrepases con los elementos de la interfaz
Los elementos de la interfaz de usuario pueden ser el sueño de cualquier diseñador web, pues en éstos existe la posibilidad de crear algo nuevo, moderno y auténtico, pero la idea es mantener el equilibrio y diseñar elementos funcionales.
Para que asegures la accesibilidad de una web debes mantener las cosas simples y prácticas, estableciendo elementos de la interfaz de usuario que en verdad sean útiles para la mayoría y no que sean elitistas, y apunten sólo a un pequeño grupo.
Recuerda, la idea principal de la accesibilidad es que la web funcione para todos y de todas las formas posibles. ¡No te olvides de nadie!
Tablas adaptadas a la accesibilidad web
Las tablas pueden ser tu mejor aliado o tu peor enemigo; aunque éstas ayudan a organizar datos e información de manera práctica y sin ocupar mucho espacio, tienes que mantener
las simples si deseas que sirvan para personas con discapacidades, como las que utilizan lectores de pantalla, por ejemplo.
Las tablas complejas (anidadas) no son funcionales, así que chequea cómo son tus tablas y mantenlas simples, con encabezados de columnas y filas solamente.
Elige los marcadores correctos
Ya te he resaltado la importancia de utilizar encabezados y estructurar bien los contenidos de tu página, pues así las personas que utilizan lectores de pantalla pueden oír mejor la información, y comprenderla.
Los encabezados tienen que ser vistos como etiquetas que definen qué estilo y propósito tendrá un texto, así que sácale provecho y crea verdaderos encabezados. No sólo los crees por crearlos, ni para obedecer a un estilo.
De la estructura y los componentes de una página dependerá la accesibilidad, así que hay que elegir los marcadores correctos; algunas veces será más útil utilizar marcadores HTML, pero otras no, así que debes evaluar esto y tomar cartas en el asunto.
La capitalización debe ser moderada
No es factible colocar todas las palabras en mayúsculas, ni para resaltar cosas importantes, pues el lector de pantalla procesa las mayúsculas como letras individuales, por lo que leerá letra por letra cuando se tope con palabras escritas completamente en mayúsculas.
Enlaces externos también según la accesibilidad web
Muy bien, hagamos un repaso. ¿De qué hemos estado hablando? ¡De ser accesibles para todos! Pues bien, no tiene sentido hacer enlaces externas hacia sitios que no son accesibles. ¡Sería como contradecirnos!
Sé cuidadoso con cada enlace externo que le proveas a tus lectores, pues si estos llevan hacia páginas web que no son accesibles, en vano estás mejorando tu web.
No olvides la navegación por teclado
La accesibilidad del teclado es fundamental para asegurar que tu web es alcanzable para cualquiera con discapacidad motora o visual. Tienes que asegurarte de que tu web sea navegable sólo con un teclado mediante pruebas.
Si todos los elementos interactivos de tu página, como las entradas, enlaces y los botones, pueden navegarse sin un ratón, eso significa que la accesibilidad web de tu empresa va viento en popa.
Eso sí, procura no abusar de los elementos interactivos y los menús, pues aunque tus lectores puedan descubrirlos sólo con las teclas tab e intro, podría ser abrumador para ellos tener que lidiar con numerosas opciones en un mismo momento.
