¿Qué es la accesibilidad web y cómo diseñar una web accesible?

¿Has oído hablar de la accesibilidad web? Es la base para que una página web “funcione” para todos, sin importar si la persona tiene alguna discapacidad. Por lo tanto, la accesibilidad web te conecta con grupos que antes parecían inalcanzables, ¡así que es hora de implementarla en tu empresa!

¿Qué buscas con tu negocio online? ¡Piénsalo por un instante! Y no respondas simplemente “ventas”, pues los beneficios de una web para una empresa pueden ser muchos y muy variados, más allá de simplemente vender. Una empresa online no se trata de sólo vender, sino de ser un referente en su nicho para todos los perfiles de su público, sus potenciales clientes. Y es aquí donde entra la importancia de la accesibilidad web.

No tener una página web accesible te limita, te encajona a un único público limitado y te roba la oportunidad de ser visible e impactar en aquellas personas, dentro de tu público objetivo, con alguna discapacidad, sea ésta cual sea.

Como el tema de la inclusión social a nivel mundial es algo muy vigente y afortunadamente muy extendido, solo me limitaré a decirte que si tu negocio online no es accesible (para todos), entonces estás perdiéndote gran parte de un público objetivo que está tan activo en Internet como cualquier otro perfil. Por lo tanto no estarás logrando aportar valor con tu web a la sociedad, de brindar oportunidades a quienes están limitados en alguna forma, ni de expandir tu marca.

Quienes trabajamos en el mundo del diseño web hemos aprendido que, como profesionales, tenemos que crear páginas web accesibles que alcancen a todo el público y que sea funcionales.

Pero, ¡aún estás a tiempo de contar con una súper web! Visualiza un panorama de oportunidades más ancho con tan sólo hacer que tu página sea accesible para cualquiera. En Xplora nos dedicamos a hacer que cada negocio brille con luz propia y tenga mucho que ofrecer para todos. ¿Te apuntas? Contacta con nosotros y te convencerán mis razones para tener una web accesible ¡cuánto antes!

¿Qué es la accesibilidad web?

La accesibilidad web significa que cualquier persona con discapacidad puede navegar en la web. Pero no solo eso, sino que puede interactuar con la web y en la web; realizar tareas y acciones comunes que la gente sin discapacidad suele realizar en Internet.

La accesibilidad web no sólo beneficia a quienes tienen alguna discapacidad, sino que también a quienes tienen la conexión a Internet lenta, mayores y otros muchos más.

Cuando hablamos de que una web es accesible estamos dejando muy claro que ésta es apta para cualquiera que presente dificultades auditivas, cognoscitivas, visuales, lingüísticas, físicas, neurológicas y de cualquier otro tipo.

La accesibilidad web no sólo beneficia a personas con discapacidades, sino que también es una gran apuesta para mejorar la experiencia del usuario en aquellos quienes tienen problemas de conexión a Internet, van envejeciendo, no pueden oír audios o utilizan algún dispositivo inteligente para navegar en Internet, como relojes y televisores inteligentes, por nombrar algunos.

En pocas palabras, te estoy diciendo que si quieres apostar en serio con tu empresa en Internet, esfuérzate para que tu web sea una paraíso a la hora de navegar para cualquiera, con discapacidad o no, con juguetes de alta tecnología o no. Es decir, que cubras todos tus flancos para que la gente te encuentre, y te encuentre de la manera en que lo necesita.

¿Qué es ARIA?

ARIA son las iniciales de Accessible Rich Internet Applications; una tecnología que permite hacer una página web más accesible, mediante los controles avanzados de interfaz y el contenido dinámico.

ARIA hace que tu página web sea fácil de navegar y entendible para cualquiera.

Esta tipología resulta muy útil para interactuar con el usuario, desde una perspectiva más personal, y es útil para los widgets, los encabezados y las regiones de una página web, lo que permite dictarle comandos específicos para que cualquier persona con discapacidad pueda navegar sin importar su limitación.

¿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. Especialmente es últimamente esto debido a la aparición de las PWA – Progressive Web Apps.
• 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.

Antes de entrar a explicar cómo diseñar una web accesible quería compartir contigo esta infografía de ida.cl sobre la importancia que tiene la accesibilidad web:

¿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 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 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 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í 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 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.

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.

Explicados los puntos importantes de la accesibilidad web, comparto contigo esta infografía de Disiswork como resumen de todos los consejos para lograr diseñar una página web accesible:

Evalúa las optimizaciones de accesibilidad web

Nunca sabrás si los cambios o las mejoras que implementas en una web surten efecto, si no haces pruebas y monitoreas resultados.

No puedes hacer cambios en tu negocio y dejarlos abandonados, ¿verdad? Para obtener datos y respuestas en tiempo real tienes que hacer una auditoría de accesibilidad y seguir aprendiendo.

Quizás este post te abrió más la mente sobre el tema de la accesibilidad web, y ese es mi objetivo, ¡pero no es suficiente! La destreza y la experiencia se logran aprendiendo siempre algo nuevo, por lo que te invito a hacer una investigación exhaustiva acerca de este tema, y así corrobores si los desafíos que estás asumiendo, y los cambios que has hecho, van en sintonía con lo que exige esta tecnología. Descubre qué oportunidades existen para mejorar tienes e implementa nuevos elementos en tu web, si es necesario.

Conclusión: ¡llegó la hora de la máxima accesibilidad en tu web!

Creo que no hay que esperar a estrictas y confusas regulaciones para cambiar a una web accesible, ¡el tiempo es ahora! Ya existe muchísima información sobre el tema, guías paso a paso, y expertos formados para ello. El momento actual es ideal porque no tienes la presión de tener que ser accesible sí o sí por motivos de leyes.

Lo que digo es que tienes todo el tiempo del mundo para que, si es lo que quieras, tú mismo descubras cómo hacer que tu web sea apta para cualquiera con discapacidad, y para hacerlo de una manera triunfal.

Si pones atención a mis consejos y empiezas por los cambios sencillos que aquí te he sugerido, verás cómo esta transición es amena para ti y tus clientes, y cada vez más estarás conquistando grupos que antes eran imposibles para tu negocio. Lograrás que tu web funcione de maravilla con los lectores de pantalla y adelantar a tu competencia frente a este, cada vez más amplio, grupo de tu público objetivo, si hoy mismo apuestas por una web accesible.

Además, no sólo notarás cómo llegas a más personas, sino que puedes congraciarte con Google y demás buscadores, al ser una página web funcional e útil al momento en que te rastreen. ¡Sí, un motivo más a favor de tu SEO!

¿Tienes otras ideas sobre cómo ser una web accesible?  ¡Quiero saberlas todas! Mientras, te invito a compartir este artículo en las redes sociales, y así podremos expandir esta información a muchos otros.

Además, no dejes de rellenar el sencillo formulario que encontrarás abajo, con el cual podré contactarte y atender tus dudas y comentarios.