Diseño Inclusivo: Guía Completa para Sitios Web y Aplicaciones

Se dice que el 15% de la población mundial está afectada por alguna forma de discapacidad, de los cuales entre el 2 y el 4% con grandes dificultades funcionales según la OMS.

En Francia por ejemplo, esto representa no menos de 6 millones de personas. Decir que la accesibilidad es una cuestión social no es, por lo tanto, un eufemismo.

Sin embargo, un estudio reveló en 2016 que la mayoría de los sitios web de las empresas francesas tenían muy poco o nada en cuenta las realidades de los usuarios de Internet con discapacidades.

Ignorar las dificultades de accesibilidad de estas personas también significa dejar de lado todos los contextos de la vida en los que se ponen a prueba las capacidades de las personas sin discapacidad: responder a una llamada con un niño en brazos, utilizar servicios que requieren reconocimiento de voz con un sensor de voz, leer un mensaje a plena luz del día…

Aquí es precisamente donde entra el diseño inclusivo.

Su objetivo: tener en cuenta la pluralidad de perfiles y contextos de uso para poner la tecnología al servicio de todos.

 

¿Qué es el diseño inclusivo?

El diseño inclusivo (o diseño universal) es una metodología creativa basada en la consideración de la diversidad humana. 

Permite el desarrollo de productos y servicios digitales abiertos a todos y que no requieren adaptación por parte de los usuarios.

Ser inclusivo en tu diseño significa comprender cómo y por qué las diferentes categorías de población están excluidas de ciertas actividades básicas de la sociedad.

¿Cuál es la diferencia entre diseño inclusivo y accesibilidad?

La accesibilidad describe los sesgos que hacen que un sitio web, una aplicación o cualquier experiencia sea accesible al mayor número de personas.

También se refiere a la actividad profesional que resulta de ella.

La principal diferencia es que la accesibilidad es un atributo, una cualidad, mientras que el diseño inclusivo es un método, una forma de hacer las cosas.

Lo ideal sería que el diseño inclusivo y la accesibilidad funcionaran de la mano para ofrecer experiencias que no sólo cumplieran con las normas existentes, sino que sobre todo fueran utilizables por todos, independientemente del género, la edad, el origen, el nivel de educación, etc.

El espectro del usuario: Discapacidad – ¿de qué estamos hablando exactamente? 

La Ley de 11 de febrero de 2005 sobre la igualdad de derechos y oportunidades propone una definición precisa de la discapacidad como “la limitación de la actividad o la restricción de la participación en la sociedad que sufre una persona en su entorno debido a una alteración sustancial, duradera o definitiva de una o varias funciones físicas, sensoriales, mentales, cognitivas o psíquicas, una polidiscapacidad o un trastorno de salud discapacitante”.

Si bien esta definición proporciona una base interesante, vale la pena volver más precisamente a las diferentes formas que puede adoptar la discapacidad, dado el amplio alcance de la definición.

De hecho, no hay una discapacidad sino discapacidades. El Comité Nacional de Coordinación de la Acción sobre la Discapacidad (CCAH) enumera los diferentes tipos de discapacidad reconocidos hasta la fecha.

Conocerlos es absolutamente esencial para considerar adecuadamente la accesibilidad y el carácter inclusivo de una experiencia.

Discapacidad mental

La OMS define la discapacidad mental como “un cese del desarrollo mental o un desarrollo mental incompleto caracterizado por el deterioro de la capacidad y el nivel general de inteligencia, incluidas las funciones cognitivas, el lenguaje, las aptitudes motoras y el rendimiento social”.

Afecta al 1-3% de la población mundial. La trisomía 21 es la forma más conocida.

La discapacidad mental debe distinguirse de la discapacidad psicológica, que se produce con mayor frecuencia en la edad adulta. Este es el caso de la bipolaridad, la esquizofrenia y el TOC.

Discapacidad motriz

Se refiere a los trastornos que afectan a la totalidad o parte de las habilidades motoras y concierne a unos 1.296.900 españoles.

Se estima que una de cada dos personas que sufren de una discapacidad motriz requiere ayuda externa para las actividades cotidianas esenciales.

Discapacidad auditiva

La discapacidad auditiva se entiende como la pérdida parcial o total de la audición y afecta en torno a 790.000 personas en España.

Discapacidad visual

La discapacidad visual es la pérdida parcial o total de la vista. Aproximadamente 700.000 personas en España son discapacitados visuales.

El autismo y los trastornos generalizados del desarrollo (TGD)

Se estima que hoy en día en torno a 350.000 españoles están afectados por trastornos del espectro autista.

Estos trastornos son muy amplios y el diagnóstico es a veces muy complejo, lo que explica la falta de precisión en las estimaciones.

Sin embargo, la discapacidad también incluye lesiones en la cabeza, enfermedades degenerativas, trastornos dis, discapacidades múltiples y múltiples minusvalías. 

¿Por qué considerar las discapacidades en el diseño digital inclusivo?

Una obligación legal para los actores públicos

¿Sabías que los sitios web de los servicios públicos e institucionales europeos, pero también canadienses, por ejemplo, tenían la obligación legal de ser accesibles?

Así pues, en España la ley obliga a ciertos servicios de comunicación en línea a cumplir los requisitos legales de accesibilidad. Este es el caso, por ejemplo, de..:

• Entidades jurídicas de derecho público,
• Personas jurídicas de derecho privado delegadas con una misión de servicio público,
• Las personas jurídicas de derecho privado constituidas por una o varias de las personas mencionadas en los dos primeros puntos,
• Empresas con un volumen de negocios de al menos 250 millones de euros.

Por consiguiente, las entidades interesadas deben asegurarse de que su contenido sea :

• Perceptible: facilitar la lectura o la escucha del contenido (ejemplo clásico: el texto alternativo de una imagen),
• Utilizable: con una navegación clara, funciones accesibles con el teclado, visualización de información no cronometrada
• Robusto: compatible con las herramientas de apoyo.

Más allá de la accesibilidad digital

Utilizar las propias capacidades y sesgos para diseñar servicios, productos o experiencias significa excluir de facto a una parte de la población por motivos de género, edad, clase social, idioma, conocimientos tecnológicos o habilidades motoras.

Por lo tanto, existe una necesidad urgente no sólo de hacer de la web un espacio accesible para las personas con discapacidades, sino también, y de manera más general, para todas las personas que no se parecen a nosotros.

Si bien ya se ha escrito mucho sobre la sociología de los desarrolladores de América del Norte, la inclusión de la Web es uno de los principales desafíos de la era digital para el decenio.

Pensar en el diseño de forma inclusiva significa reconocer que hay discapacidades temporales que nos afectan a todos: cuando llevamos un yeso, cuando queremos pedir una comida en el extranjero o incluso hacer una llamada en un lugar ruidoso.

Un buen ejemplo de diseño inclusivo es la funcionalidad de video de la aplicación móvil de Facebook.

Estudiando el comportamiento de todos los usuarios, la empresa de Menlo Park descubrió que la aplicación se utilizaba principalmente en un contexto público (transporte público, sala de espera…).

Para resolver este problema de accesibilidad al sonido, Facebook ha optado por promover la reproducción sin sonido y con la activación por defecto de subtítulos para los videos en su aplicación.

Por qué el diseño inclusivo es esencial en 2020

Tim Berners-Lee soñaba con una red “al servicio de toda la humanidad”. Pero los principales actores digitales parecen haber tomado un camino completamente diferente…

Prueba de ello es que todavía es necesario recordar a la gente, treinta años después, por qué es importante la inclusión de los usuarios de Internet.

El diseño inclusivo nos concierne a todos

Pensar y crear de forma inclusiva puede parecer restrictivo, pero los frutos de este pensamiento no sólo benefician a las personas con discapacidades.

¿Sabías que la capacidad de aumentar el contraste de una pantalla proviene inicialmente de una necesidad de las personas con discapacidad visual?

De esta misma manera, los mandos, las puertas que se abren automáticamente o los audiolibros estaban destinados principalmente a ayudar a las personas con discapacidades en su vida cotidiana.

El diseño inclusivo es una verdadera oportunidad de negocio

Más de mil millones de personas en todo el mundo están afectadas por la discapacidad.

La incorporación de un diseño inclusivo en tu estrategia de UX sólo puede hacer que tus productos y servicios sean accesibles a un público más amplio y, por lo tanto, impactar en tu volumen de negocios.

Y estamos trabajando duro para asegurarnos de que tus clientes actuales no digan no a una interfaz más simple e intuitiva.

El diseño inclusivo estimula la creatividad

En teoría, el diseño de sitios web o aplicaciones con limitaciones puede parecer un reto complejo para los desarrolladores.

En la práctica, a menudo les lleva a ser más creativos y, en última instancia, a diseñar mejores productos.

¿Y cómo no mencionar las ganancias de rendimiento inherentes al diseño inclusivo con sitios web y aplicaciones más rápidas y claras? 

Mitos del diseño inclusivo

Nos pareció importante “desacreditar” dos ideas preconcebidas que resurgen tan pronto como hablamos de accesibilidad. 

La inclusión es cara

Si hacer accesible un sitio web representa un coste en un momento dado, suele ser generalmente modesto.

Mencionar los costes es también hacer caso omiso de las ganancias a largo plazo (ampliación de la base de clientes, aumento de la cuota de mercado, aumento de la notoriedad, etc.).

La inclusión es visualmente aburrida

Probablemente el concepto erróneo más común y el más alejado de la realidad.

De hecho, los diseñadores y desarrolladores de sitios web han tenido a su disposición, desde hace varios años, todas las herramientas tecnológicas para construir experiencias que sean a la vez accesibles y atractivas.

El ejemplo más emblemático es probablemente el del sitio de una pequeña empresa en Cupertino a la que prometemos un futuro brillante.

Los 5 pasos principales del diseño inclusivo

Si has llegado hasta aquí, es porque tienes la voluntad de mover las líneas.

Para simplificar tu tarea de hoy y para tus proyectos futuros, hemos aquí una regla a tener en cuenta: desarrollar siempre tus productos partiendo de lo particular a lo general. ¡Siempre!

Demasiados sitios o aplicaciones populares siguen siendo inaccesibles para los discapacitados visuales o las personas que no pueden utilizar las funciones táctiles o del ratón.

Por eso es una buena práctica asegurarse de que tu proyecto funciona perfectamente con el teclado primero. 

Hay muchas maneras de optimizar un sitio para hacerlo más inclusivo. El Ministerio del Interior Digital del Reino Unido ha desarrollado pósters sobre este tema, por perfil o tipo de discapacidad, que están disponibles de forma gratuita para ayudarte a optimizar tu sitio de esta manera.

Ahora que dominas la noción de diseño inclusivo, veamos cómo diseñar un sitio que sea utilizable y seguro para todos en cinco pasos clave. 

Un diseño fácil de usar

El diseño es probablemente la palanca más obvia y más comúnmente utilizada para (intentar) hacer accesible un sitio web o aplicación.

Así que volvamos a lo básico de la estructura, los colores y las formas: 

• La arquitectura: la web debe ser estructurada lógicamente según los principios de HTML5 semántico. Recuerda que la jerarquía de texto que utiliza etiquetas en particular debe permitir que una persona que lea sólo los títulos entienda el contenido de la página,
• Espacios: Proporcionar un espacio suficiente entre los diferentes elementos sobre los que se puede hacer clic, por ejemplo, reduce el riesgo de una falsa manipulación. Y esto se aplica tanto a una persona con la enfermedad de Parkinson como cuando se navega con un teléfono móvil,
• Contrastes: esto puede parecer obvio, pero no pongas texto gris claro sobre un fondo blanco y, en general, juega con los contrastes de manera razonada. No quieres que tu sitio sea ilegible para tus visitantes,
• Colores: ten cuidado de no utilizar colores similares juntos o colores que son difíciles de diferenciar para las personas con daltonismo. Además, no intentes transmitir demasiado significado a través de los colores,
• Fuentes: usa fuentes clásicas y legibles. Para resolver la cuestión del tamaño, ofrece a tus usuarios la posibilidad de configurarlo ellos mismos,
• Ser asequible: ya hablamos de esto en nuestro post anterior sobre CTA. La asequibilidad, o “la capacidad de un objeto para sugerir su propio uso“, es esencial para evitar la vacilación y la frustración. Haz que los elementos interactivos se vean…. interactivos.

Formas optimizadas para un diseño inclusivo

Podríamos haber elegido integrar las formas en la primera etapa, pero su configuración sigue siendo tan defectuosa que podría ser objeto de un artículo completo.

Más allá del tamaño mínimo que debe observarse para los campos y la autocompletación que debe aplicarse, la información recogida en los formularios debe ser cuestionada.

Esto es aún más cierto cuando se desea obtener información sensible como el nombre, el sexo, el número de teléfono o la edad.

En esta etapa, la responsabilidad del Diseñador de UX es decidir sobre la legitimidad de las preguntas formuladas, cómo deben hacerse y qué propuestas pueden seleccionar los usuarios para responder.

El ejemplo del género habla por sí mismo. Cuando quieras esta información, ¿quieres saber el sexo o el género de la persona? ¿O tal vez incluso algo más? 

Contenido inclusivo

¿Habrías llegado hasta aquí si este artículo fuera un bloque sin ilustraciones? 

Ya hemos tenido la oportunidad de hablar sobre la escritura UX en profundidad, pero aquí hay algunas buenas prácticas esenciales de cualquier contenido inclusivo: 

• Disposición: debe ser aireada y tener en cuenta las normas de diseño. Así se evitará el uso excesivo de la cursiva y el subrayado, que suele referirse a los hipervínculos. Por otro lado, no dudes en abusar de las listas numeradas y con viñetas,
• Textos alternativos para las imágenes: también conocidos como atributos ALT, permiten describir una imagen por el texto. Este texto es particularmente útil para las personas que utilizan indicaciones de voz o cuando cargan imágenes pesadas con una conexión limitada,
• Lenguaje: Hacer que la información sea accesible a todos también significa usar palabras simples en frases cortas. Complejos giros de frase te separan de las personas que no dominan tu lenguaje o que tienen discapacidades cognitivas.

Los medios de comunicación para ilustrar

Ya sea en video o en podcast, los medios de comunicación son excelentes medios de comunicación e ilustración.

Sin embargo, no te diremos nada nuevo diciéndote que su formato los hace, en esencia, exclusivos para una parte de la población.

Pero hay formas de superar estas barreras: 

• Subtítulos: proporcionar subtítulos para tus videos es la base de la accesibilidad de este medio. Al mismo tiempo, estarás haciendo un servicio a millones de usuarios de móviles,
• Transcripciones: ¿una o más de tus páginas web albergan videos o podcasts? Piensa en ofrecer una transcripción para permitir a los discapacitados visuales, auditivos o simplemente a los que no tienen una red, poder consultar tu contenido. ¡Y es bueno para la referencia!

Ya que estamos hablando de audio, enfoquémonos por un momento en los asistentes de voz.

¿Has notado que ofrecen una voz femenina por defecto en la mayoría de los idiomas?

Por supuesto que no es una coincidencia. Vivimos en una sociedad en la que las mujeres son percibidas como asistentes más dóciles, atractivas y reconfortantes que los hombres.

La cultura y las ideas preconcebidas tienen un impacto en UX. Y aunque es difícil deshacerse de ellos por completo, es responsabilidad de los diseñadores de UX elegir si contribuyen o no a los estereotipos.

Navegación perfecta

La quinta y última etapa es también una de las más cruciales, ya que involucra la navegación.

Tu sitio puede tener el diseño más moderno y creativo, pero algunos de tus esfuerzos serán desperdiciados si los usuarios no pueden usarlo. 

Nuestros consejos para una navegación diseñada para todos: 

• El teclado: Como se mencionó anteriormente, asegúrate de que tu sitio sea completamente navegable por el teclado lo antes posible,
• Voz: De igual manera, tu sitio debe ser accesible a las personas que sólo usan la voz. Esto le dará una ventaja a la experiencia del usuario de móvil,
• Opciones de contacto: por supuesto, no ofrezcas el teléfono como un medio de contacto, ya que corres el riesgo de aislarte de las personas que son mudas, sufren de pérdida de voz o no hablan tu idioma,
• Puntos de referencia: siempre deja que tus usuarios sepan lo que tienen que hacer en caso de una compra, un formulario, una prueba…
• Los enlaces: forman la base de la navegación en la web y como tal deben ser comprensibles. Evita frases sin sentido como “Clic aquí” y utiliza anclas de enlace claras y concisas.

Pensar de forma inclusiva significa sobre todo cambiar radicalmente nuestra percepción del mundo que nos rodea y poner a prueba nuestras creencias.

Pero si todavía nos estás leyendo, probablemente ya has hecho la parte difícil.

Y como nuestros amigos de habla inglesa dicen tan bien: “it’s the right thing to do”. 😉