Usar guías de estilo para la accesibilidad

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.

Lecturas complementarias

• A11Y Style Guide
• Guía de Estilo para el Contenido de MailChimp: Escribir para la Accesibilidad (artículo en inglés)
• Guía de Estilo de edx/ux-pattern-library: Accesibilidad (artículo en inglés)