Guía del diseñador para los conceptos básicos del diseño de accesibilidad web

La web debe ser un lugar donde todos puedan acceder al mismo contenido desde cualquier lugar del mundo. Las técnicas de respuesta han recorrido un largo camino para diseños agnósticos del dispositivo. Pero que pasa diseños de accesibilidad-agnósticos?

La accesibilidad web ha existido durante años, pero su implementación requiere nuevos avances en tecnología y desarrollo web. Muchos desarrolladores quieren ayudar, pero es difícil entender cómo diseñar para la accesibilidad, porque hay muchas partes móviles. Esto incluye texto de alto contraste, páginas de audio para ciegos, medios optimizados y recargos para navegadores que no son JS / CSS..

En esta publicación, cubriré los aspectos básicos del diseño de accesibilidad, qué es, qué pretende resolver y los pasos que puede seguir para comenzar. Tenga en cuenta que este es un tema increíblemente detallado, y llevará meses o años de práctica para comprenderlo completamente. Pero los beneficios valen la pena, y todos sus proyectos web dejarán a cada visitante con una impresión duradera de contenido accesible.

Introducción a la accesibilidad

En términos generales, la accesibilidad es la idea de construir contenido para que puede ser consumido por cualquiera. Esto puede incluir personas ciegas que no pueden leer, y puede incluir personas con discapacidades físicas que no pueden operar un mouse o teclado (o cualquiera de los dos).

Pero también puede incluir personas con ligeras deficiencias en la vision Podría incluir personas con Problemas de dislexia o comprensión lectora.. De hecho, la idea de “accesibilidad web” incluye todas las posibles deficiencias que puedan afectar la forma en que una persona interactúa o consume un sitio web.

Quizás lo más importante es lo que puede ofrecer la accesibilidad web, como se describe aquí en una definición de Wikipedia:

Sin embargo, Anne Gibson argumenta en su post de List Apart que la definición de Wikipedia es demasiado vaga, y no lo es. sólo sobre las personas con discapacidad. Se trata realmente de todo el mundo En la red de todo el mundo que Puede que no tenga acceso óptimo a internet.

Muchos desarrolladores piensan que la accesibilidad es solo para personas ciegas que no pueden leer. Pero en realidad hay cuatro categorías principales de accesibilidad web:

1. Visual - baja visión o pobre / sin visión
2. Auditivo - sordos o sordos
3. Cognitivo - problemas para comprender o consumir información
4. Motor - problemas de accesibilidad física que pueden requerir dispositivos de entrada especiales como teclados o programas de comandos de voz

Estas categorías tienen cada una técnicas extensas que son Cambiando tan rápido como los estándares web. Pero hay una sensación de estabilidad con estos estándares ratificados en las WCAG (Pautas de accesibilidad del contenido web).

Algunos sitios web, como Las instituciones gubernamentales están obligadas por ley a seguir estas pautas.. Se aplican internacionalmente a través del W3C..

Echemos un vistazo a la burocracia detrás de la accesibilidad web y luego analicemos algunos consejos de diseño aplicables..

El W3C y el diseño accesible

Hay unos cuantos acrónimos relacionados con la accesibilidad web. Esto puede ser complicado si eres nuevo en el tema, pero una vez simplificado, espero que tengan más sentido.

• W3C (Consorcio Mundial de la red) - Un grupo internacional que define estándares web para protocolos, idiomas y regulaciones. Todas las pautas de accesibilidad oficiales caen bajo esta organización.
• WAI (Iniciativa de accesibilidad web) - Un programa oficial que cubre todo sobre accesibilidad. Este término general contiene todas las reglas, pautas y técnicas para la accesibilidad moderna..
• WCAG (Pautas de accesibilidad de contenido web) - Un grupo de normas y reglas para ayudar a los diseñadores a calificar sus sitios web según el nivel de accesibilidad..
• ARIA (Aplicaciones de Internet enriquecidas accesibles) - Un estándar específico que define cómo crear aplicaciones ricas accesibles que se basan en JavaScript / Ajax y tecnologías similares. Lea más sobre esto en este post de Anna Monus.

Otras pautas existen bajo el paraguas de WAI, incluyendo UAAG para agentes de usuario y UNA ETIQUETA para herramientas de autoría web. Por ahora, debería estar más interesado en las sugerencias hechas por el WAI y las pautas establecidas por el reglamento de WAI bajo el nombre WCAG.

Un gran recurso para aprender más es esta publicación del W3C sobre discapacidades, que comparte historias sobre cómo las personas discapacitadas acceden a Internet. Puede ser difícil entender todos los problemas intrincados, y mucho menos entender cómo resolverlos. Pero La mejor fuente es de personas que enfrentan estos problemas diariamente..

Otro tema importante que debe comprender es la conformidad WCAG. Esto se relaciona con El nivel de accesibilidad de un sitio web. Cubriendo una amplia variedad de factores. Los niveles se basan en la conformidad con Un sistema de calificación de A, AA y AAA.. Puedes verificar esto con una herramienta de verificación de accesibilidad web. La mejor puntuación es AAA..

Para obtener más información sobre estas pautas, consulte el artículo Introducción a la comprensión de WCAG 2.0 del W3C. También eche un vistazo a estos enlaces relacionados para más detalles:

• WCAG 2.0 simplificado
• Sección 508 Rendimiento WCAG

Pasos para el diseño accesible

Recomiendo visitar el sitio web del proyecto A11Y para obtener consejos prácticos de accesibilidad. A11Y (que también es un numeronimo) es un proyecto gratuito de código abierto alojado en GitHub, Ofreciendo técnicas para el diseño web accesible..

Puede explorar su lista de verificación de elementos de accesibilidad, o incluso un montón de patrones de diseño para elementos como desplegables, pestañas, acordeones, botones y ventanas modales (entre otros elementos).

Es difícil aprender todo esto e implementarlo al mismo tiempo. Tómelo paso a paso, y esté dispuesto a investigar más si se confunde..

Echa un vistazo a los consejos prácticos y los consejos rápidos de A11Y para comenzar. Te encontrarás con sugerencias específicas como enlaces de salto al contenido y combinaciones de colores de alto contraste. Cada una de estas técnicas tiene su propio nivel de detalle, por lo que la implementación consiste principalmente en pruebas para ver qué funciona.

Considere a los usuarios ciegos que pueden estar usando un lector de contenido automatizado. También pueden tener un traductor de audio, o incluso un teclado especial para navegar por la web con teclas en lugar de un mouse. Esta es la razón por HTML semántico adecuado (Echa un vistazo a este artículo) es tan importante con propiedades como tabindex y llave de acceso.

Si desea sumergirse, considere la posibilidad de elegir un tema listo para la accesibilidad. Puedes estudiar la arquitectura y personalizar el diseño para adaptarlo a tu proyecto..

Herramientas de prueba de accesibilidad

Si desea comenzar, elija un área de accesibilidad y pruébelo. Luego puedes usar herramientas de prueba para medir tu nivel de éxito.

Vale la pena mencionar que este proceso. puede ser frustrante. Hay mucho que considerar y las pautas de WCAG son tan difíciles de entender que puede terminar con una sobrecarga de información.

Lo importante es seguir moviéndose. Elija un área de accesibilidad y conviértala en su foco. Luego usa estas herramientas para ayudarte a modificar y mejorar tu trabajo.

Por ejemplo, podría intentar trabajar con las especificaciones de contraste de la WCAG para mejorar la legibilidad. Una vez que elija sus colores, solo use este comprobador de relación de contraste gratuito para ver si funcionan juntos.

Desafortunadamente, las pautas de WCAG 2.0 son tan confusas que puede tener dificultades para comprender los requisitos. Pero cuanto más lo intentes, más aprenderás y más entenderás..

Para probar un sitio que ya está en línea, echa un vistazo a WAVE. Es un verificador visual gratuito que muestra errores, alertas, problemas de contraste y otras características específicas de un sitio web. Obtendrá una vista visual y una lista de problemas en la barra lateral.

Hay otra aplicación gratuita en el sitio web de Cynthia Says que puede Consulte los sitios web para obtener las calificaciones de éxito de WCAG de A, AA, AAA, y Sección 508 para el cumplimiento del gobierno..

Y si te gusta el código abierto, echa un vistazo a estos herramientas gratuitas de prueba de accesibilidad en GitHub.

• HTML CodeSniffer
• Herramienta automatizada de prueba de accesibilidad
• Validador WCAG

Complementos del navegador

Es probable que los complementos del navegador proporcionen los métodos más rápidos y fáciles para las pruebas de accesibilidad. Puede ejecutarlos desde cualquier computadora en cualquier sitio web para obtener resultados realmente útiles..

AInspector para Firefox se considera una herramienta imprescindible para la accesibilidad. Esto lo comprueba todo, y es mucho más completo que el comprobador de WAVE..

A los usuarios de Mozilla también les puede gustar el WCAG Contrast Checker, que también es un complemento gratuito.

Los usuarios de Chrome no tienen el AInspector, pero sí tienen las Herramientas de Desarrollador de Accesibilidad creadas oficialmente por Google. Esto agrega herramientas adicionales en la ventana del inspector para verificar las pautas de accesibilidad.

Los usuarios de Chrome también tienen comprobadores de luminosidad para el contraste de color, y algunas otras extensiones gratuitas.

Desafortunadamente, no pude encontrar mucho para los usuarios de Safari, pero sí encontré una extensión para Opera que verifica el cumplimiento de WCAG 2.0. Si estás dispuesto a buscar en Google lo suficiente, puedes encontrar más herramientas por ahí..

Otras lecturas

Si se toma en serio el aprendizaje de la accesibilidad web, prepárese para un largo camino. No es fácil pero es muy satisfactorio..

A estas alturas, debería comprender más sobre la definición real de accesibilidad web, por qué existe y pequeños detalles sobre lo que se espera que hagan los desarrolladores para mejorar sus sitios web. El siguiente paso es una mayor investigación y práctica para integrar estos principios en su flujo de trabajo.

Consulte las siguientes publicaciones para obtener más información y asegúrese de consultar las pautas de WCAG si desea obtener información directamente de la fuente..

• Cómo mejorar la accesibilidad de la tabla HTML con el marcado
• Diseño accesible para usuarios con discapacidades
• 6 consejos para mejorar la accesibilidad del sitio web
• Asegúrese de que su sitio sea accesible para personas con discapacidades visuales