6 pasos para hacer que tu diseño web sea accesible

Vivimos en un mundo en el que cada vez dependemos más de Internet para todo lo que hacemos. Piénsalo: ¿dónde encontraste tu último trabajo? ¿Cómo solicitó ese trabajo? ¿Cómo hace su banca? ¿Dónde hace sus compras? ¿Cómo se mantiene en contacto con sus amigos y seres queridos?

6 pasos para hacer que tu diseño web sea accesibleUsamos internet para casi todo, y esto no va a cambiar. Diseño de la aplicación por Spoon Lancer.

Internet puede ser un recurso siempre presente para la mayoría de las personas, pero para los que viven con una discapacidad, la conectividad no siempre es un hecho. Hay programas y dispositivos que hacen posible que las personas con discapacidades accedan a todo su sitio web, como los lectores de pantalla, pero estos son sólo una parte de la solución.

La otra parte de la ecuación es diseñar sitios web y aplicaciones de manera que sean accesibles para las personas con discapacidades, ya sea mediante el uso de dispositivos de asistencia o simplemente mediante un diseño bien pensado.

¿Por qué la accesibilidad en el diseño web es importante?

6 pasos para hacer que tu diseño web sea accesibleEste es el porcentaje de personas en la Tierra que viven con algún tipo de discapacidad. A través de Wikimedia Commons.

Según datos de 2012, cerca de uno de cada cinco estadounidenses vive con algún tipo de discapacidad. En todo el mundo, aproximadamente mil millones de personas, o el 15 por ciento de la población mundial, vive con una discapacidad.

No todas las discapacidades impiden que la gente lea las pantallas y use Internet. Por ejemplo, estas cifras incluyen a las personas que dependen de andadores y sillas de ruedas. Pero otras condiciones, como la discapacidad visual, la dificultad para agarrar objetos, el autismo y la sordera, por nombrar sólo algunas, pueden limitar gravemente la capacidad de un individuo para utilizar una computadora o un teléfono inteligente sin adaptaciones.

Accesibilidad en el diseño web: en algunos lugares, es una sugerencia – en otros, es la ley

Si estás en los Estados Unidos, probablemente estés familiarizado con los estándares de cumplimiento de la web que forman parte de la Ley de Americanos con Discapacidades (ADA). Muchos otros países del mundo tienen pautas de cumplimiento similares, como la Ley de Discriminación por Discapacidad de Australia, la Ley de Accesibilidad de Brasil y el Plan de Acción eEurope de la Unión Europea.

Muchas de las directrices incluidas en esas leyes e iniciativas proceden de las Directrices de Accesibilidad al Contenido en la Web (WCAG), un conjunto de directrices creadas y mantenidas por el Consorcio de la World Wide Web (W3C) a través de su Iniciativa de Accesibilidad a la Web (WAI). ¿Suficientes acrónimos para ya?

6 pasos para hacer que tu diseño web sea accesibleEl hombre detrás de la iniciativa global para hacer la web accesible a todos. A través de Wikimedia Commons.

El W3C fue fundado en 1994 por Tim Berners-Lee, sí, que Tim Berners-Lee, con el propósito de crear directrices y protocolos que promuevan el crecimiento sostenido y a largo plazo de la World Wide Web. Hoy en día, está compuesta por más de 400 organizaciones, muchas de las cuales participan en la WAI. La versión más reciente de las directrices que ha publicado es la WCAG 2.1, que salió en 2018.

La WCAG 2.1 incluye todas las directrices más recientes y las mejores prácticas que los diseñadores de sitios web deberían seguir para garantizar que sus sitios sean accesibles para todos los usuarios. Es un documento largo y denso hecho de mucha jerga técnica. En lugar de sumergirse durante los próximos dos meses para leerlo todo, diseñe su sitio web teniendo en cuenta los siguientes principios de accesibilidad. Luego, haz que un desarrollador audite tu código para que tu diseño orientado a la accesibilidad cumpla con todos los requisitos.

Dar a sus imágenes alt tags

Las etiquetas Alt son breves descripciones de las imágenes que usas y que quedan enterradas en el html del sitio. La mayoría de los usuarios nunca ven estas descripciones, pero los visitantes del sitio que utilizan lectores de pantalla confían en ellos para saber qué hay en las imágenes de su sitio web. Una buena etiqueta alt es una descripción corta y creativa que describe con precisión la imagen a la que está adherida.

6 pasos para hacer que tu diseño web sea accesibleVamos a usar esta imagen para ilustrar lo que es y lo que no es una buena etiqueta alt. Ilustración de BATHI.

Echa un vistazo a la imagen de la izquierda. Aquí hay un ejemplo de una buena etiqueta alt para esta imagen: r ilustración ealística de peces y panes en una cesta.

Y aquí hay una etiqueta alternativa que no es tan buena: pan y pescado

¿Ves la diferencia?

Las etiquetas Alt no son sólo para el beneficio de los usuarios con problemas de visión, sino también para el tuyo. Las etiquetas alt bien diseñadas mejoran el SEO de su sitio, lo que significa un tráfico más relevante y, en última instancia, más conversiones.

Mantenga su navegación predecible

6 pasos para hacer que tu diseño web sea accesibleLos iconos que usas, y cómo los usas, importan. Diseño de iconos por @alexanderk.

El sistema de navegación que utiliza su sitio web debe ser coherente en todas sus páginas. Esto incluye los iconos que utiliza y la forma en que los visitantes llegan a las diferentes páginas del sitio. Por ejemplo, si su página de inicio tiene una barra de encabezado superior con menús desplegables, cada una de las demás páginas también debe tener esta disposición.

Del mismo modo, los iconos que utilice en su sitio web deben ser coherentes. No tiene un receptor telefónico para el icono de «contáctenos» en su página de inicio, y luego un icono de smartphone en su página «Acerca de». Es confuso y puede hacer muy difícil que los programas de accesibilidad averigüen cómo usar su sitio. También debe mantenerse alejado de cualquier tipo de navegación automática y de la reproducción automática de música y vídeos.

¿Por qué? Porque no sólo son molestos, sino que es difícil para un usuario con un lector de pantalla determinar cómo pausarlos. Y cuando un pase de diapositivas o un carrusel se desplaza por el contenido a una velocidad rápida, los usuarios pueden confundirse y frustrarse.

Evite el contenido que pueda causar reacciones físicas

6 pasos para hacer que tu diseño web sea accesibleSiempre haga su sitio web seguro para cualquier usuario que lo visite. Diseño de personajes por José Requena.

¿Recuerdas el episodio de Pokemon que causó que cerca de 700 niños fueran llevados al hospital porque les provocó convulsiones? Es la razón por la que sus consolas de juego ahora vienen con advertencias de ataques fotosensibles. Algunas personas son propensas a sufrir convulsiones cuando se exponen a luces que parpadean rápidamente y a patrones de movimiento. Evita este tipo de animación en tu sitio web para que sea seguro para todos los usuarios.

Haga su texto grande, en negrita y organizado

6 pasos para hacer que tu diseño web sea accesibleLas fuentes sin serifas son más fáciles de leer y por lo tanto, la elección accesible. A través de Design Hack.

Haga su sitio web fácil de ver para las personas con visión limitada haciendo su texto grande. Básicamente, hazlo el equivalente a un libro de letra grande. 16px es generalmente un buen tamaño para el cuerpo del texto, con los encabezados siendo más grandes.

Hay más en hacer que tu texto sea legible que en hacerlo grande. Usa un tipo de letra que sea legible y fácil de leer para los usuarios con dislexia. El Departamento de Salud y Servicios Humanos de los Estados Unidos recomienda Times New Roman, Arial, Helvetica, Tahoma, Calibri y Verdana como fuentes accesibles. Puede jugar seguro eligiendo una de estas, o buscar otra fuente que funcione para todos los visitantes de su sitio web. Las fuentes que son más fáciles de leer son las fuentes que:

  • No tienen serifas
  • Tienen anchos fijos entre las letras
  • Usar letras en negrita

6 pasos para hacer que tu diseño web sea accesibleElegir una paleta de alto contraste puede parecer una elección sencilla, pero supone una gran diferencia para muchos usuarios. Diseño del logo por Frisheid.

Su texto también debe ser organizado de una manera legible y lógica. Divida el texto en secciones más pequeñas divididas por encabezados y subencabezados. Esto no sólo hace que su texto se vea más ordenado, sino que facilita a los lectores de pantalla a descifrar para sus usuarios.

Por último, su texto debe tener un alto contraste con su fondo. El texto que es demasiado similar en color a su fondo es difícil de leer para muchos usuarios de computadoras, particularmente los usuarios que viven con daltonismo. Utilice una herramienta en línea como Contrast Checker para ver cómo funcionan conjuntamente la fuente y los colores de fondo previstos.

Haz que funcione con un teclado solo (y sin uno)

6 pasos para hacer que tu diseño web sea accesibleY para aquellos que no pueden usar un teclado, hay otras formas de navegar por Internet. A través de los instructivos.

Algunos usuarios no pueden agarrar un ratón o mantener la mano firme en el touchpad de un portátil. Estos usuarios confían en sus teclados para navegar por los sitios web, así que haz el tuyo utilizable para ellos construyéndolo de manera que sea totalmente funcional con sólo un teclado.

También hay usuarios que no pueden usar el teclado y dependen de otros medios para navegar por los sitios web, como programas de reconocimiento de voz y head-mousing. Su sitio web también debería ser compatible con este tipo de programas, porque sin ellos, la gente sin el uso de sus manos no podrá usar su sitio.

Haz que te auditen el código (o hazlo tú mismo)

No publique su sitio web en el mundo hasta que un desarrollador competente que esté familiarizado con las últimas prácticas de accesibilidad web haya auditado todo su código. Alternativamente, puedes usar una herramienta de auditoría como la herramienta WAVE de Google Chrome, que encontrará puntos en tu código en los que te faltan las características clave de accesibilidad. Nunca está de más que un desarrollador humano revise tu código después de que lo hayas pasado por una herramienta como WAVE para asegurarse de que nada se ha pasado por alto o se ha sacado de contexto.

Hacer posible que todo el mundo pueda usar su sitio web

6 pasos para hacer que tu diseño web sea accesibleCuando tu página web es accesible, todo el mundo puede usarla igualmente. A través de Arts People.

Recuerda por qué estás tomando estas decisiones de diseño: para eliminar cualquier barrera que pueda impedir que la gente use tu sitio web. Por supuesto, también quieres cumplir con la ley y evitar crear una situación en la que seas responsable de los daños por discriminación de un usuario, pero recuerda siempre el motivo de las directrices que tienes que cumplir: Cuando su sitio web se diseña teniendo en cuenta las necesidades de todos los usuarios, nadie se queda fuera.

¿Quieres saber más sobre el diseño web?
¡Comprueba nuestra última guía para crear un sitio web!

Por aquí.

Comments are closed.