Un diseño web no accesibles crea barreras para todos los usuarios, sin importar su condición. Por eso resulta imprescindible conocer qué problemas de conformidad con la accesibilidad están presentes en tu sitio web, cómo afectan a tus usuarios y saber si estás incurriendo con la legislación vigente.
Hay distintos comprobadores de Accesibilidad que realizan análisis automáticos de tu sitio web para que puedan identificar y corregir fácilmente los problemas de accesibilidad web en todos los niveles de conformidad.
Cambios en el diseño web para accesibilidad:
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 precisarlo. 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 en el diseño web juegan un papel primordial 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 agregar 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 subtí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.
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! Pero sí a mostrarlos de manera eficaz. Por ejemplo, algunas señales visuales te vendrían bien en tus menús, para enfatizarlos 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í funciona.
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 vídeos, y compartir material multimedia por diversas vías, no sólo vídeos. 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 mantenerlas 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.
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.
¿Nos necesitas?
