Internet se ha convertido en el gran centro de información y entretenimiento para todo el mundo. Además, cada vez es más frecuente que podamos realizar de forma online todo tipo de compras y trámites administrativos. Esto ha permito facilitar la vida en muchos sentidos a personas con algún tipo de discapacidad, ya que si antes tenían que desplazarse de forma física a algún lugar, ahora lo pueden hacer desde su propia casa. El problema llega cuando la web donde buscan información, quieren entretenerse, comprar o realizar un trámite, no son verdaderamente accesibles para ellos. Es decir, les hemos llevado todas las herramientas necesarias a la palma de sus manos, y hemos fallado justo en el último paso. Por eso es tan importante la accesibilidad web, y pensar en ella no como un proceso posterior al diseño, sino como una parte íntimamente relacionada con el propio proceso creativo.
Y este es uno de los puntos en los que queremos insistir, ya que no es extraño el caso en el que nos encontramos con un diseño web prácticamente cerrado y al que nos piden hacerlo accesible. Si, mejor hacer esto que nada, pero lo ideal es que vayamos realizando ambos fases en paralelo y que, al igual que cuando diseñamos sabemos que colores combinan, o que tamaño de texto es más efectivo, también debemos pensar en la accesibilidad.
En este texto queremos daros unas pinceladas básicas a tener en cuenta para intentar hacer una web más accesible, y que algunos temas fundamentales podemos abordar. Pero antes de hablar de eso, queremos hacernos una pregunta importante.
¿A qué nos referimos cuando hablamos de discapacidad?
Cuando hablamos de discapacidad, podemos agruparlas en varios tipos:
- Visual – tanto la ceguera como la discapacidad visual parcial.
- Auditiva – ya sea la perdida de la audición total o parcial
- Motora – nos referimos a la limitación o dificultad para realizar movimientos.
- Cognitiva – limitación tanto en el funcionamiento intelectual como para desarrollar habilidades conceptuales o sociales.
Pero aparte, también las podemos dividir en tres grandes grupos: discapacidad permanente, temporal o condicional. Cuando hablamos de temporal nos referimos, por ejemplo, a una persona que sufre la rotura de un brazo, o una perdida temporal de visión. Y condicional, cuando el acceso a la web se ve limitado por condiciones externas, ya sea porque estemos en un entorno muy ruidoso, o porque es una persona mayor sin habilidades o conocimientos tecnológicos avanzados.
Como vemos, el grupo de personas que se ve beneficiadas por tener una web accesible es bastante mayor del que podíamos pensar en un principio. Si no creamos una web pensando en todos ellos, prácticamente los estamos apartando y discriminando, y la idea de un internet universal y para todos empieza a desmoronarse.
Una vez hemos dejado claro esto, vamos a ver por donde podemos empezar para crear una web accesible para todos.
Consejos para mejorar la accesibilidad en tus diseños web
Como hemos dicho al principio, aquí solo vamos a dar unos pequeños consejos básicos con los que podemos empezar, para no abrumar a todos los que estéis interesados en la accesibilidad web. Si queréis ir más allá, siempre podéis acceder a la Web Accessibility Iniative, donde encontraréis noticias y recursos de todo tipo. Y en un SiloMag comentamos una web muy curiosa donde nos ofrecían una checklist donde podíamos ir marcando distintos objetivos de accesibilidad.
Pero antes de irnos a asuntos más avanzados, empecemos poco a poco con estos consejos.
Navegación con teclado
Al menos en escritorio, y quitando el momento de tener que introducir cualquier texto, la navegación por la web la realizamos mediante el ratón. Hacer clic en un enlaces, hacer scroll, etc, se han convertido en algo habitual. Pero no todo el mundo puede utilizar un ratón con facilidad, ya sea por algún tipo de discapacidad motora o porque nunca han usado uno.
Por eso es muy recomendable que podamos navegar por nuestra web de forma sencilla haciendo un uso exclusivo del teclado. El botón TAB para movernos por los elementos importantes, y las flechas direccionales para poder hacer scroll. tan sencillo como eso.
No olvides el atributo alt en tus imágenes
EL atributo alt en las imágenes suele ser uno de los grandes olvidados, cuando no se utiliza de forma incorrecta. Es habitual que las personas con discapacidades visuales usen lectores de pantalla que pasen los textos escritos a voz. Pero, ¿qué ocurre con las imágenes? Ahí es donde entra el atributo alt, ya que es donde debemos escribir una descripción veraz de lo que muestra dicha imagen, para que cuando la traduzca el lector de pantalla, el oyente pueda saber de que se trata.
Además, en zonas donde la conexión a internet no es estable, si en algún momento no se cargan las imágenes aparecerá en su lugar el texto que hayamos insertado en el atributo alt. Por lo que, a pesar de que no se pueda ver, seguiremos teniendo ese pedazo de información de forma escrita.
Tamaño del texto en unidades rem
Es muy habitual en diseño web el uso de píxeles a la hora de definir el tamaño de una tipografía. Pero es una costumbre de la que deberíamos deshacernos a favor del uso de unidades rem. Normalmente, los navegadores web tienen definido que 1rem es igual a 16px. Es habitual para las personas con discapacidad visual el aumentar el tamaño de la fuente tipográfica desde los propios ajustes del navegador, así todos los textos aparecen a un tamaño mayor.
Pero esto solo se produce si el diseñador ha designado los tamaños textos en rem. Si lo ha hecho en px, por mucho que se haya modificado la fuente desde el navegador, aparecerá en su tamaño nativo, haciendo que tenga que usar el zoom para ajustarlo a sus necesidades. Un proceso que a veces es bastante engorrroso y que no siempre da buenos resultados.
Mantén una estructura lógica en tu headings
Cuando escribimos HTML, debemos tener muy claro para que sirven los headings. Estos elementos nos ayudan estructurar el contenido de una página, y definir de forma clara de que vamos a tratar en la sección que la precede. Nunca hay que utilizar los headings por su tamaño o porque nos encajan por diseño.
Es básico saber que solo hay que usar un H1 por página y que si, por ejemplo, introducimos un H2, no hay que insertar dentro de él un H4, sino un H3.
Uso correcto del color y el contraste
En SiloCreativo hemos hablado de la importancia del contraste a nivel de diseño, pero también tiene un gran valor si hablamos de accesibilidad. Seguro que os habéis encontrado alguna web con texto color gris claro sobre un fondo blanco que era poco legible. Imaginaos como debe ser para alguien con una discapacidad visual.
Sobre el color, en su día hablamos sobre accesibilidad y los diferentes tipos de defectos de la visión cromática (o más comúnmente llamado daltonismo) como la protanomia, deuteranopia y tritanopia, y como estas personas perciben los colores de forma diferente.
Crea formularios accesibles
Esto es tan sencillo como añadir siempre etiquetas en nuestros formularios, y no tener miedo a agregar explicaciones para dejar claro cual es la información que queremos que se introduzca en cada campo. Además, que cualquier mensaje de error que tengamos, se señale tanto de forma escrita como con un código de color visible, y a ser posible que este aviso aparezca junto al campo erróneo.
También es recomendable no crear formularios largos y complejos que pueden dar lugar a confusión o a que se nos olvide por rellenar algún campo. Para ellos, podemos hacer formularios multipáginas, que vamos rellenando en diferentes pasos, y avisando de los posibles errores en cada uno de ellos.
Añade subtítulos a tus vídeos
Esto puede parecer muy específico, pero para cualquier persona con discapacidad auditiva, o incluso alguien que se encuentre en un entorno donde no sea posible encender los altavoces, es esencial. Plataformas como YouTube incluso permiten que se añadan subtítulos automáticos, pero es bastante común que contengan errores que provoquen confusiones. Por eso siempre es recomendable crear nuestros propios subtítulos.
Tener subtítulos también provoca que sea más sencillo traducirlos a otros idiomas, por lo que, si tenemos un video en castellanos, no nos limitaremos a espectadores hispanohablantes.
Conclusiones
La accesibilidad web es importante tanto desde un punto de vista empresarial como social. Hacer que tu web sea accesible y navegable de forma sencilla para todo tipo de personas hace no solo que tu zona de influencia sea mayor, sino que estas dando una igualdad de oportunidades a todo el mundo, sea cual sea su situación.
Como diseñadores, el tema de la accesibilidad web no nos debería suponer un esfuerzo extra o un paso posterior que damos tras finalizar un proyecto. La accesibilidad web debe formar parte de nuestro flujo de trabajo y nuestro proceso creativo, y aunque al principio pueda parecer complicado o que nos saca demasiado de nuestra zona de confort, al final simplemente es un elemento más en nuestra serie de objetivos cuando estemos diseñando.
Y con esto terminamos. Esperamos que os haya resultado interesante y como siempre, nos podéis hacer llegar vuestras dudas y experiencias sobre accesibilidad web a través de los comentarios.
