julio 27, 2020

Consejos para dise├▒o en HTML y CSS accesibles

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.

HTML y CSS accesibles
HTML y CSS accesibles

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