Usar Guías de Estilo para la Accesibilidad

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Empecemos planteando algunas preguntas.

¿Qué es una Guía de Estilo?

Una guía de estilo es un documento de diseño que se puede usar para establecer un conjunto de estándares cuando reunimos todos los elementos o interfaces de usuario para un negocio—básicamente cualquier producto o artículo producido para el negocio.

¿Quién Usa las Guías de Estilo?

Una guía de estilo podría ser creada para un desarrollador, de manera que conozca las especificaciones de lo que va a construir, o para que un diseñador entienda las consideraciones relativas al diseño y su visión de conjunto. También se podría usar de forma más amplia dentro de una organización para proporcionar una pauta y claridad a la hora de crear nuevos documentos.

¿Qué es la Accesibilidad?

La accesibilidad consiste en asegurarte de que tus diseños siguen unos estándares y que son accesibles para una amplia diversidad de personas, por ejemplo para aquellos con discapacidades físicas o cognitivas.

¿Por qué Usar una Guía de Estilo para la Accesibilidad?

Una guía de estilo es una excelente forma de reforzar la consistencia en nuestros diseños. Te asegura una base sólida con la que trabajar. Cuando hablamos sobre guías de estilo normalmente pensamos en la integridad de los logotipos, la tipografía, el color. Pero, ¿qué pasa con la accesibilidad? Considera las siguientes situaciones en las que usar una guía de estilo:

1. Establecer la Dirección

Una guía de estilo nos proporciona una dirección. Por ejemplo, en lugar de tener crear un mockup preciso a nivel de píxeles cada vez que diseñas un formulario, un desarrollador podría preferir usar como referencia una guía de accesibilidad para decidir cómo construirlo. Cuando crees pautas de accesibilidad podrías incluir instrucciones sobre qué tipos de controles de formulario usar y cuando.

2. SEO

El SEO es otro motivo por el que los diseñadores necesitan tener en cuenta la accesibilidad. Por ejemplo, colocar texto dentro en una imagen significa que los lectores de pantalla no serán capaces de acceder él y Google penalizará tu sitio web por haber creado un código pobre o deficiente para tu contenido. Hacer que tu web sea accesible tiene el beneficio positivo extra de ayudar al SEO.

3. Experiencia de Usuario

La accesibilidad es una parte importante de la experiencia de usuario (UX); después de todo, no todo el mundo usará o experimentará un producto de la misma manera. Contrastar los colores podría dirigir intencionadamente a un usuario en una cierta dirección, pero a alguien que no sea capaz de distinguir el contraste de esos colores, la experiencia podría resultarle poco intuitiva. Anticipar los impedimentos de usabilidad y planificar teniéndolos en cuenta en una guía de estilo de accesibilidad es una buena práctica.

4. Mantenimiento

El mantenimiento es un excelente ejemplo de cuándo y por qué deberías usar una guía de estilo para la accesibilidad. Podrías estar trabajando bajo un contrato por proyecto o servicio y quieres dejar las cosas documentadas para cuando un nuevo contratista o agencia retome el proyecto donde tú lo dejaste dejado tenga una guía a la que recurrir. Proporciona a los trabajadores que continuarán desarrollando el producto después de ti alguna visión desde la perspectiva de la accesibilidad.

Empieza Con lo Básico

Formularios

Los formularios tienen una serie de heurísticas o reglas generales relacionadas con la accesibilidad. La manera en la que se construye un formulario es muy importante. ¿Cuándo fue la última vez que incluiste un elemento <legend> con un <fieldset>? Detalles de código como este son de mucha ayuda para las tecnologías de asistencia.

Desde una perspectiva visual, podrías tener en consideración la proximidad de las etiquetas a los campos de entrada de los formularios. Otro ejemplo podría ser la alineación y cómo se van a mostrar en los dispositivos móviles.

Área de Contacto

El tamaño del área de contacto es muy importante. En dispositivos móviles y tablets el usuario debería disponer de una cantidad óptima de espacio como para poder seleccionar un elemento botón. Si el área del botón es demasiado pequeña e impracticable. probablemente pensarán que el sistema tiene un retardo o incluso ¡que el enlace no funciona! Idealmente deberías establecer un área de contacto de alrededor de 44 puntos tanto de altura como de anchura, de manera que puedan pulsar cómodamente con un dedo.

Contraste de Color

¿Existe suficiente contraste de color entre los elementos de tu página? ¿Es legible el texto situado sobre las fotos? Es importante tener esto en consideración ya que mucha gente sufre de visión deficiente, o algún tipo de ceguera al color (daltonismo, etc.).

Tamaño del Texto

El texto excesivamente pequeño es otro problema habitual, especialmente para las personas de cierta edad. Los desarrolladores necesitan crear estilos UI flexibles, de manera que los usuarios que tengan problemas al leer texto puedan aumentarlo y reducirlo a su gusto. Si estás diseñando una app querrás crear un diseño que se adapte a la pantalla del dispositivo. Los usuarios deberían evitar cualquier tipo de controles en los que el usuario necesite aumentar o realizar desplazamientos en sentido horizontal.

Es más, el tamaño del texto debería tener como mínimo 11 puntos para que sea legible. Idealmente querrás evitar que el usuario medio tenga que aumentar o reducir el contenido.

Degradación Elegante

La degradación elegante hace referencia a la eficacia con la que funciona tu producto cuando alguien tiene una conexión lenta, diferentes tamaños de pantalla, diferentes resoluciones, un navegador distinto, e incluso restricciones en su navegador. Ser consciente de estas restricciones y limitaciones puede ayudar a que tu organización determine si las audiencias todavía serán capaces de acceder a tu contenido a pesar de cualquiera de estas limitaciones. La mayoría de los fallos no son sorpresas imprevisibles. Son eventos que puedes anticipar, en lugar de concebirlos como accidentes impredecibles que deseas hacer desaparecer.

Haz Que Sea Relevante

Si estás realizando una evaluación de usabilidad deberías usar lo que hayas observado; la detección de problemas de usabilidad en tu sistema te pueden ayudar a perfilar las reglas de usabilidad para tu guía de estilo. Por ejemplo, si has estado realizando pruebas para medir, por ejemplo, errores críticos y descubres que se están dando debido al contraste de color, al tamaño de las áreas de contacto o cualquier otro problema de accesibilidad, inclúyelo en tu guía de estilo de accesibilidad. Los elementos altamente relevantes posiblemente darán a tu documento más credibilidad y será más vendible a tus stakeholders.

Conclusión y Notas Adicionales

Las guías de estilo son bastante habituales. Sin embargo, las de accesibilidad no lo son tanto, pero no deberían obviarse. De hecho, pueden ser muy necesarias en algunos casos. Y también son beneficiosas desde el punto de vista de la experiencia de usuario en general. El contraste de color, el tamaño del área de contacto y la forma de los elementos son aspectos potencialmente problemáticos si no se ejecutan adecuadamente.

Piensa primero en los aspectos esenciales. Incluye sólo la información relevante en tu guía de estilo de accesibilidad.
No asumas nada como obvio o de sentido común. Ten en cuenta que das por sentados todos los conocimientos que has ido acumulando a lo largo de los años. No temas señalar las cosas que des por garantizadas o te parezcan evidentes.
La forma sigue a la función. Si tu guía de estilo de diseño choca con tu guía de estilo de accesibilidad, podría ser el momento de volver e intentar alinear ambas (fíjate en el ejemplo referente al contraste de color de arriba).
Empieza con problemas que ya hayas identificado en tus evaluaciones heurísticas. ¿Cuáles son los problemas de usabilidad con los que te has topado? Fíjate en especial en la frecuencia con la que ocurren y en aquellos considerados como más graves.