Podcast - Creación de diseños accesibles en Figma.

Figma se ha consolidado como una herramienta esencial en el diseño web, particularmente en lo que respecta a la accesibilidad. En este episodio vemos las funcionalidades que hacen de Figma una plataforma poderosa para crear interfaces inclusivas y accesibles, al tiempo que fomentan la colaboración y la eficiencia en los equipos de diseño.

¿Por qué Figma es tan popular?

Figma se describe como el "Spotify del diseño digital", gracias a su enfoque basado en la nube. Esto permite a los equipos de diseño trabajar desde cualquier dispositivo con acceso a Internet, facilitando la colaboración en tiempo real sin la necesidad de compartir archivos pesados. Algunas de las características clave que incluye son:

• Trabajo colaborativo: múltiples personas pueden realizar ajustes simultáneamente.
• Multiplataforma: permite acceder y modificar proyectos desde cualquier lugar.
• Prototipos interactivos: facilitan la simulación de experiencias cercanas al producto final.
• Integraciones y plugins: ofrece herramientas como Stark y Contrast, que verifican el contraste de colores, y Able, que optimiza la usabilidad para personas con discapacidades.
• Versión gratuita robusta: apta para estudiantes, freelancers y pequeños equipos.

Accesibilidad y diseño inclusivo

Un diseño de interfaz accesible significa que cualquier persona, independientemente de sus capacidades físicas o cognitivas, puede utilizar ese diseño. Figma se posiciona como una herramienta líder en este aspecto, gracias a funcionalidades específicas como:

• Plugins especializados: ayudan a garantizar que los diseños cumplan con las directrices WCAG (Web Content Accessibility Guidelines). Stark, que verifica contraste y simula discapacidades visuales, y Typescale, que asegura escalas tipográficas coherentes, son algunos ejemplos.
• Sistemas de diseño escalables: la consistencia en patrones y componentes facilita la navegación para usuarios con discapacidades.
• Rejillas y guías: mantienen el contenido organizado y facilitan la comprensión visual.
• Colaboración con testers: permite detectar problemas de accesibilidad antes de la implementación.

Estándares de accesibilidad

El diseño accesible no termina con la fase visual, por lo que es crucial colaborar con equipos de desarrollo para implementar estructuras semánticas correctas y etiquetas HTML coherentes, y conocer los cuatro principios fundamentales de las WCAG:

• Perceptible: presentar la información de manera clara (por ejemplo, con textos alternativos y contrastes adecuados).
• Operable: garantizar la navegabilidad desde cualquier dispositivo, incluyendo teclado.
• Comprensible: diseñar contenido legible y fácil de entender.
• Robusto: asegurar la compatibilidad con tecnologías actuales y futuras.

Consejos para equipos de diseño

Si quieres empezar a diseñar interfaces accesibles, te recomendamos:

• Familiarizarse con las WCAG, enfocándose en los estándares AA.
• Diseñar pensando en los usuarios y usuarias desde el inicio del proyecto.
• Usar prototipos y plugins para verificar accesibilidad en cada fase.
• Colaborar con el equipo y compartir aprendizajes para fomentar una cultura de accesibilidad.

Material adicional

• Blog de Figma
• Documentación oficial de las WCAG
• Material Design: principios y componentes
• UX Collective
• Doble o nada AA: accesibilidad web e inclusión en diseño UI/UX

Si te ha gustado este podcast...

Te recomendamos que escuches este episodio en el que analizamos dos de sus funcionalidades clave: los autolayouts y variants de componente. ¡No te lo pierdas!

¿Dónde escuchar nuestros podcast?

Puedes escucharlos en las principales plataformas de podcast: Ivoox, Spotify, YouTube, Google Podcast, Apple Podcast y Amazon Music.

Imagen de portada: Unsplash