{"id":632,"date":"2022-05-19T17:14:39","date_gmt":"2022-05-19T22:14:39","guid":{"rendered":"https:\/\/www.tesseractspace.com\/blog\/?p=632"},"modified":"2022-05-20T18:21:20","modified_gmt":"2022-05-20T23:21:20","slug":"pruebas-y-auditorias-automatizadas-de-accesibilidad","status":"publish","type":"post","link":"https:\/\/www.tesseractspace.com\/blog\/pruebas-y-auditorias-automatizadas-de-accesibilidad\/","title":{"rendered":"Pruebas y auditor\u00edas automatizadas de accesibilidad"},"content":{"rendered":"\n

La accesibilidad en dise\u00f1o de productos y servicios digitales es una disciplina que se encuentra dentro del paraguas que es la Experiencia de Usuario. La accesibilidad es c\u00f3mo hacemos m\u00e1s usables los productos y servicios que dise\u00f1amos para personas que tienen capacidades visuales, auditivas, de habla, motrices o cognitivas limitadas o inexistentes.<\/strong><\/p>\n\n\n\n

Igual que con la usabilidad, en accesibilidad debemos ser capaces de medir y analizar su implementaci\u00f3n de manera cuantitativa para poder comparar con otros sitios y para establecer metas de calidad en un dise\u00f1o.<\/p>\n\n\n\n

Se puede hacer una revisi\u00f3n sencilla del nivel de accesibilidad de una p\u00e1gina web utilizando herramientas de an\u00e1lisis automatizado, como Lighthouse<\/strong>, que viene incluida en Google Chrome<\/a>:<\/p>\n\n\n\n

\"\"
An\u00e1lisis de accesibilidad web con Lighthouse<\/figcaption><\/figure>\n\n\n\n
  1. Abre Google Chrome<\/strong> en tu computadora y abre una p\u00e1gina ya existente que desees evaluar.<\/li>
  2. Da doble clic en el men\u00fa de opciones en la esquina superior del navegador, ve a la opci\u00f3n \u201cM\u00e1s herramientas<\/strong>\u201d y despu\u00e9s elige \u201cherramientas de desarrollador\u201d. <\/li>
  3. Al abrirse la ventana con opciones de desarrollo, da clic en la flecha en el men\u00fa superior y da clic a la opci\u00f3n \u201cLighthouse<\/strong>\u201d<\/li>
  4. Aqu\u00ed es donde se encuentran las auditor\u00edas que puede realizar esta herramienta. Quita todas excepto \u201cAccesibilidad<\/strong>\u201d. Observa que puedes elegir correr la prueba para dispositivos m\u00f3viles o para computadora de escritorio, porque tienen contextos de accesibilidad diferentes. <\/li>
  5. Da clic en \u201cGenerar Reporte<\/strong>\u201d y espera a que termine de analizar la p\u00e1gina.<\/li>
  6. La herramienta dar\u00e1 un resultado num\u00e9rico en el rango de cero a cien, indicando una estimaci\u00f3n de la accesibilidad de la p\u00e1gina, y algunas recomendaciones sobre c\u00f3mo mejorarla para llegar al 100. <\/li><\/ol>\n\n\n\n
    \"\"
    Reporte de accesibilidad web con <\/figcaption><\/figure>\n\n\n\n

    Esta es una prueba sencilla, pero no es definitiva. Para hacer una auditor\u00eda completa de accesibilidad necesitamos ir a mayor profundidad.<\/p>\n\n\n\n

    Gu\u00edas de Contenido Web Accesible<\/strong><\/h3>\n\n\n\n

    A diferencia de la usabilidad, la accesibilidad tiene reglas bien definidas que podemos evaluar durante el proceso de dise\u00f1o de un producto o una vez que est\u00e1 terminado. Para sitios web, la principal referencia son las Gu\u00edas de Contenido Web Accesible<\/strong> o Web Content Accessibility Guidelines<\/strong> que produjo el World Wide Web Consortium<\/strong> (la m\u00e1xima autoridad en la web), tambi\u00e9n conocidas por sus siglas WCAG<\/strong>.<\/p>\n\n\n\n

    La gu\u00eda de WCAG provee los criterios para hacer evaluaciones y auditor\u00edas de accesibilidad para sitios web y en general para cualquier producto digital. WCAG separa los criterios en cuatro categor\u00edas:<\/p>\n\n\n\n

    1. Percibible:<\/strong> La informaci\u00f3n y los componentes de la interfaz de usuario deben presentarse a los usuarios de manera que puedan percibirlos con sus sentidos disponibles.<\/li>
    2. Operable:<\/strong> Los componentes de la interfaz de usuario y la navegaci\u00f3n deben ser operables con los controles y medios disponibles al usuario.<\/li>
    3. Entendible: <\/strong>La informaci\u00f3n y el funcionamiento de la interfaz de usuario deben ser comprensibles para todos los usuarios.<\/li>
    4. Robusto: <\/strong>El contenido debe ser lo suficientemente s\u00f3lido como para que pueda ser interpretado por una amplia variedad de clientes por el usuario, incluidas las tecnolog\u00edas de asistencia de accesibilidad.<\/li><\/ol>\n\n\n\n

      Los criterios de accesibilidad de WCAG se clasifican adem\u00e1s en tres niveles de aceptaci\u00f3n para satisfacer las necesidades de diferentes grupos de usuarios y de diferentes situaciones: A <\/strong>es el m\u00e1s bajo, AA <\/strong>es de rango medio y AAA <\/strong>es el m\u00e1s alto. <\/p>\n\n\n\n

      El nivel A<\/strong> establece un nivel m\u00ednimo de accesibilidad y no logra una accesibilidad amplia para muchas situaciones. Por esta raz\u00f3n, se recomienda la conformidad con el nivel AA <\/strong>para sitios y aplicaciones que est\u00e9n en la web.<\/p>\n\n\n\n

      Las gu\u00edas de WCAG no recomiendan que se aplique de manera rigurosa con el Nivel AAA de accesibilidad para sitios completos porque es muy dif\u00edcil satisfacer todos los criterios de \u00e9xito del Nivel AAA <\/strong>para algunos contenidos.<\/p>\n\n\n\n

      Para poder realizar una auditor\u00eda de accesibilidad en un sitio web, es decir, medir su nivel de implementaci\u00f3n de las recomendaciones de WCAG y hacer recomendaciones para hacerla m\u00e1s accesible, primero es necesario entender qu\u00e9 es lo que estamos buscando en el an\u00e1lisis para cada uno de los criterios.<\/p>\n\n\n\n

      Perceptible<\/h4>\n\n\n\n

      Para revisar que un sitio cumple los criterios de ser perceptible debemos preguntarnos:<\/p>\n\n\n\n

      1. \u00bfTodas las im\u00e1genes importantes tienen atributos de texto alternativo?<\/strong>
        Las im\u00e1genes importantes que transmiten contenido o informaci\u00f3n importante deben tener el atributo de contenido alternativo (o alt) que comunica el mismo contenido o informaci\u00f3n que la imagen en forma escrita. Im\u00e1genes como iconos o decorativas no necesitan tener atributos alt ext. Este criterio afecta a personas con discapacidades visuales o auditivas.<\/li><\/ol>\n\n\n\n
        1. \u00bfEl contenido de video tiene subt\u00edtulos cerrados, subt\u00edtulos abiertos o una transcripci\u00f3n disponible?<\/strong>
          Todos los subt\u00edtulos o transcripciones deben transmitir toda la informaci\u00f3n y el contenido incluido en el video. Este criterio afecta a personas con discapacidades visuales o auditivas.<\/li><\/ol>\n\n\n\n
          1. \u00bfSe usa solo el color para transmitir significado o informaci\u00f3n?<\/strong>
            El color por s\u00ed solo nunca debe usarse para transmitir significado o informaci\u00f3n.  Este criterio afecta a personas con discapacidades visuales.<\/li><\/ol>\n\n\n\n
            1. \u00bfTiene el sitio una relaci\u00f3n de contraste de al menos 5: 1 entre el color del texto y el color de fondo?<\/strong>
              Es necesaria una relaci\u00f3n de contraste de al menos 5:1 para que los usuarios con discapacidad visual parcial puedan leer el texto y distinguir el contenido. Existen herramientas gratuitas para evaluar el contraste en una imagen. Utilizando la herramienta de validaci\u00f3n de contraste de a11y.com<\/a> realiza una evaluaci\u00f3n de los colores de un sitio web ya existente que est\u00e9s evaluando. \u00bfQu\u00e9 resultados te da? \u00bfQu\u00e9 recomendaciones har\u00edas para ajustar los colores y hacer la p\u00e1gina m\u00e1s accesible?<\/li><\/ol>\n\n\n\n
              \"Herramienta
              Herramienta de validaci\u00f3n de contraste de color para accesibilidad.<\/figcaption><\/figure>\n\n\n\n
              1. \u00bfEl contenido de video y audio est\u00e1 configurado para que no se reproduzca autom\u00e1ticamente?<\/strong>
                El contenido de video y audio que se reproduce autom\u00e1ticamente puede distraer a algunos usuarios con deterioro cognitivo. Para otros usuarios puede ser una distracci\u00f3n molesta.<\/li><\/ol>\n\n\n\n
                1. \u00bfEl contenido no est\u00e1 restringido a una sola orientaci\u00f3n?<\/strong>
                  El contenido debe poder verse vertical u horizontalmente sin p\u00e9rdida de informaci\u00f3n o impacto al utilizar dispositivos que ajustan la pantalla con el movimiento, particularmente dispositivos m\u00f3viles. Este criterio afecta a personas con discapacidades motrices.<\/li><\/ol>\n\n\n\n

                  Operable<\/h4>\n\n\n\n

                  Los criterios que debemos revisar para que el sitio sea operable incluyen:<\/p>\n\n\n\n

                  1. \u00bfEs posible navegar a todos los enlaces en una p\u00e1gina usando solo el teclado?<\/strong>
                    Pasar las pruebas de navegaci\u00f3n con el teclado es un umbral importante para aquellos con problemas de motricidad fina habilidades. Este criterio afecta a personas con discapacidades motrices.<\/li><\/ol>\n\n\n\n
                    1. Para las p\u00e1ginas con un formulario de b\u00fasqueda, \u00bfes posible navegar a todos los campos del formulario de b\u00fasqueda y enviar un buscar usando solo el teclado?<\/strong>
                      Pasar las pruebas de navegaci\u00f3n con el teclado es un umbral importante para aquellos con problemas de motricidad fina habilidades. Este criterio afecta a personas con discapacidades f\u00edsicas.<\/li><\/ol>\n\n\n\n
                      1. \u00bfLos atajos de teclado -o shortcuts- est\u00e1n configurados adecuadamente para la navegaci\u00f3n y las ventanas modales?<\/strong>
                        Pasar las pruebas de navegaci\u00f3n con el teclado es un umbral importante para aquellos con problemas de motricidad fina habilidades. Este criterio afecta a personas con discapacidades motrices.<\/li><\/ol>\n\n\n\n
                        1. \u00bfHay alg\u00fan contenido intermitente en el sitio?<\/strong>
                          El contenido intermitente puede presentar un riesgo de convulsiones y no se considera una buena pr\u00e1ctica de UX en ning\u00fan caso. El contenido intermitente debe evitarse en todas las circunstancias en consideraci\u00f3n de los usuarios con deterioro cognitivo.<\/li><\/ol>\n\n\n\n
                          1. \u00bfHay formas de desactivar la activaci\u00f3n por movimiento o m\u00e9todos alternativos para activar la funcionalidad disponible mediante accionamiento por movimiento?<\/strong>
                            Es posible que las personas con temblores o funci\u00f3n motora limitada no puedan aprovechar esta funcionalidad, o puede desencadenarla inadvertidamente, por ejemplo, movimientos involuntarios del rat\u00f3n o doble presi\u00f3n de las teclas de teclado. Este criterio afecta a personas con discapacidades motrices.<\/li><\/ol>\n\n\n\n

                            Comprensible<\/h4>\n\n\n\n

                            Los criterios para que el sitio sea Comprensible:<\/p>\n\n\n\n

                            1. \u00bfEl sitio contiene t\u00e9rminos, palabras inusuales, acr\u00f3nimos o abreviaturas sin proporcionar una manera para identificarlas y definirlas?<\/strong>
                              Estos elementos pueden ser dif\u00edciles de entender y comprender para aquellos con discapacidades de aprendizaje u otras discapacidades cognitivas, como p\u00e9rdida de la memoria a corto plazo. Si se utilizan estos t\u00e9rminos, se debe agregar una manera de definir el significado de cada uno, por ejemplo, agregar un enlace a una definici\u00f3n en un diccionario.<\/li><\/ol>\n\n\n\n
                              1. \u00bfEl contenido de la p\u00e1gina est\u00e1 escrito a no m\u00e1s de un nivel de lectura de escuela secundaria?<\/strong>
                                Haz una revisi\u00f3n del contenido del sitio web. Si el nivel de legibilidad no lo podr\u00eda entender un estudiante de secundaria es necesario actualizar el contenido reduciendo el n\u00famero de palabras por oraci\u00f3n y el n\u00famero de oraciones por p\u00e1rrafo.  Este criterio afecta a personas con discapacidades cognitivas.<\/li><\/ol>\n\n\n\n
                                1. \u00bfLos formularios tienen etiquetas, instrucciones y un buen manejo de errores?<\/strong>
                                  Es necesario que el dise\u00f1o de un formulario sea el adecuado para facilitar su uso a usuarios con ciertas discapacidades de aprendizaje.<\/li><\/ol>\n\n\n\n
                                  1. \u00bfSe proporciona contenido de ayuda?<\/strong>
                                    El contenido de ayuda es necesario para facilitar el uso de determinadas dificultades de aprendizaje. Este criterio afecta principalmente a personas con discapacidades cognitivas.<\/li><\/ol>\n\n\n\n

                                    Robusto<\/h4>\n\n\n\n

                                    El \u00faltimo criterio es que el contenido sea robusto:<\/p>\n\n\n\n

                                    1. \u00bfEl destino y el contexto de cada enlace son claros cuando se leen fuera de contexto?<\/strong>
                                      El texto de los enlaces debe ser descriptivo del destino y el contenido para facilitar su uso con lectores de pantalla que convierten el texto digital en audio y otra tecnolog\u00eda de apoyo para usuarios con impedimentos visuales y f\u00edsicos.<\/li><\/ol>\n\n\n\n
                                      1. \u00bfEl contenido de cada secci\u00f3n est\u00e1 claramente definido con un encabezado que tiene sentido cuando se lee el contenido?<\/strong>
                                        Muchos lectores de pantalla y tecnolog\u00eda de apoyo permiten realizar navegaci\u00f3n saltando desde un encabezado a otro. Cada secci\u00f3n de contenido debe tener un encabezado que describa el contenido cuando se lee fuera de contexto.  Este criterio afecta a usuarios con discapacidades visuales y f\u00edsicas.<\/li><\/ol>\n\n\n\n
                                        1. \u00bfTienen sentido las dos primeras oraciones de cada p\u00e1rrafo cuando se leen fuera de contexto? <\/strong>
                                          Muchos lectores de pantalla y la tecnolog\u00eda de apoyo permiten la navegaci\u00f3n saltando de un p\u00e1rrafo a otro. Cada p\u00e1rrafo de contenido debe tener oraciones tem\u00e1ticas s\u00f3lidas que describan el contenido del p\u00e1rrafo cuando se lee fuera de contexto. <\/li><\/ol>\n\n\n\n
                                          1. \u00bfLos botones se utilizan solo para completar una acci\u00f3n, como enviar un formulario? <\/strong>
                                            Los botones solo deben utilizarse para completar acciones y nunca para la navegaci\u00f3n. <\/li><\/ol>\n\n\n\n
                                            1. \u00bfLos enlaces que solo se utilizan para la navegaci\u00f3n? <\/strong>
                                              Los enlaces nunca deben usarse para completar una tarea. Esto puede causar errores en los navegadores web con lectores de voz o tecnolog\u00eda de apoyo que utilizan personas con discapacidades visuales y f\u00edsicas.<\/li><\/ol>\n\n\n\n

                                              La organizaci\u00f3n Web AIM<\/strong> hizo una versi\u00f3n de estos criterios en forma de una lista, agregando los criterios de aceptaci\u00f3n A, AA y AAA. Puedes revisarlos en su sitio web<\/a>.<\/p>\n\n\n\n

                                              Por supuesto, es posible hacer una revisi\u00f3n manual de cada uno de estos criterios, pero ser\u00eda en extremo tardado. Una manera m\u00e1s sencilla es usar una herramienta automatizada como WAVE<\/a>, tambi\u00e9n creado por Web AIM.<\/p>\n\n\n\n

                                              Para hacer un an\u00e1lisis a profundidad de una p\u00e1gina web ya existente con WAVE<\/strong>:<\/p>\n\n\n\n

                                              \"\"
                                              An\u00e1lisis de accesibilidad web con WAVE<\/figcaption><\/figure>\n\n\n\n
                                              1. Ve al sitio web de WAVE <\/strong>en https:\/\/wave.webaim.org\/<\/a> <\/li>
                                              2. Escribe la direcci\u00f3n de un sitio web ya existente en la caja de texto y avanza<\/li>
                                              3. WAVE <\/strong>mostrar\u00e1 una vista previa de la p\u00e1gina con varios iconos sobrepuestos, indicando un tema de a11y a revisar. El panel a la izquierda tiene m\u00e1s informaci\u00f3n sobre la evaluaci\u00f3n de los criterios de contenido accesible.<\/li>
                                              4. Al dar clic en uno de los iconos, se colocar\u00e1 sobre \u00e9l una caja indicando que tipo de problema de accesibilidad ha detectado. Al dar clic en \u201cReferencia<\/strong>\u201d se mostrar\u00e1 en el panel de la izquierda qu\u00e9 es lo que este error significa, por qu\u00e9 es importante y una sugerencia sobre c\u00f3mo arreglarlo para mejorar la accesibilidad de la p\u00e1gina. Al final del texto se encuentra una referencia a la recomendaci\u00f3n espec\u00edfica a la que hace referencia.<\/li>
                                              5. La opci\u00f3n de \u201cencender<\/strong>\u201d o \u201capagar<\/strong>\u201d los estilos nos da una idea m\u00e1s clara de como \u201cve<\/strong>\u201d un lector de pantalla el contenido. As\u00ed podemos revisar si el flujo del contenido tiene sentido sin el dise\u00f1o de interfaz.<\/li><\/ol>\n\n\n\n

                                                Por supuesto, hay muchas m\u00e1s herramientas para hacer una evaluaci\u00f3n de accesibilidad de un sitio web o de apps para m\u00f3viles. En el sitio de W3C <\/strong>de Herramientas para Evaluaci\u00f3n de Accesibilidad <\/a>sobre hay una lista de muchas otras herramientas, plugins y aplicaciones que se pueden usar para hacer diferentes an\u00e1lisis y evaluaciones de a11y. <\/p>\n\n\n\n

                                                Date tiempo de revisarla, entre m\u00e1s uses estas herramientas mejor comprender\u00e1s los conceptos y las posibles soluciones para hacer p\u00e1ginas m\u00e1s accesibles para todos.<\/p>\n","protected":false},"excerpt":{"rendered":"

                                                En accesibilidad debemos ser capaces de medir y analizar su implementaci\u00f3n de manera cuantitativa para poder comparar con otros sitios y para establecer metas de calidad en un dise\u00f1o. Se puede hacer una revisi\u00f3n sencilla del nivel de accesibilidad de una p\u00e1gina web utilizando herramientas de an\u00e1lisis automatizado. como Lighthouse o WAVE.<\/p>\n","protected":false},"author":1,"featured_media":637,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[72],"tags":[3,2,165,63,5,166,167],"class_list":["post-632","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-investigacion","tag-a11y","tag-accesibilidad","tag-lighthouse","tag-pruebas","tag-w3c","tag-wave","tag-wcag","entry"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2022\/05\/accessibility-testing-1.png?fit=887%2C380&ssl=1","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts\/632","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/comments?post=632"}],"version-history":[{"count":3,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts\/632\/revisions"}],"predecessor-version":[{"id":653,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts\/632\/revisions\/653"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/media\/637"}],"wp:attachment":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/media?parent=632"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/categories?post=632"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/tags?post=632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}