Accesibilidad

¿Qué es el diseño accesible en una web? ¿Cómo puede mejorar nuestro negocio e impulsar el crecimiento?

Nadie dijo nunca: «Construyamos un sitio web que más de mil millones de personas no puedan usar». Sin embargo, eso es exactamente lo que sucede si tu sitio web no está diseñado para ser accesible. Sin un diseño con acceso a Internet, se pierde la oportunidad de hacer negocios con los casi 1 millón de españoles de 45 años o más que tienen algún tipo de discapacidad visual y los más de 1 millón  con problemas de audición.

La accesibilidad también puede mejorar la experiencia general del usuario y la satisfacción de las personas sin discapacidades. Por ejemplo personas en áreas rurales con poco ancho de banda o conexiones lentas, personas mayores, personas con discapacidades temporales o personas en un entorno que reduce la usabilidad, como áreas con poca luz o ruidosas.

Las tecnologías de asistencia actuales, como el software de lectura de pantalla y reconocimiento de voz, permiten a las personas con discapacidad de todo tipo comprar, socializar, educarse y entretenerse online. Es el momento de aprovechar la oportunidad de comunicarse, participar y vender a personas de todas las capacidades. 

Mejorar la accesibilidad de tu página web puede aumentar tus ventas.

Los beneficios del diseño web accesible son muchos: 

Ampliación del alcance del mercado:

El mercado mundial de personas con discapacidad tiene un poder adquisitivo de más de 6 billones de dólares. 

Fortalecimiento del SEO:

El algoritmo de clasificación de Google pone cada vez más énfasis en la accesibilidad.

Branding positivo:

Una mayor accesibilidad web mejora y refuerza tu compromiso con los esfuerzos por la diversidad. 

Riesgo legal reducido:

Muchos países requieren legalmente la accesibilidad digital y este movimiento está creciendo.

Es hora de derribar las barreras de la comunicación mediante el diseño de sitios web con un enfoque intencional en aumentar la accesibilidad y permitir que los usuarios aprovechen al máximo sus tecnologías de asistencia. 

¿Qué es diseño web accesible y qué significa?

Hasta ahora, hemos hablado en términos generales sobre ayudar a las personas con discapacidad a disfrutar de nuestros activos digitales. Pero, más específicamente, ¿qué significa esto? Casi dos docenas de países en todo el mundo, incluyendo España, han promulgado leyes o políticas relacionadas con la accesibilidad de las páginas web.

Sin embargo, ya sea que un país en particular tenga o no regulaciones de accesibilidad a sitios web, las empresas están invirtiendo en esfuerzos de diversidad e inclusión. La mayoría se da cuenta de que sus páginas web deben reflejar mejor este compromiso. El abanderado mundial de accesibilidad a sitios web es el Consorcio World Wide Web (W3C) y sus pautas de accesibilidad al contenido web (WCAG) . Estas son, con mucho, las pautas más universales y populares. 

Los principios de diseño de WCAG incluyen:

Perceptible :

Los usuarios deben poder percibir toda la información relevante en el contenido del sitio web.

Operable :

Los usuarios deben poder operar la interfaz correctamente.

Comprensible :

Los usuarios deben poder comprender la información y el funcionamiento de la interfaz.

Robusto :

El contenido debe ser accesible para todos los usuarios y puede ser interpretado por una variedad más amplia de agentes de usuario.

¿Qué elementos de diseño son importantes en la accesibilidad de una página web?

Sabemos qué es la accesibilidad y por qué es importante. La siguiente pregunta es cómo crear sitios web acogedores que brinden una buena experiencia a todos los visitantes. 

A continuación se presentan sugerencias en tres áreas clave:

Navegación accesible

Contenido comprensible

Formularios fáciles de completar

¿Qué es la navegación de diseño accesible?

Crea contenido y funcionalidades amigables con el teclado.

Una variedad de discapacidades, situaciones y tecnologías de asistencia no permiten la navegación con un ratón. La mayoría de las tecnologías de asistencia requieren el uso de la tecla Tab para moverse entre las diferentes páginas de la web. El diseño accesible requiere tener un «foco de teclado»,  con elementos de navegación que se pueden activar o manipular con el teclado. Principalmente, esto significa asegurarse de que los usuarios puedan usar la tecla Tab para acceder a todo el contenido web y los elementos de navegación, incluidos los menús desplegables, enlaces, CTA, widgets, botones y texto de anclaje. 

Los métodos abreviados de accesibilidad del teclado también pueden facilitar la navegación de un sitio web a las personas con discapacidad visual. Por ejemplo, al presionar la tecla del logotipo de Windows y el signo más (+) se puede encender la lupa ( aquí hay una lista de atajos de teclado para Windows 10 ). Al agregar comandos de teclado simples, los visitantes pueden navegar usando las teclas de flecha y algunas pulsaciones de teclas, en lugar de perseguir el cursor por la pantalla. Para las personas con discapacidades visuales, que a menudo usan pantallas que miden más de 20 pulgadas en diagonal, estos atajos les ayudan a evitar perder su lugar en la pantalla, mover demasiado la cabeza y los ojos, cambiar el enfoque visualmente y experimentar fatiga visual. 

Diseño accesible en relación con contenido comprensible

Haga que el contenido dinámico sea «legible» para el diseño accesible. 

Las tecnologías de asistencia se desarrollaron asumiendo que el contenido es estático. Sin embargo, las interfaces de hoy cuentan con contenido más dinámico que cambia según las preferencias, comportamientos e intereses del usuario. Estos cambios sin que la página se vuelva a cargar en función de los datos y las interacciones del usuario. El problema es que muchos lectores de pantalla solo «leerán» la página tal como aparece cuando se carga por primera vez, lo que hace que el software (y el usuario) pierdan el resto del contenido. Se requieren secuencias de comandos y semánticas adicionales para informar las tecnologías de asistencia cuando cambia el contenido. 

La especificación principal para resolver este problema es WAI-ARIA (Iniciativa de accesibilidad web-Aplicaciones enriquecidas de Internet adicionales) del W3C , un conjunto de atributos HTML (roles, estados, propiedades) y algunas de las mejores prácticas para crear scripts de contenido para ayudar a la accesibilidad. Estas etiquetas ARIA y «puntos de referencia» ayudan a los lectores de pantalla y dispositivos similares a navegar por contenido dinámico etiquetándolo como una «región activa». Según WebAIM , el uso adecuado de ARIA puede:

Mejore la accesibilidad de los controles interactivos, como menús de árbol, controles deslizantes, ventanas emergentes, etc.

Definir puntos de referencia útiles para la estructura de la página

Definir «regiones activas» actualizadas dinámicamente

Mejorar la accesibilidad e interactividad del teclado

Y mucho más.

about:blank

Brinde a los usuarios control sobre los medios automatizados.

Además del contenido dinámico, los diseñadores deben conocer los posibles problemas de accesibilidad y usabilidad con los medios y la navegación automatizados. Por ejemplo, es posible que los lectores de pantalla no sepan cómo apagar los medios. En otros casos, el ruido repentino puede alarmar a ciertos usuarios. A veces, los carruseles / controles deslizantes de avance automático no brindan suficiente tiempo para absorber el contenido. 

Un buen consejo es usar medios automatizados solo si es lo mejor para su audiencia, no solo porque sea genial o divertido. Otra es poner a sus visitantes en control, brindándoles formas claras de iniciar, pausar y finalizar el movimiento del carrusel, videos, sonido, animaciones u otros medios. De manera similar a las pautas para el contenido dinámico, todas las funciones deben poder operarse con el teclado, los cambios de los controles deslizantes deben comunicarse a los usuarios y los dispositivos de asistencia, y el enfoque del teclado debe administrarse de manera razonable y completa.

Cree elementos interactivos fácilmente identificables para un diseño accesible.

Elementos interactivos:

Otra consideración de navegación es la interactividad y la facilidad de participación del usuario. Esto es importante no solo para las personas con discapacidades, sino también para la usabilidad en general, especialmente en pantallas pequeñas. Los enlaces, botones y otros elementos interactivos deben ser fáciles de identificar, con nombres, estilos, comentarios interactivos y posicionamiento consistentes utilizados de manera consistente en todo el sitio. Además, evite las combinaciones de colores (como el rojo y el verde) que son difíciles de distinguir para más del 8% de la población con daltonismo . En lugar de transmitir información solo a través del color, aclare los elementos utilizando combinaciones de color, texto, etiquetas e iconografía.

disñeo accesible página web

Aumenta el contraste.

El color, la textura y el contraste son consideraciones importantes para cualquier sitio web, especialmente si se tiene en cuenta la accesibilidad. Una alta prioridad es elegir un esquema de color con alto contraste entre el texto (primer plano) y el fondo. La retinitis pigmentosa, el glaucoma, la retinopatía y las cataratas conducen a una disminución de la sensibilidad al contraste. Si bien una interfaz con sutiles gradaciones de color puede resultar atractiva, el bajo contraste puede provocar tensión y fatiga en las personas con discapacidad visual.

Brindar opciones para consumir contenido.

Las tendencias actuales de diseño de sitios web a menudo minimizan el contenido escrito en lugar de imágenes y contenido multimedia prominentes y llamativos. Afortunadamente, las personas con discapacidades no tienen que perder la información transmitida por estas funciones del sitio web.

Todo lo que se necesita es acompañar fotos y gráficos con «etiquetas alt» HTML descriptivas para el software de lectura de pantalla (que es muy fácil en WordPress). Las etiquetas Alt también pueden ayudar con el SEO, dando a los motores de búsqueda más información para rastrear y brindando la oportunidad de incluir palabras clave. Para otros medios, puede incluir enlaces visibles a transcripciones de audio, enlaces a versiones de videos con descripción de audio, leyendas y descripciones de tablas y gráficos.

que es el diseño accesible

Formateo fácil de leer  para un diseño accesible

Es relativamente sencillo hacer que las páginas sean más fáciles de comprender con solo unos pocos consejos de formato y diseño. Estas técnicas son útiles para todos los visitantes de su sitio web, con o sin discapacidad visual. Al mejorar la usabilidad general y la satisfacción del usuario, los siguientes consejos pueden incluso ayudar con el SEO, y todos están bajo el control incluso de los especialistas en marketing no técnicos.

  • Utilice fuentes fáciles de leer, como Arial, Helvetica, Calibri y otras fuentes sans serif que tienen caracteres simples y fácilmente reconocibles.
  • Utilice tamaños de letra grandes, con un tipo de cuerpo de al menos 16 puntos.
  • Agrupe el contenido bajo subtítulos descriptivos.
  • Escriba las siglas en su totalidad en la primera mención.
  • Asigne a todos sus enlaces nombres únicos y descriptivos y texto de anclaje.
  • Utilice mucho espacio en blanco.
  • Reducir el desorden.
  • Utilice únicamente tablas para datos tabulares, no para diseños, listas o cualquier otra cosa que pueda confundir las tecnologías de asistencia y los dispositivos.

Formularios fáciles de completar para un diseño accesible

Muchos formularios en línea no están diseñados teniendo en cuenta la accesibilidad y las tecnologías de asistencia, lo que puede ser una fuente de gran frustración y una forma segura de perder negocios.

Aquí hay algunas pautas a seguir:

  • Proporcione información e instrucciones claras y fáciles de entender.
  • Proporcione a todos los campos elementos o atributos de título.
  • Cree mensajes de error claros y etiquetados para lectores de pantalla.
  • Etiquete claramente cada campo, con la etiqueta muy cerca de su campo respectivo, ya sea a la izquierda o encima del campo (las casillas de verificación y los botones de opción suelen estar a la derecha).
  • Incluya texto que indique los campos obligatorios.
  • Proporcione comentarios sobre interacciones, como mensajes de error y confirmación de envío. Los comentarios importantes que requieren información del usuario deben estar en un estilo destacado, como los especificados por W3 (World Wide Web Consortium).

Hay muchos creadores de formularios y complementos de WordPress diseñados para este propósito, incluidos Formidable Forms , WP Accessibility Helper y Accessibility WordPress Plugin .

Conclusión

Asegurarse de que su sitio web sea acogedor y accesible debe ser una prioridad absoluta. ¡Es socialmente responsable, respetuoso y simplemente un buen negocio! No hay razón para excluir a nadie, especialmente porque es relativamente fácil evitarlo. Sus usuarios no solo se lo agradecerán, sino que probablemente verá un mayor tráfico y conversiones. Para asegurarse de que su sitio web esté optimizado para la accesibilidad, trabaje con una agencia interactiva como Ladybugz Interactive que tenga un conocimiento experto sobre lo que es el diseño accesible para la web.

¿Necesitas ayuda para mejorar el diseño accesible de tu sitio web? 

Contáctanos para un presupuesto

Author

Carlos Hernández

Desde que tengo memoria me ha gustado mucho el diseño y la programación, y por ello creé Kolorea, una empresa de programación, diseño, y posicionamiento SEO. ¿Qué necesitas? ¡Te ayudamos!

Leave a comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Abrir chat
Hola 👋
¿En qué puedo ayudarte?