👏🏻 🐲 🥙 Control de calidad y su papel en la creación de recursos para personas con discapacidad 🤛🏾 🥠 👽

En este artículo quiero llamar la atención sobre el hecho de que el problema de accesibilidad de los sitios y aplicaciones para personas con discapacidad es más grave de lo que parece. Debajo del gato hay una lista de herramientas útiles para probar y microauditar varios sitios conocidos.

Primero, definamos los términos.

HIA : opciones de salud limitadas. Dichas personas pueden tener desviaciones en el desarrollo físico y / o mental de un espectro muy diferente. Según el informe de la OMS (Organización Mundial de la Salud) sobre HIA 2018:

Más de mil millones de personas, aproximadamente el 15% de la población mundial, tienen alguna forma de discapacidad.
De 110 a 190 millones de adultos tienen dificultades de movilidad, problemas de visión / audición, etc.
Más de 12 millones de personas con discapacidad viven en Rusia (la mayoría de ellos son adultos).

Gracias a la tecnología, los usuarios con discapacidades pueden trabajar, desarrollarse y divertirse más o menos, ordenar ropa y productos, en general, hacer todo como todos los demás.
Para facilitar que estas personas estén en Internet, debe prestar más atención a la disponibilidad de servicios y productos digitales.

Y aquí está el control de calidad y qué podemos hacer

El objetivo principal de QA es garantizar la calidad de un servicio o producto. Quiero que el concepto de "calidad" se ajuste cada vez más a la "accesibilidad". Según el manual que escribí a continuación, la accesibilidad es la implementación de contenido en la web de tal manera que los usuarios de la gama más amplia posible puedan trabajar con él, incluidas las personas con discapacidad.

Por cierto, estas recomendaciones ayudarán a que el sitio sea más accesible para los usuarios que no tienen ciertas restricciones. ¿Cómo puedo abogar por el desarrollo del producto en una conversación con un cliente?

Muchas personas con discapacidad están en Internet todos los días, y dicha revisión les permitirá usar el producto sin problemas,
La adaptación ayudará a que el producto se destaque entre los competidores,
Un producto adaptado puede afectar positivamente el número de usuarios y afectar la calificación de la empresa en su conjunto,
, , , . ,
“accessibility id” ( iOS) iOS ,
, .

?

Los criterios detallados para el cumplimiento del producto se describen en la Guía de accesibilidad del contenido web (WCAG).

Desde el principio: hay tres niveles de cumplimiento que dependen de la situación específica y del grupo de usuarios: el más bajo , el medio y el más alto . Los niveles se dividen en cuatro principios principales: perceptibilidad, controlabilidad, comprensibilidad, confiabilidad.

Cada uno de los principios incluye diferentes requisitos de contenido, por ejemplo, es importante proporcionar una versión de texto de elementos que no sean de texto, para garantizar el control total del teclado solamente o para evitar elementos de diseño que son peligrosos para la salud. Se puede encontrar una lista completa de los requisitos de nivel en el mismo WCAG 2.1.

En Internet, con mayor frecuencia puede encontrar un panel de configuración de pantalla para personas con discapacidades. Por cierto, hay algún tipo de historia con el panel de HIA. Todavía puede verificar cómo su implementación coincide con los diseños. Pero cómo entender qué tan bien una persona con discapacidad visual lee esta o aquella información ya es una pregunta.

Por ejemplo, ¿cómo saber si una persona con deuteranomalía (un estado de visión caracterizado por una ligera disminución de la sensibilidad a las ondas del espectro verde ) es normal para ver los elementos de la página? Para resolver este problema, la herramienta NoCoffee es adecuada.

No café- Una extensión gratuita para navegadores (Chrome, Firefox), un simulador de defectos visuales. Muy fácil de usar y efectivo. La herramienta es popular, obtuvo muchas críticas positivas, más de 20,000 descargas en diferentes plataformas con una calificación promedio alta de 4 de 5.
imagen

Cómo funciona

NoCoffee Con NoCoffee, puede verificar la pantalla para personas con todo tipo de daltonismo: protanomalía, protanopia, deuteranomalía, deuteranopia, tritanomalía. , tritanopia, acromatopsia, tetracromatia. Es posible simular diversos defectos visuales / enfermedades oculares y otros factores externos: baja agudeza visual, cataratas, bajo contraste máximo, nistagmo, defectos del campo visual.

Tuve suerte (o mala suerte), mi hermano tenía deuteranomalía, le pedí que describiera los colores que ve en el sitio al que apliqué el filtro de deuteranomalía. Después de eso, verifiqué nuestros resultados, y resultaron ser los mismos, más o menos.

Ejemplos de "configuraciones para paneles HIA"

Pension Fund of Russia

imagen

En el “panel de configuración de HIA” del portal de Pension Fund hay algunos errores de diseño. Pero hay una ventaja: tiene su propio reproductor para reproducir texto seleccionado. Esta es una alternativa a los lectores de pantalla. Screen reader es un programa para leer desde la pantalla de una computadora o teléfono inteligente, diseñado para personas ciegas y con discapacidad visual. Expresa el texto, los elementos de la interfaz y también proporciona comentarios de sonido y vibración.

El sitio se centra en el trabajo de los lectores de pantalla, y está muy bien adaptado para su trabajo, pero más sobre eso más adelante.

VTB

imagen

Bank VTB Bank ha implementado un "panel de configuración HIA", hay algunos problemas con la visualización de elementos al cambiar la configuración de este panel. Pero en general, vale la pena rendir homenaje: no encontré esa funcionalidad en otros bancos.

Sociedad de personas con discapacidad

imagen

de toda Rusia Pero en el sitio web de la Sociedad de personas con discapacidad de toda Rusia, resultó ser el "panel de configuración de HIA", pero sus capacidades son mínimas y hay problemas de diseño. Por supuesto, me gustaría que dicho recurso sea más adecuado para sus usuarios.

WorldSkills Ticket to the Future

imagen

Trabajamos en el sitio web del proyecto WorldSkills Ticket to the Future. Aquí implementamos configuraciones para mostrar elementos de página para personas con discapacidades. Además de cambiar el color de los elementos, también hay un diseño separado (diferente del estándar) para mostrar los elementos al cambiar de color.

Además de ajustar los temas de color, en los paneles HIA generalmente hay una función para aumentar el tamaño del texto, la función de activar / desactivar la visualización de imágenes ( esto se encuentra en todos los ejemplos anteriores ).

Menos común es la capacidad de personalizar la visualización del texto: el intervalo entre los caracteres y la fuente serif, tales configuraciones están diseñadas para personas con dislexia (la dislexia es una discapacidad de aprendizaje específica de origen neurológico, caracterizada por dificultades con el reconocimiento de palabras preciso o fluido y capacidades de lectura y escritura insuficientes ) . Esto, por cierto, se implementó en el sitio web de VTB y el Fondo de Pensiones de Rusia.

Desafortunadamente, no hay simuladores de discapacidad neurológica, y prácticamente la única forma de verificar la corrección de la visualización de texto con serifas o con un intervalo aumentado entre caracteres es verificar la funcionalidad de una persona con dislexia.

Volver a las pruebas de accesibilidad

Otra buena herramienta de prueba es el hacha .

ax está diseñado para verificar el cumplimiento de un sitio o aplicación con las pautas de WCAG 2. Esta es una extensión para navegadores, actualmente está instalada más de 100,000 veces y tiene una calificación de 4.5.

Cómo funciona el hacha

La herramienta es fácil de usar. Debe instalar la extensión en el navegador. La gestión se lleva a cabo desde el panel del desarrollador: después de la instalación, aparecerá una nueva pestaña de hacha. Cuando lo cambies, veremos un montón de anuncios, llamadas a "comprar una versión profesional", pero lo más importante es el botón de analizar.

Un análisis de una de las páginas del Servicio del Estado reveló 10 incumplimiento de los requisitos de WCAG. Podemos suponer que el sitio está bien adaptado para personas con discapacidades:
imagen

pero al analizar una de las páginas de la UIF, se encontraron 29 inconsistencias. Definitivamente se necesitan mejoras aquí, especialmente teniendo en cuenta el hecho de que las personas con discapacidad y las personas de edad están utilizando precisamente el recurso.
imagen

El sitio de la Sociedad Rusa de Personas con Discapacidad tiene 69 inconsistencias con las recomendaciones de WCAG.
imagen

¿Qué obtenemos después de analizar ax:

. : , WCAG 2.
.

Para adaptar el sitio a personas con problemas de motricidad fina y a quienes no pueden usar el mouse, es necesario implementar elementos de página para que el usuario pueda cambiar entre ellos con la tecla Tab.

Un buen ejemplo es "Gosulugi":
imagen

la imagen muestra cómo moverse por los elementos de la página de forma secuencial y en el orden correcto con la tecla Tab.

El sitio de la Sociedad Rusa de Discapacitados está mal adaptado para cambiar con la tecla Tab.
imagen

No se muestran elementos de página resaltados. La transición entre los elementos se lleva a cabo de forma gradual e inconsistente. Esto puede complicar en gran medida la vida del usuario con discapacidades.

El funcionamiento correcto de los lectores de pantalla se ve afectado principalmente por: no usar el atributo alt para imágenes, etiquetas para encabezados, usar elementos para marcar formularios, información sobre herramientas y más.

Todos los problemas anteriores ayudarán a encontrar el hacha. Si elimina la mayoría de los problemas identificados por ax al analizar una página o aplicación web, los lectores de pantalla funcionarán correctamente. Naturalmente, el resultado ideal nunca será, pero la diferencia entre los resultados de la prueba de leer el texto por el lector de pantalla antes de solucionar los problemas identificados por ax, y después de eso será enorme.

Materiales utiles

Pautas de Accesibilidad al Contenido en la Web (WCAG) 2.0 : un documento normativo basado en el software desarrollado para personas con discapacidades;

WebLind es un buen recurso sobre desarrollo de sitios web para personas con discapacidad visual;

Directriz : un recurso para desarrolladores, gerentes, diseñadores sobre la implementación del sitio para personas con discapacidades.

Total

En general, el campo de trabajo para mejorar los recursos en términos de accesibilidad es realmente enorme. Espero que pronto haya más herramientas de este tipo, así como control de calidad y desarrolladores que puedan explicar al negocio la necesidad de tal adaptación. Esto es algo bueno para todos: las personas con discapacidades pueden usar completamente los recursos y la empresa recibirá nuevos usuarios.

¿Cómo es accesible su sitio o aplicación? ¿Utiliza alguna herramienta de prueba?

Control de calidad y su papel en la creación de recursos para personas con discapacidad