10 principios básicos para guiar el diseño web inclusivo

Los estudios han demostrado que alrededor del 70% de los sitios web son al menos parcialmente ilegibles con tecnología de asistencia.

Esta estadística suena y es impactante. ¿Cómo es posible que tantas marcas prescindan de consideraciones obvias para los millones de usuarios de Internet discapacitados?

Cuando consideramos la frecuencia con la que las personas con discapacidad se vuelven invisibles dentro de la sociedad y las empresas, lamentablemente comienza a tener más sentido.

Las Pautas de accesibilidad al contenido web (WCAG) definen cómo los sitios web pueden mejorar su accesibilidad y, por lo tanto, su inclusión.

Muchas de estas pautas se están convirtiendo en consagradas por ley, por lo que su negocio puede estar en riesgo si su sitio web no es accesible.

Los beneficios de la inclusión para su empresa y sus clientes son enormes.

La accesibilidad le dará una mayor participación de audiencia, pero también es clave para generar confianza en los clientes.

Todos los clientes, discapacitados o no, se beneficiarán de una experiencia en el sitio web más fluida. Apreciarán una empresa que se preocupe por esta experiencia.

La inclusión significa considerar la gama de necesidades de sus clientes y cómo su acceso a su servicio podría ser limitado. La implementación exitosa de las funciones de accesibilidad lo ayudará a superar estos límites.

Aunque este artículo se centra en el diseño de sitios web, recuerde que un problema clave de accesibilidad es la falta de acceso a Internet, por lo que debería buscar reforzar la disponibilidad en todas las áreas.

Las tecnologías telefónicas, como las opciones de llamadas en conferencia de acceso telefónico, pueden ayudarlo a mantener un contacto remoto con todos sus clientes.

Ahora, pasemos a esos diez principios básicos para guiar el diseño web inclusivo.

Directrices de diseño inclusivo

1. Sea flexible

El término "discapacidad" cubre una amplia gama de experiencias y necesidades humanas. Esto puede resultar intimidante al considerar cómo hacer que su sitio web sea accesible e inclusivo.

Sin embargo, tenga en cuenta que todos sus clientes, discapacitados o no, vienen a su negocio con necesidades y preferencias muy diferentes.

Es cierto que no puedes complacer a todos, pero puedes ofrecer una experiencia flexible para llegar a la mayor cantidad de clientes posible.

Tenga en cuenta el contexto en el que los usuarios acceden a su sitio. Por ejemplo, ¿qué tipo de dispositivos están usando? ¿Es más probable que utilicen sus servicios en el trabajo o en casa?

Perfile a sus clientes para determinar sus datos demográficos, como la edad y el sexo. Esta es una de las claves para comprender la mejor plataforma de comercio electrónico o diseños de página para su negocio.

Su mejor opción, tanto para satisfacer a sus clientes existentes como para llegar a otros nuevos, es la flexibilidad.

Ofrezca una variedad de opciones de contacto dentro y fuera de línea. Ponerse en contacto con su empresa y utilizar sus servicios debe ser sencillo e indoloro. Esto beneficia a todos sus clientes, no solo a aquellos con necesidades adicionales.

2. Evite los clientes abrumadores

Si bien un cierto grado de contenido en movimiento puede ayudar a que su sitio se destaque, demasiado puede provocar ansiedad y presión. Para los usuarios con necesidades de salud mental, como ansiedad, autismo o TDAH, estos problemas son especialmente pertinentes.

La WCAG tiene pautas claras sobre contenido en movimiento. El contenido en movimiento (es decir, GIF, canales de noticias de desplazamiento y actualización automática, etc.) debe tener un mecanismo de pausa si se inicia automáticamente, dura más de cinco segundos y es paralelo a otro contenido.

Dependiendo de su audiencia, es posible que desee considerar renunciar por completo al contenido de reproducción automática. Piense en sus clientes mayores que pueden no estar acostumbrados a los servicios web.

Demasiada información sensible al tiempo y conmovedora es desagradable y abrumadora.

Muchos sitios en estos días tienen una ventana emergente de chat en vivo tan pronto como ingresa al sitio. Esto tiene sus ventajas como herramienta de contacto de fácil acceso. Sin embargo, puede resultar irritante si aparece un mensaje inmediatamente cada vez que utiliza el sitio web.

En lugar de una ventana emergente, podría tener una opción de chat en vivo señalizada y plegable en una posición discreta. Forzar el contacto con sus clientes tan pronto como lleguen puede resultar muy presionante.

Esto también debería aplicarse al uso que hace su empresa de las aplicaciones de mensajería de texto. No inunde a sus clientes con notificaciones.

3. Utilice una tipografía clara

La WCAG es clara sobre los requisitos de tipografía:

• Mantener el texto alineado a la izquierda o a la derecha (no justificado)
• El espaciado entre líneas y párrafos debe ser de al menos 1,5x
• El ancho máximo de párrafo es de 80 caracteres

Siempre debe adherirse a estas pautas, pero puede ir más allá para beneficiar a más de sus clientes.

Utilice una fuente sans serif clara, de buen tamaño y que contraste con el color de fondo. El lenguaje debe ser simple y directo, sin ser condescendiente a sus clientes.

Utilice la investigación de sus clientes para determinar qué esperan los clientes de su sitio web.

Otra preocupación importante es el texto dentro de las imágenes. Esto debe evitarse siempre que sea posible.

Los usuarios ciegos y con discapacidad visual utilizan con frecuencia software de lectura de pantalla. Estos programas leen el texto en pantalla en voz alta, pero no pueden decodificar imágenes.

Por lo tanto, sus clientes pueden perder información importante si el texto está "oculto" dentro de una imagen. Es importante que sus clientes con discapacidad visual no sientan que su acceso a su sitio es limitado.

4.Hacer que las imágenes sean accesibles

Por supuesto, las imágenes siguen siendo esenciales para un buen diseño web. Y, a la inversa, pueden mejorar la accesibilidad para otros clientes.

Para aquellos con discapacidades de lectura, como dislexia, las imágenes relevantes pueden mejorar la comprensión del texto. Es casi seguro que las imágenes serán necesarias para algunas áreas de su sitio, como las páginas de productos.

Aún puede hacer que las imágenes sean accesibles para los usuarios de lectores de pantalla. Se debe incluir texto alternativo para cada imagen de su sitio. Este es el texto que aparece cuando pasas el cursor sobre una imagen.

También lo leen los lectores de pantalla, que no pueden mostrar la imagen en sí. El buen texto alternativo describe la imagen mostrada de forma clara y precisa.

Es fácil colocar texto alternativo en su sitio web con HTML. La inclusión de texto alternativo no interrumpirá a otros usuarios y beneficiará enormemente a aquellos que usan lectores de pantalla. El texto alternativo y las imágenes accesibles también pueden ser beneficiosos para la clasificación de los motores de búsqueda.

Aparte del texto alternativo, es importante que las imágenes en sí se presenten de forma accesible. Para los propósitos de WCAG, el contraste de color se mide como una proporción. Hay muchas aplicaciones y extensiones de navegador que se pueden usar para medir esta proporción.

Si bien las imágenes incidentales para decoración solo no tienen requisitos de contraste, el texto sobre el fondo debe tener una relación de contraste de 4.5: 1. Los elementos gráficos, como los gráficos, y los elementos de la interfaz de usuario, como los iconos en los que se puede hacer clic, tienen un requisito de 3: 1.

Por último, casi 1 de cada 20 personas son daltónicas. Piense qué combinaciones de colores pueden resultar problemáticas para estos usuarios.

Hay muchos tipos diferentes de daltonismo. Las aplicaciones se pueden utilizar para simular la apariencia de su sitio web para los usuarios daltónicos. Aún mejor, comuníquese con personas con daltonismo u otras discapacidades visuales para averiguar qué tan utilizable es su sitio.

5. Garantizar la accesibilidad de la pantalla táctil

Es fácil caer en la trampa de creer que su sitio de escritorio es el "predeterminado". El uso de teléfonos inteligentes y tabletas continúa aumentando entre todos los usuarios debido a su conveniencia. Estos dispositivos también son generalmente más asequibles que las computadoras portátiles o de escritorio.

Considere la accesibilidad de su sitio para los usuarios de bajos ingresos y preste atención a su sitio móvil.

Tocar y deslizar el dedo debe ser fácil e intuitivo. El propósito de sus enlaces debe ser claro y debe tratar de minimizar los errores de tapping.

Recuerde que un dedo es mucho más grande que un cursor y oscurece la vista del usuario de la pantalla. Puede hacer esto con botones de buen tamaño y bien espaciados. WCAG exige un tamaño de botón de 44 x 44 píxeles.

Considere las necesidades físicas de los clientes con la optimización de su pantalla táctil. Las discapacidades pueden significar que los clientes tienen una destreza o resistencia física limitadas, por lo tanto, evite los requisitos táctiles prolongados o complicados.

El gesto de "pellizcar", que a menudo se requiere para hacer zoom o rotar, puede resultar agotador incluso para los usuarios sanos. En su lugar, es posible que desee tener un botón de zoom que se pueda tocar, una excelente señal de que se preocupa por la comodidad de sus clientes.

6. Asegúrese de que el usuario ingrese fácilmente

Esto está estrechamente relacionado con el área de accesibilidad de la pantalla táctil.

Los formularios de su sitio web (para realizar pedidos, ponerse en contacto, configurar una cuenta, etc.) deben ser sencillos para sus clientes. Asegúrese de que todas las casillas estén claramente etiquetadas con la entrada requerida.

También puede colocar marcadores de posición en casillas para ejemplificar lo que los clientes deben ingresar. Por ejemplo, una dirección de correo electrónico de marcador de posición como [email protected]

Incluso con los diseños más accesibles, siempre hay margen para el error humano. Es importante que su sitio web sea tolerante a los errores de entrada. No hagas que tus clientes se sientan estúpidos por los errores y haz que sean fáciles de corregir.

La mejor manera es resaltar los errores en tiempo real, para que los clientes no tengan que desplazarse hacia atrás en formularios largos. No confíe solo en el color para mostrar errores; esto puede no ser accesible para usuarios con discapacidad visual.

Haga que los mensajes de error sean claros, no crípticos, y brinde a los clientes la opción de una verificación final antes de enviarlos.

La tolerancia a los errores no solo mejora la accesibilidad de su sitio web. También hace que los clientes se sientan apoyados en cada paso de su trato con usted.

Hacer que los formularios sean intuitivos e inclusivos es una de las muchas formas en que puede generar confianza con sus clientes, demostrando que se preocupa por su experiencia.

7. Apunte a la simplicidad informativa

La transmisión de información beneficia claramente a todos los que usan su sitio. Ayuda a las personas con discapacidades de aprendizaje o lectura, usuarios con discapacidades visuales, usuarios sin discapacidades y su propio personal.

La información clara en su sitio web reducirá la presión sobre sus equipos de servicio al cliente, al reducir el número de consultas de aclaración.

Los párrafos deben ser breves y el vocabulario no debe ser más complicado de lo necesario. No evite usar términos específicos de la industria que sus clientes entenderán, pero su sitio web no es el lugar para flexionar ese vocabulario SAT.

Elimine la ambigüedad siempre que sea posible. Su significado exacto siempre debe ser claro y las funciones de los enlaces en su sitio deben estar etiquetadas exactamente.

Apunte a un diseño mínimo que enfatice lo más importante para sus clientes.

8. Mantenga la coherencia

Para algunos clientes discapacitados, el cambio puede resultar discordante. Si bien está bien actualizar su sitio web a medida que evoluciona su marca, es probable que los cambios innecesarios frecuentes desanimen a los clientes.

Cuando parece que la identidad de su marca cambia constantemente de forma, es menos probable que sus clientes confíen en usted.

La coherencia también debe mantenerse en el lado del servicio al cliente.

Las soluciones como las redes definidas por software pueden ayudarlo a mantener un servicio coherente. Mantenga un tono amigable y abierto para asegurarse de que todos sus clientes se sientan respaldados.

Algunos clientes pueden necesitar que la información se repita con más frecuencia. Su equipo de CS debe estar preparado para esto, pero también vale la pena considerar hacer que la información sea más accesible.

Las funciones de accesibilidad, como el contraste de color y el texto alternativo, deben ser consistentes en todas las áreas de su sitio web.

Puede resultar tentador ofrecer una versión completamente diferente de su sitio a los usuarios discapacitados. Sin embargo, esto puede ser diferente y hacer que estos clientes se sientan como una carga. En su lugar, integre la accesibilidad en su sitio desde cero, en beneficio de todos sus clientes.

9. Mantenga su sitio sin problemas

Otro problema de accesibilidad es el hecho de que no todo el mundo tendrá acceso a Internet rápido o hardware potente.

Los clientes en áreas rurales, en países en desarrollo o clientes de bajos ingresos pueden tener problemas con su sitio web.

Diseñe su sitio para que los usuarios puedan elegir si ver contenido que consume datos, como videos. Hay muchas formas de reducir el retraso en su sitio web para beneficiar a estos clientes.

Considere, nuevamente, cómo los clientes acceden a su sitio web.

Piense en los dispositivos que utilizan y en las áreas geográficas en las que se encuentran. Independientemente de cómo los clientes vean su sitio web, deberían disfrutar de una experiencia sin esfuerzo. No quiere que sus clientes sientan que usar su sitio es una tarea engorrosa.

Garantice una codificación ajustada y de alta calidad para reducir errores frustrantes. Intente reducir la cantidad de páginas en las que sus clientes deben hacer clic cuando realizan tareas.

Mantenga los formularios en el menor número de páginas posible. A nadie le gusta esperar a que se carguen nuevas páginas cada pocos segundos, especialmente si su conexión es deficiente.

10. Cree una jerarquía visual en el diseño de sitios web

Un hilo común en muchos de los mejores diseños de sitios es una jerarquía visual clara. Esto significa que la navegación es fácil y es obvio qué pasos deben seguir los usuarios para las diferentes tareas.

Puede analizar el uso que hacen los clientes de su sitio web y destacar las funciones más utilizadas. Evite el "mosaico", ya que esto es fácilmente abrumador y no es particularmente claro.

Puede agrupar características relacionadas junto con opciones de diseño unificadoras como el color y la forma. Sin embargo, no solo debe confiar en estas funciones. Como se mencionó, pueden ser inaccesibles. Use texto también, con el propósito de lectores de pantalla.

El propósito de la jerarquía visual es hacer que sea más rápido y más fácil para sus clientes usar y navegar por su sitio web.

Utilice sus opciones de diseño para dirigir a los clientes a las secciones relevantes de su sitio web. Comprenda las necesidades de sus clientes y enfatice lo que es más importante para ellos

Palabras finales sobre la inclusión

En última instancia, la filosofía detrás de la accesibilidad y la inclusión es que los usuarios discapacitados son tan valiosos como cualquier otro usuario. Esto puede parecer obvio, pero un número sorprendente de marcas no lo ponen en práctica con los diseños de sus sitios web.

Hacer un esfuerzo adicional para garantizar que todos sus clientes tengan una buena experiencia generará confianza y lealtad en su base. Sus clientes estarán más felices y usted se destacará como una empresa que realmente se preocupa.

Bio del autor

John Allen es director de SEO global en RingCentral, un proveedor global de software de marcación automática, UCaaS y VoIP. Tiene más de 14 años de experiencia y una amplia experiencia en la construcción y optimización de programas de marketing digital. Ha escrito para sitios web como Vault y 3DCart.