Muchos ingenieros de software program tienen excelentes concepts de aplicaciones que están ansiosas por construir fuera del trabajo, pero con tantas especializaciones diferentes en tecnología, accesibilidad y mejores prácticas de UX son áreas a las que muchos ingenieros no han tenido mucha exposición. Si ese es usted, asegurarse de que su aplicación sea accesible puede parecer un desafío adicional abrumador.
En esta publicación, compartiré estrategias prácticas de alto impacto para ayudarlo a cubrir una gran cantidad de terreno de accesibilidad básica con un esfuerzo mínimo. Estos consejos no te llevarán hasta el cumplimiento de la WCAG, pero tendrán un gran impacto en hacer que tu aplicación sea más accesible.
Aprovechar las bibliotecas de componentes de la interfaz de usuario con accesibilidad incorporada
Si el desarrollo frontal no es su especialidad, usar una biblioteca de componentes es un movimiento inteligente. Puede ahorrarle un tiempo de desarrollo significativo al proporcionar componentes previamente construidos y bien diseñados que garanticen que su aplicación se vea consistente, cohesiva y siga las mejores prácticas front-end, todo sin requerir que los domine usted mismo.
Al elegir una biblioteca de componentes que priorice la accesibilidad, también obtiene componentes compatibles con WCAG de inmediato, sin el esfuerzo adicional de construirlos desde cero. Solo tenga en cuenta que algunas características de accesibilidad pueden requerir una configuración o configuraciones específicas, por lo que es una buena thought revisar la documentación para cada componente que use.
Bibliotecas recomendadas:
Mantine (React): Mantine es una biblioteca de componentes personalizable que prioriza la accesibilidad y tiene más de 100 componentes y 50 ganchos. Todos sus componentes siguen las pautas de Wai-Aria, y son compatibles con el lector de pantalla. Para obtener más detalles sobre cómo aseguran la accesibilidad, consulte sus documentos de accesibilidad.
Radix UI (React, Vue) – Radix UI es otra opción que proporciona un excelente soporte de accesibilidad. Sin embargo, no están destacados, lo cual es excelente si desea más management sobre la apariencia de su aplicación, pero si está buscando tener tanto trabajo de caja fuera de la caja, una biblioteca con más estilo puede ser un mejor camino a seguir. Para obtener más información sobre la accesibilidad de Radix UI, consulte sus documentos aquí.
PrimeVue (Vue): PrimeVue es un conjunto integral de componentes, iconos y plantillas de aplicación de la interfaz de usuario que se pueden usar con estilo o sin diseñar. Priorizan la accesibilidad y cumplen con WCAG 2.1 AA. Sus documentos sobre accesibilidad se pueden encontrar aquí.
Comprender el diseño básico accesible
Mastering totalmente el diseño suitable con WCAG probablemente requiere más tiempo de lo que un ingeniero de software program que explora un proyecto secundario está dispuesto a dedicar. Sin embargo, las siguientes directrices son un excelente punto de partida: son directos para implementar y cubrir algunas de las barreras más comunes que enfrentan los usuarios discapacitados.
- Asegúrese de que el contraste de colour sea lo suficientemente alto – para que todo se pueda leer claramente, incluso si el usuario tiene impedimentos visuales. Webaim tiene un verificador de contraste fácil donde puede verificar rápidamente que su fuente y los colores de fondo tienen lo suficientemente alto.
- El colour nunca debe ser el único significante de nada – Los usuarios de colorblind no podrán distinguir la diferencia. Por ejemplo, si un usuario escribe una respuesta no válida en una entrada, simplemente cambiar la entrada a tener un borde rojo no es suficiente; debería haber un mensaje de error y tal vez un icono.
- Los errores deben ser específicos – es decir, “la fecha de nacimiento debe estar en formato mm/dd/yyyy” en lugar de “arreglar errores de formulario” o “entrada inválida”
- Use etiquetas, no marcadores de posición – Los marcadores de posición están escritos en colores de bajo contraste, desaparecen cuando el usuario comienza a escribir, y los lectores de pantalla no pueden discernirlos. El uso de etiquetas admitirá a los usuarios con discapacidades visuales y problemas de memoria.
Agregar descripción en cualquier lugar donde pueda
Agregue más descripción de la que cree que es necesario. Esto no solo admite a los usuarios con discapacidades cognitivas, usuarios que usan lectores de pantalla y usuarios con problemas de memoria; Hace que su aplicación sea más intuitiva y fácil de usar para todos.
- Asegúrese de que todas las entradas de formulario tengan etiquetas (no solo marcadores de posición)
- Asegúrese de que los botones y los enlaces sean descriptivos – Sea claro sobre lo que hace el enlace o el botón. Por ejemplo, “haga clic aquí para leer más sobre Alaskan Malamutes” en lugar de simplemente “hacer clic aquí”; o “confirmar su pedido” en lugar de simplemente “confirmar”
- Asegúrese de que los botones sin texto tengan etiquetas de aria – Un lector de pantalla le leerá una etiqueta de Aria. Entonces, si tiene un botón que tiene un icono de lupa para indicar que este es el botón de búsqueda, agregaría una etiqueta de aria como “búsqueda”
- Agregar etiquetas alternativas descriptivas y útiles a las imágenes – Evite usar palabras clave web optimization, nombres de archivos o palabras genéricas como “imagen” en su texto alternativo. Los lectores de la pantalla leen el texto alternativo en voz alta cuando los usuarios llegan a una imagen, así que escriba una descripción que tenga sentido si alguien le describiera verbalmente la imagen. Para imágenes puramente decorativas, configure el atributo ALT en una cadena vacía (”), y los lectores de pantalla se saltarán automáticamente sobre ellas.
Use HTML semántico
El HTML semántico es mucho más amigable con los lector de pantalla que usar divs para todo. Si está escribiendo algún HTML usted mismo, use elementos HTML semánticos como NAV, pie de página, encabezado, principal. Además, use etiquetas de botón y ancla para su propósito previsto: no use etiquetas de anclaje para botones o viceversa.
Aproveche los marcos de pruebas de accesibilidad existentes
Afortunadamente, hay bastantes bibliotecas de pruebas de accesibilidad que funcionan bastante bien fuera de la caja, lo que significa que puede probar la accesibilidad de su aplicación sin dedicar una gran cantidad de tiempo escribiendo pruebas unitarias relacionadas con la accesibilidad.
Lighthouse: Lighthouse ofrece una herramienta de navegador y una herramienta que puede ejecutar auditorías de accesibilidad como parte de una tubería CI/CD.
Biblioteca de pruebas de núcleo de exe: la compañía Deque creó bibliotecas que funcionan con múltiples bibliotecas de pruebas frontales (incluyendo broma, biblioteca de pruebas reaccionadas, enzima, jazmín, moca, and many others.). Una vez que instala la biblioteca y la llama, ejecuta todas las pruebas por usted.
Construir una aplicación Solo es una gran empresa, y no es sorprendente que los desarrolladores se centren en lo que puede tener el mayor impacto. Sin embargo, la accesibilidad no tiene que ser algo que quede fuera. Al utilizar las estrategias y herramientas descritas aquí, puede mejorar significativamente la accesibilidad de su aplicación con un esfuerzo mínimo. Ya sea aprovechando las bibliotecas de componentes de la interfaz de usuario, asegurando HTML semántico o agregando etiquetas descriptivas y texto alternativo, estos pequeños ajustes pueden marcar una gran diferencia en la creación de una aplicación que sea más inclusiva para todos los usuarios. La accesibilidad no se trata solo del cumplimiento: se trata de proporcionar una experiencia mejor e intuitiva para todos, y estos pasos fundamentales son un gran lugar para comenzar.
