La accesibilidad digital se refiere a las prácticas para crear contenido digital y aplicaciones que son adecuadas para su uso por una amplia gama de personas, incluidas aquellas que sufren de deficiencias visuales, motoras, auditivas, del habla o cognitivas.
Existe la falsa creencia de que puede hacer que un sitio sea accesible solo invirtiendo mucho esfuerzo y dinero, pero esto no es necesario. Si diseña un proyecto desde el principio, teniendo en cuenta los requisitos relevantes, no necesitará agregar funciones y contenidos especiales, lo que significa que no habrá costos adicionales.
Si se trata de corregir errores en un sitio existente, entonces se deberán hacer algunos esfuerzos aquí. Cuando trabajaba en Carbon Health, una vez probamos la accesibilidad del sitio usando una
extensión especial en Chrome . Ya en la página principal, se encontraron 28 violaciones que debían eliminarse. A primera vista, parecía que sería un proceso muy laborioso, pero pronto quedó claro que hacer cambios no sería tan difícil: solo necesita invertir tiempo y comprender los conceptos básicos. Logramos reducir el número de violaciones a cero en solo un par de días.
Quiero compartir algunos pasos simples que hemos tomado y que pueden ayudarlo. Estos principios están diseñados principalmente para aplicaciones móviles y web. Pero antes de comenzar, descubramos por qué esto es necesario.
¿Por qué luchar por la accesibilidad?
Nosotros, como diseñadores, somos capaces y estamos obligados a hacer todo lo que esté a nuestro alcance para que todos los productos creados por nosotros puedan ser utilizados por todos, independientemente de las capacidades, el contexto o la situación. Lo bueno es el deseo de accesibilidad: en última instancia, proporciona una experiencia más positiva para todos.
El número de personas con discapacidad alcanza los 56 millones en los Estados Unidos (es decir, un poco menos de un quinto de la población) y alrededor de mil millones en todo el mundo. En 2017, se
presentaron 814 demandas por accesibilidad al sitio web. Estos dos hechos ya nos demuestran convincentemente la importancia de este tema.
Además, la accesibilidad resulta beneficiosa
desde el punto de vista comercial : los estudios muestran que los sitios accesibles ocupan posiciones más altas en los resultados de búsqueda, tienen buenos indicadores de SEO, se cargan más rápido, estimulan la práctica de escribir un mejor código y siempre se distinguen por una excelente usabilidad.
Estas siete reglas son relativamente fáciles de seguir y le permitirán llevar el producto al nivel AA a través del sistema de
Pautas de Accesibilidad al Contenido en la
Web (WCAG 2.0), lo que lo hace compatible con dispositivos de asistencia básicos, incluidos lectores de pantalla, lupas de pantalla y herramientas de reconocimiento de voz.
1. Haz que los colores contrasten lo suficiente
El contraste de color es uno de los problemas de accesibilidad del sitio que a menudo se olvidan. Es probable que las personas con discapacidad visual tengan dificultades para leer el texto si no contrasta lo suficiente con el fondo. Según las estimaciones de la Organización Mundial de la Salud (OMS)
en su documento sobre discapacidad visual y ceguera , la relación entre el brillo del texto y el fondo debe ser de al menos 4.5: 1 (para que coincida con el nivel de AA). Para las fuentes más grandes y en negrita, se permiten las asignaciones: son más fáciles de distinguir incluso con bajo contraste. Si el tamaño de su texto es 14-18pt o más, el umbral se reduce a 3: 1.
Existen herramientas que lo ayudan a verificar rápidamente el contraste. Aquellos que trabajan en una Mac, les aconsejo que obtengan la aplicación
Contraste : les permite calcular instantáneamente la proporción con una pipeta. Si desea obtener una evaluación más detallada, le recomiendo que ingrese los valores necesarios en la
herramienta para verificar el contraste de WebAIM. Calculará la proporción para diferentes tamaños de fuente y establecerá la correspondencia a
diferentes niveles (A, AA, AAA). Al cambiar los valores, puede obtener el resultado en tiempo real.
Fuente:
WCAG Visual Contrast2. No confíe únicamente en el color para transmitir información crítica
Cuando intente decirle al usuario algo importante: mostrar un ejemplo de una acción o provocar una reacción, no haga que el color sea el único marcador visual. Las personas con agudeza visual o daltonismo tendrán dificultades para percibir su contenido.
Intente complementar el color con algún otro indicador, por ejemplo, una firma o textura. Cuando muestre un mensaje de error en la pantalla, no se limite a resaltar el texto en color: agregue un icono o un título a la ventana. También considere usar una fuente en negrita o subrayada para que los enlaces en el texto sean inmediatamente llamativos.
Los elementos con una estructura de información más compleja, por ejemplo, gráficos, son especialmente difíciles de leer cuando los tipos de datos están separados solo por color. Use otros aspectos visuales para transmitir información: forma, tamaño y texto explicativo. Puede agregar patrones al relleno para que la diferencia sea más obvia.
La versión de Trello para daltónicos es un gran ejemplo de aplicación de esta regla. Si cambia a este modo, los atajos se vuelven universalmente comprensibles al agregar texturas.
Hay una buena manera: imprima el gráfico en una impresora en blanco y negro y vea si todo está claro para usted. Además, puede usar aplicaciones especiales como
Color Oracle , que en tiempo real muestra cómo se verá el contenido para las personas con las discapacidades de percepción de color más comunes. Todo esto lo ayudará a asegurarse de que la información en su sitio no esté demasiado vinculada al color.
Fuente:
WCAG Contraste visual sin color3. Resaltar elementos activos
¿Notó un marco azul que a veces aparece alrededor de enlaces, campos y botones? Tal marco se llama un indicador de enfoque. Los navegadores usan la pseudoclase CSS de forma predeterminada para mostrarla en los elementos cuando se hace clic en ellos. Tal vez te parezca no demasiado bonito y preferirías simplemente eliminarlo. Sin embargo, si decide deshacerse del estilo predeterminado, asegúrese de proporcionar algún tipo de reemplazo.
Los indicadores de enfoque ayudan a las personas a comprender con qué elemento puede interactuar con el teclado y dónde se encuentran en la estructura de la página. Son útiles para personas ciegas que usan lectores de pantalla, personas con discapacidades físicas o síndrome del túnel carpiano, y usuarios avanzados que prefieren este tipo de navegación. Bueno, además, muchos de nosotros, en principio, ¡preferimos navegar en Internet con el teclado!
Los elementos por los cuales se debe enfatizar visualmente el estado activo incluyen: enlaces, campos de formulario, widgets, botones y elementos de menú. Todos ellos necesitan indicadores que los distingan de los elementos circundantes.
Puede diseñar indicadores para que se vean bien en el estilo de su sitio y se combinen con la imagen de la marca. Haga que los marcadores de estado activos sean fácilmente visibles, con alto contraste, para que sean claramente visibles entre otros contenidos.
Fuente:
W3C Focus Visible4. Agregue subtítulos e instrucciones a los campos de entrada
Uno de los errores más graves al crear formularios es dejar firmas explicativas en los propios campos para que desaparezcan al ingresar datos. Cuando hay poco espacio en la pantalla o quieres darle al diseño un aspecto minimalista y moderno, la tentación es genial, pero no lo hagas. El texto en los campos del formulario suele ser gris y no tiene suficiente contraste, es difícil de leer. Y las personas como yo, además, a medio camino olvidan que escribieron, por lo que la firma que desaparece nos priva de todas las posibilidades de resolverlo.
Las personas que usan lectores de pantalla generalmente se mueven en forma usando la tecla Tab, pasando de un controlador a otro. Los elementos de la etiqueta se cuentan para cada uno de ellos. Por lo general, se omite el resto del texto que no se aplica a ellos (las mismas etiquetas explicativas dentro de los campos).
Siempre asegúrese de que las personas entiendan qué hacer con el formulario y qué escribir en él. Es mejor si las firmas permanecen visibles incluso durante el proceso de entrada: una persona debe tener un contexto ante sus ojos al completar los campos. Al ocultar firmas e instrucciones para el formulario, los diseñadores, en busca de la simplicidad
, sacrifican la usabilidad .
Esto no significa que deba abarrotar la pantalla con información inútil, solo asegúrese de que la mayoría de los consejos clave estén disponibles. Un exceso de datos no puede traer menos problemas que su falta. Su objetivo es proporcionar información en un volumen tal que el usuario pueda realizar la operación sin problemas.
Fuente:
WebAIM Creación de formularios accesibles5. Escriba descripciones alternativas informativas para imágenes y otros elementos no textuales
Las personas con discapacidad visual a menudo usan lectores de pantalla para "escuchar" Internet. Transforman el texto en un discurso sonoro, lo que hace posible escuchar todo lo que está escrito en el sitio.
Una descripción alternativa se puede representar de dos maneras:
- En el atributo alt del elemento de imagen
- En el contexto inmediato o en el texto que acompaña a la imagen.
Trate de describir lo que está sucediendo en la imagen y cómo se relaciona con el significado general, y no solo salga con un comentario como "imagen". El contexto es crucial.
Si la imagen se agrega únicamente por belleza o lo que expresa está duplicado en el texto, puede agregar el atributo y dejarlo en blanco; en este caso, el lector de pantalla lo omitirá. Cuando no se escribe ningún texto alternativo, algunos lectores de pantalla leerán el nombre del archivo. No puedes imaginar nada peor para una experiencia de usuario.
Actualmente, Google está trabajando en una
solución basada en inteligencia artificial que genera subtítulos de imágenes con una precisión del 94%. El código está en el dominio público y todavía está en proceso de finalización. Espero que pronto veamos cómo se aplicará esta solución en varios productos. Hasta entonces, debe registrar manualmente el significado y el propósito de las imágenes en el contexto del resto del contenido.
Fuente:
W3C Usando Atributos Alt6. Use el marcado correctamente
Los encabezados marcan el comienzo del bloque de contenido; estos son algún tipo de etiquetas que determinan el estilo y el propósito del texto. Además, los encabezados definen la jerarquía del contenido en la página.
La fuente grande en los encabezados permite al usuario comprender mejor la estructura de la información. Los lectores de pantalla también se basan en encabezados cuando leen contenido. Por lo tanto, las personas con baja visión tienen una idea de la apariencia general de la página al escuchar los encabezados en una secuencia jerárquica.
Al desarrollar un sitio, debe usar los elementos estructurales correctos, los elementos HTML transmiten información al navegador sobre qué tipo de contenido llevan y qué acciones llevar a cabo con él. Son los componentes y la estructura de la página los que forman el árbol de accesibilidad del navegador con el que los lectores de pantalla trabajan para personas con discapacidad visual.
El marcado incorrecto afecta gravemente la accesibilidad. No limite el uso de etiquetas HTML a efectos estilísticos. Los lectores de pantalla se guían por una página basada en la estructura jerárquica de los títulos: títulos reales, y no solo texto que se hace más grande y más grueso. Con su ayuda, los usuarios pueden escuchar la lista completa de encabezados, omitir bloques de contenido, guiados por el tipo de encabezado o ir a la navegación a través de encabezados del primer nivel (h1).
Fuente:
Estructura Semántica de WebAIM7. Soporte de control de teclas
La capacidad de realizar operaciones utilizando el teclado es uno de los principales componentes de accesibilidad en el diseño web. Las personas con problemas de coordinación de movimientos y tono muscular, ciegos, aquellos que usan lectores de pantalla e incluso algunos usuarios avanzados confían en el teclado cuando navegan por el sitio.
Tal vez usted, como yo, use la tecla Tab para navegar a los elementos de página interactivos deseados: enlaces, botones, campos de entrada. El indicador del estado activo, del que hablamos anteriormente, le permite enfatizar visualmente el elemento que está seleccionado actualmente.
Al moverse por la página, la secuencia en la que el usuario interactúa con los elementos es extremadamente importante, por lo que la navegación debe ser lógica e intuitiva. El orden de transición debe corresponder a la dirección del movimiento de la mirada: de izquierda a derecha, de arriba a abajo, primero la navegación principal, luego los botones que ocultan el contenido y las formas y, finalmente, el pie de página.
Es una buena práctica probar el sitio usando solo el teclado. Ir de un enlace a otro y de un campo a otro con la tecla Tab. Compruebe si es conveniente seleccionar un elemento presionando Entrar. Asegúrese de que todos los componentes estén alineados en el orden correcto y que su apariencia sea predecible. Si puede pasar por todas las páginas sin tocar el mouse, ¡lo está haciendo bien!
Y una cosa más. Preste atención a los volúmenes en el sistema de navegación; esto se refiere a la cantidad de enlaces y al tamaño del texto. Iterar sobre todos los elementos de una lista larga puede cansar a las personas con capacidades motoras limitadas, y las personas que usan un lector de pantalla se cansarán rápidamente de escuchar textos de enlaces largos. Intenta ser más conciso. Agregar
marcadores ARIA o elementos estructurales HTML 5 (como main o nav) también facilitará la navegación por la página.
Fuente:
Teclado W3C¿Qué más se puede hacer?
Estas reglas son un buen punto de partida, pero si desea hacer algo más para aumentar la accesibilidad, le recomendaría:
- Realizar una auditoría de disponibilidad. Utilice el servicio especial para averiguar si su producto está en conflicto con dispositivos auxiliares y si cumple con los requisitos del nivel AA. Realice los cambios necesarios en función de los resultados y repita la prueba.
- Nombrar un auditor. Puede indicarle a uno de los empleados que realice dichas auditorías regularmente, por ejemplo, a alguien del equipo de evaluación. Si no hay personas con la experiencia necesaria, puede contactar a un especialista externo.
- Considere los factores de accesibilidad al recopilar información. Al realizar una investigación, verifique si sus suposiciones sobre accesibilidad están confirmadas y busque oportunidades para refinar algo. Involucrar a personas con discapacidades es un poco más difícil. No dude en ponerse en contacto con asociaciones y comunidades , por lo general, con gusto le ayudarán.
Conclusión
Bueno, eso es todo. Estas fueron siete reglas que lo ayudarán a llevar su sitio al nivel aproximado de AA de
acuerdo con las Pautas de Accesibilidad al Contenido en la Web .
Todavía sigo trabajando para hacer que el diseño sea más accesible, y trato de observar los principios que predico a los demás. Anteriormente, me parecía que todo esto era demasiado complicado y todavía no importaba. Pero me equivoqué. Le sugiero que comience el proceso utilizando estas reglas y continúe la conversación sobre por qué la accesibilidad es importante.
La promoción de prácticas de accesibilidad es responsabilidad de los diseñadores. Con su ayuda, abrimos el camino a la tecnología para todas las personas, independientemente de sus capacidades, nivel de vida, edad, educación y lugar de residencia. Asumir la responsabilidad al diseñar. Gracias
Referencias
WebAIM - Artículos, recursos y
estudios de caso sobre accesibilidad en diseño web
"
7 cosas que un diseñador necesita saber sobre accesibilidad " es un excelente artículo de Salesforce con observaciones precisas
Programa de Discapacidades y Computación de UCLA : el sitio, por supuesto, no es el más hermoso y moderno, pero es muy rico en recursos
Mitos de UX : una extensa lista de conceptos erróneos en el diseño de UX con refutaciones; algunos de ellos tocan problemas de accesibilidad
Flujos de trabajo de accesibilidad de color : aquí
Geri Coady muestra cómo llegar al punto con la selección de colores
W3C : la biblia de la accesibilidad en el diseño web, incluso puede confundirse por la abundancia de materiales. Pero cuando comprenda la estructura, encontrará excelentes ejemplos, consejos y recursos.
Herramientas utiles
WebAIM Color Contrast Checker : una herramienta inteligente para verificar el contraste, produce un resultado inmediatamente después de la entrada y para diferentes tamaños de texto
Componentes inclusivos : una biblioteca de texturas diseñada como un blog. Se presta especial atención a las cuestiones de diseño asequible. Cada publicación analiza algún componente de interfaz común y ofrece una versión más confiable y asequible de su diseño.
Color Oracle es un simulador gratuito de daltonismo adaptado para Windows, Mac y Linux. En tiempo real, muestra cómo ven las personas con trastornos generalizados de la percepción del color.
Pautas de accesibilidad de productos Vox : lista completa de requisitos para diseñadores, desarrolladores y gerentes de proyectos
Extensión AX Google Chrome : verifique cualquier sitio para detectar violaciones de accesibilidad con el Inspector de Chrome
Contrast es una aplicación para Mac que proporciona acceso instantáneo a las proporciones de brillo de WGAG.