Guía definitiva sobre accesibilidad para diseñadoras y diseñadores (Nivel A)
Aprendé todo lo que necesitas saber como diseñadora o diseñador para hacer interfaces más accesibles teniendo en cuenta el Nivel A de la WCAG 2.2
Esta guía es una introducción a la accesibilidad que sirve para agrupar y redirigir a distintos artículos que hablan en profundidad sobre los criterios de cumplimiento de la WCAG 2.2 con Nivel A. Si no tenes idea de accesibilidad te invito a que leas el artículo completo. Si ya sabes qué es, por qué es importante y por qué empiezo por el “Nivel A”, dirigite casi al final donde tenes la lista para diseño. Ahí podrás leer en profundidad cada pauta y también agrupadas según temas que considero que podemos aplicar juntos.
Si encontrás el artículo de utilidad, compartilo a todos tus contactos que esten diseñando para el mundo digital.
¿Qué es la accesibilidad?
Si estás hace un tiempo en el mundo de la tecnología, ya debes haber escuchado este término. Si no, lo vamos a resumir en 3 puntos, como lo encontrarán en el libro Jusk Ask.
- La accesibilidad significa, básicamente, que las personas con discapacidad puedan utilizar un producto.
- Para ser más precisos, la accesibilidad es hacer que los interfaces sean perceptibles, operables y comprensibles para personas con distintos tipos de discapacidades.
- La accesibilidad también hace los productos más usables para personas que se encuentran en gran variedad de situaciones, circunstancias, entornos y condiciones.
¿Por qué es importante?
Por obvias razones, es lo correcto. Si no hacemos nuestro sitio web accesible estamos discriminando al 15 % de la población mundial. Según informes de la OMS (Organización Mundial de la Salud) 1.000 millones de personas.
Soy diseñadora porque quiero “solucionar problemas”, los problemas importantes de las personas, de todas las personas, no solo para el hombre blanco de edad madura con poder adquisitivo.
Por razones legales, existen en muchos paises leyes que protegen a las personas con discapacidad de esa discriminación. En Argentina y en España existen leyes que multan a las empresas que tienen la obligación y que no cumplen con el mínimo de accesibilidad.
En Argentina, la ley Ley 26.653 establece quién tiene que tener un sitio web accesible:
- El Poder Ejecutivo del Estado Nacional.
- El Poder Legislativo Nacional.
- El Poder Judicial Nacional.
- Los organismos descentralizados y autárquicos del Estado Nacional.
- Los entes públicos no estatales.
- Las empresas del Estado Nacional.
- Las empresas privadas que tienen la concesión de algún servicio público.
- Las empresas privadas que prestan servicios públicos.
- Las empresas contratistas de bienes y servicios.
- Las instituciones u organizaciones de la sociedad civil que reciben subsidios o donaciones del Estado Nacional.
- Las instituciones u organizaciones de la sociedad civil que contratan servicios con el Estado Nacional.
Es importante que entendamos que la accesibilidad beneficia también a la empresa en términos monetarios, nos permite ganar plata por un lado y no perderla por el otro.
Ganar plata: es uno de los grupos de mercado más grande, 1.000 millones de posibles nuevos clientes.
Perder plata: si no cumplis las leyes te pueden multar. Las multas incluso llegan a escalar a miles de dolares por cada día que tu sitio no es accesible.
¿A tu empesa le interesa el marketing y verse mejor?
Aunque eso no debería ser lo que te motive a agregar accesibilidad, tenelo en cuenta, porque no todos quieren el bien común como vos (hay gente que solo quiere ver el mundo arder). A lo mejor solo quieren verse bien, pero si esto nos ayuda a poner en la agenda la accesibilidad es bueno aprovecharlo. Hay personas que prestan mucha atención a la RSE (Resposabilidad Social Empresaria) ya que ayuda a muchas empresas a posicionarse mejor con los consumidores dentro de su industria y frente a sus competidores.
Otra buena herramienta cuando hacemos accesibilidad, es hablarle a la empresa de SEO (posicionamiento en buscadores), porque si su sitio web es accesible seguramente ranquee mejor en google y otros buscadores.
Si te parecen razones suficientes entonces empecemos con la guía para diseñadores para hacerlo posible, aunque primero te cuento lo básico.
De lo básico a lo complejo
Existe un grupo dentro de la W3C (World Wide Web Consortium) encargado de velar por la accesibilidad llamado WAI (Web Accessibility Initiative o Iniciativa para la Accesibilidad Web).
La WAI creó las WACG (Web Accessibility Content Guideline o guías de contenido accesible web),directrices de accesibilidad que nos permiten generar diseño accesible o universal.
Las WCAG son las guías que vamos a considerar al momento de diseñar. Si bien tenemos que pensar en la accesibilidad como un mindset, cuando empezamos a involucrarnos en el tema podemos llegar a abrumarnos por la cantidad de contenido, entonces nos va a ser de ayuda tener bases que permitan entender de manera amplia consideraciones de cómo diseñar, redactar y programar los sitios y apps.
Desde el 5 de octubre de 2023 que actualizo este articulo WCAG 2.2 es la última versión oficial, El documento esta construido de manera que se destacan4 principios: Perceptible, Operable, Comprensible y Robusto.
- Perceptible: deben ser mostrados a los usuarios en formas que ellos puedan interpretar o percibir. Ejemplo: si alguien es sordo no usar el sonido, usar una alternativa visual como subtitulos. Si alguien es ciego transcribir la descripción de una imagen.
- Operable: debe ser manejable, es decir tengo que poder interactuar con el sitio. Ejemplo: si la persona no tiene motricidad para usar el mouse, el sitio tiene que poder navegarse con el teclado o con la voz.
- Comprensible: la información y las acciones que tienen que hacer el usuarios deben ser entendibles por los mismos. Ejemplo: no usar un lenguaje técnico para usuarios con discapacidades de aprendizaje, y en general usar lenguaje claro y conciso.
- Robusto: está mas relacionado a la tecnología. Se basa en la capacidad del sitio web de ser trasmitido e interpretado por los diferentes navegadores y ser compatibles con tecnologías asistívas y de apoyo.
Dentro de esos 4 principios se distribuyen 13 pautas. Estas pautas nos guían sobre cómo pensar respecto a la accesibilidad y su aplicación en diferentes contextos, pero no de manera explícita.
Después cada pauta tiene criterios. En la WCAG 2.1 había 78 criterios en la actual WCAG 2.2 se agregaron 9 criterios y se quito 1 es decir que en la actualidad tenemos 86 criterios.
Estos criterios si son testeables y podemos decir si se cumplen o no, además de que nos ayudan a entender los contextos para pensar en concreto como resolver la accesibilidad.
¿Por qué empiezo por el Nivel A?
Porque no hace falta que cumplamos todos los criterios de una sola vez para ser accesibles, debido a que existen distintos niveles de accesibilidad.
Los niveles son A, AA y AAA:
- A tiene 31 criterios que es necesario que cumplamos para poder aplicar al primer nivel de conformidad.
- AA tiene 24 criterios, pero para aplicarlos necesitamos cumplir estos y los primero del nivel A.
- AAA tiene 31 criterios, sumado al cumplimiento de los niveles anteriores.
Es importante resaltar que cumplir esos criterios no es un trabajo solo del diseñador, sino que es un trabajo de todo el equipo que desarrolle un producto.
Respetar estos criterios no nos va a dar la universalidad absoluta, pero si va a darnos un panorama para que repensemos nuestras interfaces para más personas con y sin discapacidad en más contextos y situaciones.
El nivel A es el primero al que tenemos que aspirar para cumplir con la ley (en Argentina por ejemplo), pero también son básicos que deberíamos ya estar haciendo realmente en pos de nuestros usuarios y la usabilidad de nuestras plataformas, apps y sitios.
A lo largo de los artículos me comprometo a contarte cada uno de estos criterios de Nivel A que corresponden al diseño.
La lista de los criterios del nivel A (solo para diseño)
Soy diseñadora y este artículo se enfoca en diseño. La siguiente lista esta contemplada en relación a los criterios dento del nivel A que debemos cumplir para hacer nuestras interfaces accesibles.
Si bien existen 34 criterios que cumplir para alcanzar el primer nivel, en los próximos artículos a solo considero los que son responsabilidad de los equipos de diseño y que tienen que ser planeados desde el principio.
A continuación, mis artículos sobre lo que deberias estar cumpliendo para llegar al nivel A:
Colores accesibles (Nivel A) y Daltonismo
Dejá de usar el color para transmitir información. Pauta: 1.4.1 Uso del color. Te cuento cómo diseñar considerando personas con daltonismo.
Alt Text la guía definitiva
Una imagen dice más que mil palabras, pero sin Alt text la imagen no dice nada. Pauta: 1.1.1 Contenido no textual. Te cuento cómo usar Alt text, cuándo sí, cuándo no y por qué.
Videos y audio: Cómo hacerlo de manera accesible
Pautas: 1.2.2 Subtítulos (pregrabados), 1.2.3 Descripción de audio o medios alternativos (pregrabados).
Cómo diseñar para personas fotosensibles y con epilepsia
Pauta: 2.3.1 A Umbral de tres destellos o menos. Te cuento cómo diseñar para no causar mareos ni episodios de epilepsia.
Ux Writing y accesibilidad
Pautas: 1.1.1 Contenido no textual, 2.4.2 Pagina titulada, 2.4.4 Proposito del enlace, 2.5.3 etiqueta en nombre, 3.3.2 Etiquetas o instrucciones, 3.3.1 Error de identificacion
Diseñando experiencias para Navegación por comando de voz
Primera parte Como se usan los comando por voz
Diseñando experiencia para usuarios de teclado
Pautas 2.1.1 Teclado, 2.1.2 Sin trampas de teclado y 2.1.4 Shorcuts de teclas de caracteres y pautas relacionadas al foco 2.4.3 Orden de enfoque y 2.4.7 Foco visible. 2.4.1 Ignorar bloques. Te cuento como diseñar mejor botones de como saltar el contenido y por que es importante.Te cuento que hay que considerar diseñando experiencias en teclado.
Diseñando experiencia para usuarios de lector de pantalla
Pautas: 1.3.1 Información y relaciones, 1.3.2 Secuencia Significativa, 1.3.3 Características sensoriales y 1.4.2 Control de audio. 4.1.2 Nombre, rol y valor. Te cuento que son los lectores de pantalla, como los usan las personas y que tener en cuenta al momento de diseñar para ellos.
Diseñando experiencia para usuarios con baja visión
Pautas: 1.4.4: Cambiar el tamaño del texto (Nivel AA), 1.4.10: Redimensión (Nivel AA) 1.4.12:Espaciado de texto (Nivel AA) y 1.4.5:Imágenes de Texto (Nivel AA)
Combinaciones de colores accessibles
Putas 1.4.3:Contraste (Mínimo) (Nivel AA) y 1.4.11:Contraste sin texto (Nivel AA)
Diseñando gestos complejos
Pautas 2.5.1. Gestos de puntero, 2.5.2 Cancelacion de puntero 2.5.4 Actuacion de movimiento. ¿Qué es un gesto complejo y como lo hacemos accesible?
Sobre animaciones y elementos con movimiento
Pautas: 2.2.2 Pausar, detener u ocultar. Te cuento como diseñar para contenido en movimiento y carruseles que puedan ser usados por todos.
Dar a cada usuario el tiempo suficiente
Pautas: 2.2.1 Sincronizacion ajustable
Cómo crear ayudas y páginas de preguntas frecuentes más accesibles.
Pauta: 3.2.6 Encontrar ayuda (Nuevo para la WCAG 2.2) Te cuento como diseñar mejores páginas de ayuda.
Además de esto hay muchos otros criterios en el Nivel A que quedan por evaluar, descubrelos conmigo.
Conclusión
Espero que estos artículos sean de ayuda para vos y todo tu equipo de diseño. Si te gustó compartilo para que seamos cada vez más los que hagamos interfaces para todas las personas.
Si querés saber más de accesibilidad podes sumarte a la comunidad de Desarrollo Accesible Latinoamericano
Fundación Dalat en instagram @fundaciondalat
