Te presentamos algunos consejos para diseño en HTML y CSS accesibles a fin de que la accesibilidad sea uno de los puntos imprescindibles para los diseñadores al momento de crear interfaces de usuario.
No tener en cuenta el aspecto de accesibilidad en la fase de diseño puede provocar que el sitio web o aplicación sea inútil para los usuarios. Ya sea que se incluyan pruebas de usabilidad, creación de prototipos, adopción de una biblioteca de patrones accesible o simplemente anotaciones en las estructuras, los diseñadores deben tener presente en su flujo de trabajo.
De esta forma, las fases de revisión serán más sencillas para encontrar defectos de accesibilidad, y crear desde el principio la función de «desplazarse hacia la izquierda» lo cual puede tener un impacto positivo en los contenidos de una página.
El desplazamiento hacia la izquierda
El costo de los cambios y la reparación de defectos en diferentes etapas del proceso de desarrollo pueden ser muy caros. El hecho de no arreglar un defecto en la etapa de diseño que tiene un factor de 1x, podría aumentan a 6x los costos durante la implementación, 15x durante las pruebas después de la confirmación del código, y llegar a 100x si se detecta después de que el defecto lo hace en producción, indican algunos estudios.
Una investigación reciente realizada por el National Institute of Standards and Technology (NIST) estima que los costos de reparación de defectos son 10 veces más durante que las pruebas de integración y 15 veces más durante pruebas del sistema y 30 veces en producción. [^ 2] Independientemente de cuáles sean los costos reales de tu organización, una cosa es segura: detectar defectos en el diseño y en la fase de desarrollo representa menor costo que más adelante en el proceso.
Se cree que a medida que las aplicaciones web han aumentado en complejidad, el número de defectos por página ha aumentado de entre 30 y 50 defectos por página. Esto ha opacado las tasas de aspectos funcionales y amplifican el valor en pruebas de accesibilidad, así como fijar una barra a la izquierda en el proceso.
Fase de diseño
Anotaciones
Otro de los consejos para diseño en HTML y CSS accesibles, son las anotaciones son explicaciones textuales o gráficas agregadas a un diseño para informar al implementador sobre la intención. Al igual que un diseñador que considera el color y el tamaño de fuente, la información de accesibilidad también debe transmitirse en los diseños.
Nombre, rol y estado
El nombre accesible que se le da a un componente determinará la información a un usuario de la tecnología de asistencia cuando se interactúe con éste.
Los diseñadores deben de ser minuciosos en sus prototipos y anotar todos los aspectos (aunque parezcan obvios) para garantizar que los implementadores agreguen esta información semántica a las funcionalidades de un componente. Tener los roles asignados desde el principio ahorrará tener que regresar y agregarlos a los controles después del proceso de implementación.
Finalmente, al igual que los diseñadores trazan la apariencia de un control cuando está en reparación, deben pensar en los diversos estados de su widget en términos de accesibilidad.
Pruebas de usabilidad
La prueba de usabilidad es una metodología de investigación UX en la que un investigador hace que un usuario realice diversas tareas, después analiza su comportamiento, ésta es una etapa muy importante en la fase de diseño.
La información recopilada de las pruebas de usabilidad es vital para configurar las experiencias de los usuarios digitales. La posibilidad de realizar este tipo de pruebas con usuarios con discapacidades es extremadamente importante porque permite tener una idea de la facilidad con la que estos usuarios podrán interactuar con el contenido que están creando. Si se realizan pruebas de usabilidad en un sistema existente, se podrá configurar un escenario realista y aterrizado para el participante, lo cual es excelente cuando se trata de usuarios que confían en diversas tecnologías de asistencia.
Si realizas pruebas de usabilidad en un sistema que aún no existente, debes prepararte para enfrentar los desafíos de accesibilidad que rodean la salida del software de diseño. Los prototipos interactivos generados por estas herramientas suelen ser diferentes de lo que será el producto final en un navegador o en una plataforma del sistema operativo. Además, los «prototipos funcionales» suelen ser inaccesibles, lo cual se traducirá como uno de los consejos para diseño en HTML y CSS accesibles.
Si es posible, encuentra una alternativa que se pueda usar en el lugar de tu prototipo, lo que puede darte una buena idea de cómo interactuarán los participantes con el sistema. Por ejemplo, si creas un nuevo componente de navegación móvil, busca uno similar en internet y realiza pruebas de usabilidad con este. Determina qué funcionó en esta alternativa y aprende de sus mejoras.
De cualquier manera, siempre debes de estar preparado para hacer adaptaciones los sus participantes de las pruebas de usabilidad en función de sus discapacidades. Asegurarse de que las pruebas se realicen sin problemas y sin obstáculos no solo facilitará el proceso a los usuarios, sino que también le permitirá realizar más pruebas en menos tiempo.
Bibliotecas de patrones
Las bibliotecas de patrones son colecciones de componentes para la interfaz de usuario y son beneficiosas tanto en las fases de diseño como en la de desarrollo. Tener un conjunto de componentes de interfaz de usuario accesibles hace que la creación de aplicaciones funcionales sea mucho más fácil. Para el diseñador, estos componentes ayudan a mantener una buena consistencia en su aplicación, lo que mejora la experiencia general de sus usuarios.
Por otro lado, para el desarrollador, tener componentes reutilizables, accesibles y probados ayuda a producir contenido de alta calidad. Estos componentes deben tratarse con especial cuidado en términos de accesibilidad porque se usarán numerosas veces a través de las aplicaciones
Trabajar con desarrolladores
Se recomienda hablar con otros desarrolladores y diseñadores, ya que suele pasar que trabajan completamente aislados unos de otros. No solo se debe incluir a los desarrolladores en la fase de diseño como reuniones de revisión de diseño, sino que se deben incluir a los diseñadores en la fase de desarrollo.
Los desarrolladores deben estar al tanto de los detalles de implementación que pueden ayudar a dar forma a las composiciones de diseño o incluso pivotar un enfoque para resolver un problema de diseño.
Del mismo modo, los diseñadores pueden ayudar a mantener a los desarrolladores todo bajo control cuando se trata de implementar sus diseños de manera accesible porque los aspectos orientados a detalles, como el espacio y el uso de colores específicos, pueden tener impacto en la accesibilidad.
Mientras que los desarrolladores implementan un diseño, los diseñadores deben prestar mucha atención a cosas como el enfoque, el orden de tabulación, el orden de lectura, las fuentes, los colores e incluso los nombres accesibles y los textos alternativos de las imágenes. Porque, después de todo, ¿de qué servirían todas esas anotaciones de accesibilidad si el desarrollador las ignora?
La fase de desarrollo
Prueba de accesibilidad automatizada
A los desarrolladores les encanta la idea de que ciertas cosas en nuestros flujos de trabajo se pueden automatizar. Afortunadamente, hay bibliotecas de automatización de accesibilidad increíbles disponibles, que se deberían aprovechar para ayudar a crear interfaces accesibles sostenibles.
Las herramientas de análisis estático como eslint-plugin-jsx-a11y pueden advertir a desarrolladores sobre posibles problemas de accesibilidad mientras están codificando. Los desarrolladores incluso pueden configurar su editor de texto para que muestre estas advertencias correctamente mientras escriben el código, detectando estos defectos a medida que aparecen.
Los motores de reglas de accesibilidad, como ax-core, se pueden integrar en casi cualquier marco o entorno y pueden ayudar a detectar problemas de accesibilidad comunes.
Una manera de garantizar que el equipo esté creando contenido accesible es integrar este tipo de herramientas en los canales de integración continua y entrega continua. Escribir casos de prueba específicos de accesibilidad (unidad o extremo a extremo) es otra forma de automatización. Esto significa que podemos garantizar defectos de accesibilidad mínimos incluso llegar a los servidores de desarrollo y no alcanzar la fase de producción.
Administra los defectos de accesibilidad
Los problemas de accesibilidad no deben tratarse de manera diferente a los defectos de seguridad o funcionalidad. Deben clasificarse y priorizarse regularmente con el resto de la carga de trabajo «normal».
La medición del progreso y la recopilación de métricas específicas para los defectos de accesibilidad también pueden ser útiles, especialmente si el equipo está enfocado en aumentar la accesibilidad, lo cual puede ayudar a identificar los puntos débiles o cuellos de botella en el sistema. Si el equipo participa en retrospectivas de sprint, la accesibilidad debería ser un tema de conversación. Reflexionar sobre lo que funciona y lo que no es un ejercicio saludable y puede conducir a mejoras en el enfoque general.
La herramienta axe beta
Las pruebas manuales requieren una comprensión profunda de la accesibilidad, así como las pautas de accesibilidad al contenido web del W3C, o «WCAG». La aplicación Axe Beta ayuda a superar las pruebas manuales sin tener que ser un experto en accesibilidad. Tiene un gran conjunto de pruebas guiadas inteligentes, que hacen preguntas simples y facilitan el trabajo.
Tomemos imágenes como ejemplo y qué información proporcionan en el contexto de una página web. Una biblioteca de automatización de accesibilidad no puede derivar una intención informativa escaneando o procesando una imagen. Incluso si alimentamos una imagen con un algoritmo de aprendizaje automático y hay una descripción perfecta de lo que hay en esa imagen, no se sabrá qué transmite esa imagen en el contexto de la página. La información que transmite una imagen determinada, o si se usa únicamente como decoración, depende completamente del autor del contenido.
Todo junto
Tener en mente la accesibilidad desde el comienzo del desarrollo hace que la creación de contenido accesible sea mucho más fácil que hacer que las consideraciones en el ciclo de vida del desarrollo de software. Al incorporar la accesibilidad a las ideas, el diseño y la implementación de su software, crea un producto más sostenible.
Prepara a tu equipo utilizando recursos como WCAG, ARIA, ARIA Authoring Practices y Stack Overflow. Evita que los defectos de accesibilidad lleguen al software aprovechando las bibliotecas de automatización de accesibilidad e integrándolas en los servidores de integración continua.
Leíste: Consejos para diseño en HTML y CSS accesibles, te recomendamos: Cómo configurar HTTPS con create-react-app
Te invitamos a que nos sigas en nuestras redes sociales: Facebook, Twitter, Instagram y Youtube con el perfil: @tortugacode
