Mostrando entradas con la etiqueta recursos. Mostrar todas las entradas
Mostrando entradas con la etiqueta recursos. Mostrar todas las entradas

viernes, 13 de febrero de 2026

Reseña de la herramienta Silktide para monitorizar la accesibilidad en sitios web

Captura de pantalla de la herramienta Silktide. Muestra la página Objetivos. El listado de objetivos tiene las columnas: Nombre, Objetivo, Valor, Fecha del objetivo, Tendencia, Progreso y Asignados.

El objetivo de este artículo es reseñar la herramienta Silktide. La reseña es imparcial e independiente, puesto que no he recibido ninguna compensación por realizarla.

Silktide es una herramienta de evaluación y gestión de calidad web que incluye, entre otros aspectos, pruebas de accesibilidad.

Ofrece:

  • Extensión de navegador con diversas herramientas gratuitas, como la validación de accesibilidad de la página que estás visitando. Para los usuarios de pago incluye otro tipo de validaciones adicionales como, por ejemplo, la revisión de la ortografía y la gramática de la página o la localización de sus enlaces rotos.
  • Plataforma SaaS de pago que permite monitorizar sitios completos.

Por tanto, es una herramienta similar a otras como SiteImprove, herramienta que reseñé hace años en Siteimprove, herramienta para el análisis programado de nuestro portal. El objetivo del artículo no es una comparativa de herramientas, por lo que me centraré en describir sus funcionalidades, sus puntos fuertes y su margen de mejora.

Índice

Silktide, extensión de Chrome y Edge

La extensión Silktide es gratuita, está disponible en inglés para los navegadores Chrome y Edge y permite revisar una página de forma inmediata.

Este tipo de herramientas no sustituyen a una auditoría manual de accesibilidad, pero pueden ser muy útiles durante las mismas y en las revisiones preliminares.

En este sentido, la extensión de navegador Silktide me parece que es una herramienta útil y completa, entre mis favoritas, con ANDI o ARC Toolkit.

La extensión se despliega en la zona derecha de la pantalla y tiene las herramientas que voy a explicar a continuación, comentando cuáles son sus puntos fuertes y su margen de mejora.

Código y tipo de visualización

La herramienta analiza el código fuente resultante tras ejecutar los scripts, es decir, el equivalente a "Inspeccionar". Permite visualizar este HTML y localizar los elementos referenciados, aunque no lo hace mediante la herramienta para desarrolladores, que en el trabajo diario de auditoría me resulta más cómoda. Aun así, nada impide tener ambas abiertas de forma simultánea.

Captura de pantalla de la extensión Silktide en el margen derecho de una página. Se resaltan las opciones para ver el código HTML y para visualizarla simulada con diferentes dispositivos móviles.

Extensión Silktide. Opciones de mostrar HTML y visualización en dispositivos móviles.

También tiene integrada la simulación de visualización en un dispositivo móvil, en concreto, ofrece las opciones: Desktop, MacBook Air, iPad Mini, iPad Air 4, iPad Pro 11, iPhone 5 e iPhone X.

Herramientas

La extensión presenta las siguientes herramientas:

Captura de pantalla de la extensión Silktide. Muestra el listado de herramientas que se enumeran y explican tras la imagen.

Extensión Silktide. Herramientas.

  • Color Contrast: la herramienta permite validar el contraste mediante la inclusión del código de color o mediante cuentagotas. Usa el algoritmo de las WCAG, pero no incluye como alternativa el Accessible Perceptual Contrast Algorithm (APCA).
  • Alt text: listado de todas las imágenes y su texto alternativo. Se puede filtrar por las imágenes con "alt", las imágenes decorativas (con "alt" vacío) o las imágenes sin "alt". Es una lástima que no tenga en cuenta los <svg>, que tendrás que buscarlos manualmente.
  • Screen reader: opción que no solemos encontrar en otros validadores. ANDI, por ejemplo, indica lo que anunciará el lector de pantalla, pero Silktide lo verbaliza, además de mostrarlo en formato texto. No sustituye, por supuesto, al acceso con un lector de pantalla, como NVDA, JAWS o VoiceOver, pero puede ser útil a muchas personas para una validación rápida.

    Puedes usarlo con la opción de página en negro, para acceder "a ciegas". También puedes elegir diferentes voces y velocidad de habla, y tienes disponibles varios atajos. La pega es que el anuncio de los elementos (no del texto) es en inglés. En cada verbalización te avisa de si ha encontrado un error, como un enlace sin un texto que pueda anunciar.

    Lector de pantalla de la herramienta Silktide. Tiene botones de siguiente, anterior, espacio y ESC. Se muestra la verbalización del lector indicando los errores encontrados, como imagen sin texto alternativo. Hay un botón de configuración.

    Extensión Silktide. Screen Reader integrado para validación.

  • Focus order: muestra el orden en el que los elementos recibirán el foco.
  • Landmark: para consultar las regiones en las que se estructura la página (navigation, search, main, etc.).
  • Links: listado de páginas a las que se enlaza desde esta.
  • Headings: jerarquía de encabezados.
  • Impaired vision: simulador de problemas de visión, como cataratas, miopía, visión doble, pérdida de visión periférica o pérdida de visión central.
  • Color blindness: simulador de diferentes problemas de ceguera al color.
  • Dyslexia: esta herramienta desordena y cambia las letras; no es así como percibe exactamente el texto una persona con dislexia, pero te ayuda a ponerte en su lugar.
  • Learn about accessibility: acceso a documentación sobre accesibilidad.
  • View full website report: acceso a la herramienta de monitorización para usuarios registrados.

Validaciones

La herramienta incluye diferentes tipos de validaciones. La validación de accesibilidad es gratuita, pero las demás solo están disponibles si eres usuario registrado de la plataforma SaaS de pago.

Captura de la extensión Silktide. Muestra el resumen de 5 tipos de revisiones: Content, Accessibility, Marketing, UX, Privacy.

Extensión Silktide. Tipos de validaciones.

La revisión de accesibilidad es una validación automática según los estándares WCAG 2.0, 2.1 y 2.2 en sus niveles A, AA y AAA. Los resultados se pueden filtrar por aquellos que la página pasa, falla o que necesitan una verificación manual.

Como todos los validadores automáticos, valida solo ciertos criterios y solo ciertas técnicas. Recuerda que siempre deben comprobarse manualmente los resultados, porque pueden darse falsos positivos o falsos negativos.

Por ejemplo, en esta herramienta he detectado falsos negativos en el criterio "2.4.11 Focus not obscured", que se da por pasado (no como pendiente de revisión manual) en páginas que, sin embargo, tienen un menú fijo que tapa el foco de teclado.

Los demás tipos de validaciones son:

  • Content: revisa, entre otras cosas:
    • faltas de ortografía y gramática;
    • número de palabras en la página;
    • enlaces rotos;
    • si se explica qué enlaces se abren en ventana nueva;
    • el meta description;
  • UX: analiza, entre otros aspectos:
    • si la página tiene desplazamiento horizontal en pantallas pequeñas;
    • si el texto se leerá de forma cómoda en pantallas pequeñas (el texto con un tamaño de fuente por debajo de 11px se marca como fallido);
    • imágenes que no se cargan;
    • errores o advertencias de JavaScript;
    • la presencia de un favicon.
  • Privacy: revisa, entre otros aspectos:
    • si se tiene aviso de cookies;
    • si se tiene política de privacidad;
    • las tecnologías utilizadas que pueden ver, controlar o comprometer la privacidad de los visitantes, para que se revise que están cubiertas por la política de privacidad.
  • Marketing: algunas validaciones son comunes a "Content" y otras específicas, como si hay un sitemap o si se está usando una herramienta de analítica.

Silktide, monitorización de sitios web

Silktide también dispone de una plataforma SaaS de pago que permite monitorizar sitios completos y que está disponible en español. A continuación, explico sus principales funcionalidades, así como sus puntos fuertes y su margen de mejora.

Pantalla principal y menú

En la pantalla principal de la aplicación tenemos el acceso a nuestros sitios web:

Captura de pantalla de la herramienta Silktide. Muestra la página Sitios web con el listado de sitios web. A continuación de la imagen se listan las opciones de menú disponibles.

Silktide. Pantalla principal de la aplicación.

Las opciones del menú principal son:

  • Sitios web, para volver a la página principal.
  • Inspeccionar, para validar una página o PDF concretos.
  • Tareas, acceso al listado de tareas con las personas asignadas y su prioridad; al listado de anotaciones y al listado de objetivos, de los que hablo más adelante.
  • Academia, con diversos recursos.
  • Notificaciones.
  • Perfil.

Página principal de un sitio web y menú

Cuando accedes a uno de tus sitios web, tienes un dashboard con información por defecto, pero también existe la posibilidad de crear dashboards personalizados.

Captura de pantalla de la herramienta Silktide. Muestra la página inicial de un sitio web con el resumen por tipo de validación y la tabla con la lista de comprobaciones.

Silktide. Pantalla principal de un sitio web.

En el menú tienes acceso a los diferentes tipos de validaciones que hemos visto en la extensión: contenido, accesibilidad, marketing, experiencia de usuario, privacidad y políticas. Además, tienes el acceso al listado de anotaciones, de objetivos y al inventario, que voy a explicar a continuación.

Inventario

El inventario incluye el listado de:

  • páginas
  • PDF
  • idiomas
  • enlaces
  • tecnologías
  • favicons del sitio

En el listado de páginas me resulta muy útil que se incluya la captura de pantalla de todas las páginas en escritorio y móvil. Sin embargo, echo en falta que no se listen también los archivos multimedia, JS y CSS.

Anotaciones, vista de página e integración de la validación manual

Las anotaciones se añaden desde la vista de página, donde tienes la opción de ir pasando por los diferentes problemas detectados en ella. Esta vista también dispone de otras funcionalidades:

  • simulaciones (dislexia, problemas de visión, motor de búsqueda)
  • ocultar partes de la página
  • consultar su información: orden del foco, enlaces, secciones, encabezados, cabeceras HTTP, etc.
  • reevaluar
  • aprobar la página
  • incluir comentarios

Me centro en las anotaciones, que me parecieron una buena idea, pensando en aquellas que realizas cuando revisas manualmente una página y reportas un error.

Cuando creas una anotación, le asignas una persona, le das una prioridad e indicas su estado.

Captura de pantalla de la herramienta Silktide. Muestra la página de análisis de una página web. Se está creando una anotación relativa a una zona de la página. A continuación de la imagen se listan las opciones de las que dispone.

Silktide. Alta de una anotación.

Sin embargo, las anotaciones no se integran en las tareas y el listado de comprobaciones, ni pueden asociarse a un criterio de las WCAG. Solo se visualizan desde el menú Anotaciones.

Por otro lado, tenemos el listado de Comprobaciones, por una parte el listado de comprobaciones automáticas y, por otra, el listado de las comprobaciones que necesita verificación manual (denominado "Controles asistidos"). Es otra manera de gestionar los errores que detectas en la revisión manual, pero estás limitada al listado que se muestra:

Captura de pantalla de la herramienta Silktide. Muestra la página Comprobaciones. Hay una pestaña para las comprobaciones automáticas y otra para los controles asistidos.

Silktide. Comprobaciones > Controles asistidos.

Puedes asignar una de las comprobaciones asistidas a una persona y poner comentarios a nivel de comprobación y de página.

En resumen, creo que la integración de los resultados detallados de una auditoría manual podría mejorarse mucho para resultar más práctico y flexible.

Objetivos

Los objetivos son bastante útiles. Los creas indicando el sitio web, la fecha en la que quieres alcanzar el objetivo, las personas asignadas y la métrica del objetivo, escogida de un listado muy extenso.

Captura de pantalla de la herramienta Silktide. Muestra la página Objetivos. El listado de objetivos tiene las columnas: Nombre, Objetivo, Valor, Fecha del objetivo, Tendencia, Progreso y Asignados.

Silktide. Objetivos

Listado de tareas

El listado de tareas se puede filtrar por sitio web, persona asignada, etiquetas o categoría. Por ejemplo, en accesibilidad se puede filtrar por nivel, tipo de discapacidad, PDF o accesibilidad móvil:

Captura de pantalla de la herramienta Silktide. Muestra la página Listado de tareas. El listado de tareas se puede filtrar por persona asignada, sitio web, categoría o etiquetas. Se muestra las opciones de filtro por la categoría accesibilidad, que incluye filtro por nivel, por tipo de discapacidad o por accesibilidad móvil.

Silktide. Tareas

Sería muy interesante que las tareas estuvieran categorizadas para permitir los siguientes filtros, que no están disponibles actualmente:

  • tipos de contenidos: formularios, enlaces, etc.
  • perfil profesional: diseñador, desarrollador, editor de contenido, etc.
  • pauta y criterio de las WCAG (ahora solo se puede usar para ello el buscador).

Página principal de accesibilidad

La página inicial de "Accesibilidad" muestra una visión global de las puntuaciones por nivel y a lo largo del tiempo, de los problemas comunes y de los problemas por tipo de discapacidad (visual, auditiva, motora y cognitiva).

Captura de pantalla de la herramienta Silktide. Muestra la página principal de Accesibilidad. El dashboard tiene los porcentajes por nivel; los errores por tipo de discapacidad; los tipos de problemas más habituales y otras estadísticas como el promedio de errores por página.

Silktide. Pantalla principal de Accesibilidad

Según el sitio, podría mostrarse también el "Benchmark", es decir, la puntuación comparada con webs del mismo sector. El "Silktide Index" es una tabla de clasificación que muestra cómo se comparan las organizaciones de diversas industrias en términos de accesibilidad. Puedes consultar más en "¿Qué es el índice Silktide?" o acceder a la web "Compare websites for accessibility" para probarlo.

Index Silktide de la web de la Universidad de Oxford. Muestra una comparativa con 125 páginas del mismo sector, con una puntuación de 76%. Incluye diferentes recomendaciones de mejora.

Página de resultado de Silktide Index

Las opciones de menú del apartado "Accesibilidad" son:

  • Listado de comprobaciones con acceso a las instancias.
  • Listado de páginas con su puntuación.
  • Listado de PDF y su puntuación.
  • Móvil, con el listado de páginas no responsivas.
  • Directrices, con el listado de criterios de las WCAG (no se incluyen los criterios específicos de la EN301549) y el número de errores asociados a cada uno.
    Captura de pantalla de la herramienta Silktide. Muestra la página Directrices con el listado de todos los criterios de las WCAG y el número de errores asociados a cada uno.

    Silktide. Directrices

    Aprovecho para recordar que no se puede usar este tipo de información para cumplimentar un informe IRA o un ACR (Accessibility Conformance Report), ya que es necesario para ello una evaluación manual experta de todos los criterios.

  • Auditorías manuales, para contratar una revisión manual.
  • Decisiones: para revisar o deshacer las decisiones tomadas, como qué problemas se ignoraron o se aprobaron.

Cada tipo de problema encontrado tiene su página, con la prioridad, el progreso, las personas asignadas, las estadísticas, el historial y la posibilidad de comentar o de ignorar la comprobación.

Captura de pantalla de la herramienta Silktide. Muestra la página de una comprobación, en concreto, la de páginas sin un título apropiado. Incluye una estadística con el número de incidencias a lo largo del tiempo. También un listado de páginas con este error, y el acceso a la discusión y al historial.

Silktide. Página de una comprobación

Otros tipos de validaciones

Además de la validación de accesibilidad, tenemos las validaciones que he comentado en la extensión:

  • Contenido: incluye el análisis de ortografía y gramática, disponible en español y catalán entre otros idiomas (idiomas soportados por Silktide); la legibilidad del texto (si es fácil de entender), pero solo disponible en inglés; el listado de enlaces rotos; la optimización de imágenes y comprobaciones relacionadas con el SEO.
  • Marketing: validaciones relacionadas con las palabras clave, los anuncios, la cantidad de información o la optimización.
  • Experiencia de usuario: validaciones relacionadas con el acceso móvil, el flujo de usuarios, los fallos de funcionalidad (imágenes o CSS que faltan, errores JS, etc.), detecta si el sitio está caído, o los Web Vitals de Google.

Hay dos tipos de validaciones adicionales que no están en la extensión.

  • Políticas, esto es, las validaciones adicionales aplicadas. En la configuración hay algunas políticas predefinidas que se pueden añadir a la revisión, por ejemplo, revisar el uso de mayúsculas o de palabras específicas. También se pueden crear políticas personalizadas.
  • Privacidad, con el inventario de elementos relacionados con la privacidad: números de teléfono y correos electrónicos incluidos en el portal, muy útil en sitios grandes gubernamentales; así como el listado de cookies, de tecnologías y de campos de formulario del portal.

Configuración

La herramienta se puede integrar con diferentes CMS (consultar lista completa), como Drupal, AEM, WordPress, Liferay, entre otros muchos. Además, permite integraciones personalizadas a través de API.

A nivel de configuración, se puede indicar cada cuántos días se reevalúa el sitio y hay reglas para personalizar qué páginas del sitio se incluyen o no.

También se pueden crear agrupaciones de páginas (secciones), que actúan como sitios web por sí mismas, esto es muy útil en sitios muy grandes.

Ayuda y soporte

La aplicación tiene soporte 24/7 ilimitado mediante un chat para hablar con un agente IA o con una persona real, y dispones de un teléfono y el correo electrónico de tu gestor asignado.

La herramienta dispone de ayuda relacionada con la propia herramienta y con la accesibilidad. En relación con la ayuda relativa a la accesibilidad, tienes diferentes recursos, pero también ayuda contextual:

  • En las comprobaciones hay explicaciones sobre el criterio evaluado, a veces acompañadas de un vídeo de apoyo.
  • En la página del error tienes la opción "Preguntar a la IA", que hoy en día es casi imprescindible:
Captura de pantalla de la herramienta Silktide. Muestra la página de un error con la ayuda IA desplegada. Hay tres niveles de explicación: no técnico, moderadamente técnico y desarrollador web.

Silktide. Página de un error con chat de ayuda

En las respuestas de la IA me ha gustado que tienes un desplegable para seleccionar que la explicación sea: no técnica, moderadamente técnica o para desarrolladores web; pero me ha parecido un poco lenta. Tal y como esperarías, te ofrece diferentes alternativas y se ofrece a darte el código que lo arregle.

Recuerda que siempre debes verificar si es un falso negativo o positivo y supervisar el código que te ofrece. Son una ayuda muy útil, no un sustituto.

Por ejemplo, en un error de dos enlaces con el mismo texto en los destacados de noticias (el típico "leer más"). Me ha explicado bien el error y las posibles soluciones: mejorar el texto de enlace; mejorar el texto de enlace, pero ocultar la parte añadida; o usar aria-label. También me ha advertido que usar el title para la aclaración no sería fiable.

Todo muy correcto, la explicación y el código. Pero no me ha ofrecido la opción de aria-labelledby, mucho más adecuada que la de aria-label en este contexto.

Informes

Uno de los aspectos más débiles de la herramienta es que no genera informes, solo se permite la exportación de las tablas en formato CSV.

Usabilidad y accesibilidad de la herramienta

La herramienta me ha resultado, personalmente y para mi perfil, intuitiva de usar.

No he realizado un análisis exhaustivo de accesibilidad de la herramienta, y esta tampoco dispone de una declaración de conformidad o ACR. Sí puedo decir que, en general, se nota que se ha tenido en cuenta, aunque no está exenta de problemas.

Por ejemplo, me resultó cómodo acceder con el teclado, pero tuve algún problema con el lector de pantalla. Hay un error muy sencillo de solucionar, pero muy molesto con el lector, y es que la definición del idioma a nivel de página es el inglés y, por tanto, el lector me lee por defecto el texto español con fonética inglesa.

También tuve problemas con las notificaciones toast, que no están etiquetadas como mensajes de estado con ARIA.

Precio

La extensión es gratuita, pero las validaciones adicionales son solo para los usuarios registrados de la plataforma SaaS, de pago.

El precio de la plataforma de monitorización depende de diferentes factores, no puedo dar cifras concretas porque no son públicas, es necesario solicitar un presupuesto, pero son similares al de otras herramientas disponibles en el mercado.

Conclusiones

Extensión de navegador

Los puntos fuertes de la herramienta, a mi parecer, son:

  • Interfaz clara y cómoda.
  • Útil para revisiones rápidas, apoyo en auditorías manuales y formación.
  • Conjunto amplio de herramientas y simuladores de discapacidad, que incluye un lector de pantalla, poco habitual en estas herramientas.
  • Versión gratuita de la herramienta.
  • Validaciones complementarias útiles, como la revisión de ortografía, el número de palabras en la página o los enlaces rotos, aunque recuerdo que estas son opciones de pago.

Los puntos a mejorar según mi criterio serían:

  • Disponer de una versión en español, incluida la simulación del lector de pantalla, que actualmente anuncia los elementos en inglés.
  • Incluir los SVG en la validación de las imágenes.
  • Revisión de los falsos negativos (extensión y plataforma de monitorización) en criterios que se dan por validados.

Sería muy interesante, desde mi punto de vista:

  • Que se incluyera el algoritmo APCA como una opción en el validador de contraste.
  • Usar la herramienta para desarrolladores para mostrar el código HTML, en vez de una ventana independiente.
  • Herramienta para listar determinadas etiquetas HTML usadas en la página, a elegir de un listado (br, table, ul, svg, etc.) Esta opción la tiene ARC Toolkit y es muy útil.

Plataforma de monitorización

Los puntos fuertes de la herramienta, a mi parecer, son:

  • Monitorización continua de sitios completos, con visión global y evolución en el tiempo.
  • Más allá de la monitorización de accesibilidad, opciones de gestión de calidad útiles y complementarias a la accesibilidad y las auditorías, como la revisión ortográfica, los inventarios o el listado de capturas de pantalla.
  • Soporte de gestión de tareas, objetivos y seguimiento.
  • Integración con el CMS y opciones de configuración de secciones para sitios grandes.
  • Creación de políticas personalizadas.
  • El soporte y la ayuda IA integrada de calidad, con respuesta personalizada según perfil.

Los puntos críticos a mejorar según mi criterio serían:

  • Incluir la generación y personalización de informes.
  • Corregir la accesibilidad de la herramienta y tener disponible un ACR actualizado.
  • Mejorar la gestión de anotaciones y controles asistidos para hacer más efectiva la gestión de la validación manual, que al final es imprescindible y más importante en la práctica que la automática.

Sería muy interesante, desde mi punto de vista:

  • Disponer de más tipos de categorización y filtro de los problemas y tareas, como tipo de contenidos (formularios, enlaces, etc.), perfil profesional (diseñador, desarrollador, editor de contenido), filtro concreto por principio, pauta y criterio.
  • Incluir en los inventarios el contenido multimedia, CSS y JS.
  • Añadir los requisitos adicionales de la EN 301 549, que es el estándar a cumplir en Europa.

Agradecimientos

La reseña es imparcial e independiente, puesto que no he recibido ninguna compensación por realizarla, pero agradezco a Silktide la resolución por su parte de todas las dudas que me han surgido mientras trabajaba con la herramienta para poder elaborar esta reseña.

Este artículo se ha elaborado y redactado sin el uso de herramientas IA, solo se han usado para la revisión final de la ortografía.

Artículos relacionados

jueves, 4 de septiembre de 2025

Criterio 2.5.8 AA de las WCAG. Herramientas gratuitas para su evaluación manual

Criterio 2.5.8 de las WCAG 2.2 sobre el tamaño mínimo de 24 por 24 píxeles de los elementos de interacción

El criterio 2.5.8 AA "Tamaño del área de interacción (mínimo)" es un criterio de conformidad de las WCAG 2.2 que establece que el tamaño mínimo del área de interacción debe ser de al menos 24 por 24 píxeles CSS.

¿Cómo podemos validar manualmente este criterio? En este artículo reseño diversas herramientas gratuitas que nos pueden ayudar. Recuerda siempre verificar el resultado para evitar falsos positivos o negativos.

Muchas gracias a los autores por compartirlas desinteresadamente. Si queréis recomendar otras similares, podéis hacerlo en los comentarios.

Índice

Circles Bookmarklet de Emiliano Montani

Tipo de herramienta: Bookmarklet

Autor: Emiliano Montani

Enlace a la herramienta: Circles Bookmarklet

Descripción

La herramienta muestra un círculo de 24 píxeles de diámetro dibujado desde el centro de los elementos de interacción.

Captura de un pie de página con listados de enlaces. Cada enlace tiene un círculo rojo desde su centro de 24 por 24 píxeles. El círculo está entre dos rectas paralelas, una tangente en la parte superior y otra tangente en la parte inferior. Esas rectas no son líneas continuas, sino que están formadas por pequeñas rayas que se repiten de manera alternada en blanco y negro

La herramienta muestra el círculo solo en los elementos interactivos menores de 24 píxeles, teniendo en cuenta su área clicable.

Se agrega una línea punteada en blanco y negro en la parte superior e inferior de los círculos, que resulta muy útil para detectar la proximidad de los elementos y detectar si colisionan. Además, como el punteado es blanco y negro, ofrece suficiente contraste sobre cualquier fondo.

Tengo que decir que se ha convertido en mi favorita.

Montani incluye también una versión de la herramienta para evaluar el criterio 2.5.5 de nivel AAA. En este caso, la herramienta indica cuántos elementos de interacción menores de 44 x 44 píxeles ha encontrado y establece el círculo en color amarillo (hay que advertir que menos perceptible que el rojo):

Mensaje de alerta indicando que se han encontrado 214 elementos menores de 44 píxeles

Varios iconos de una página web con un círculo amarillo alrededor

Montani también tiene otro bookmarklet muy útil: Focus 2.4.7 - (Foco visible)

Muchas de las páginas web que analizo no tienen el foco de teclado visible, porque se ha deshabilitado con el estilo outline:0 o outline:none. Además de ser un error de accesibilidad, como auditora, me ralentiza mucho revisar el acceso por teclado.

El bookmarklet Focus 2.4.7 - (Foco visible) añade un foco visible a todos los elementos que reciben el foco de teclado. Eso te ahorra tener que deshabilitar estos estilos en la inspección de código para poder auditar qué elementos están o no recibiendo el foco.

Por supuesto, no solo es útil para los auditores, también puede ser utilizado por las personas que acceden solo con el teclado.

Existen otros bookmarklet similares a Focus 2.4.7 - (Foco visible) como: Force :focus outline bookmarklet de Patrick H. Lauke.

Target size Bookmarklet de Steve Faulkner

Tipo de herramienta: Bookmarklet

Autor: Steve Faulkner

Enlace a la herramienta: target size Bookmarklet

Descripción

Esta herramienta identifica los elementos interactivos, calcula el centro del elemento y dibuja desde dicho centro un círculo de 24 por 24 píxeles. Hasta aquí, igual que la de Montani.

Sin embargo, a diferencia de la herramienta anterior, se muestran los círculos en todos los elementos de interacción, diferenciando los que tienen un área de interacción mayor o menor de 24 píxeles por el color.

Captura de un pie de página con listados de enlaces. Cada enlace tiene un círculo desde su centro de 24 por 24 píxeles. Algunos enlaces tienen un círculo azul y otros un círculo verde.

Personalmente, me resulta incómoda de usar.

Las desventajas que le veo a la herramienta de Steve Faulkner son:

  • tengo que memorizar el código de color,
  • no tengo las líneas punteadas que me ayudan a comprobar si colisionan,
  • el color de los círculos no suele tener contraste con el fondo,
  • los círculos verdes tienen un borde sólido, pero esto no resuelve los problemas de contraste entre los dos tipos de círculos, por lo que, en la práctica, la información se acaba transmitiendo solo por el color.

Con la herramienta de Montani encuentro los problemas con mayor rapidez y facilidad. La Steve Faulkner me resulta más complicada de interpretar y menos perceptible, lo cual será una barrera importante para muchas personas.

Por último, comentar que cuando se activa la herramienta de Faulkner se muestra un mensaje indicando cuántas superposiciones hay. También les agrega el atributo aria-description="overlaps" para encontrarlas en la inspección de código.

Mensaje de alerta indicando que se han encontrado 6 superposiciones

24×24 Pixel Cursor Bookmarklet de Adrian Roselli

Tipo de herramienta: Bookmarklet

Autor: Adrian Roselli

Enlace a la herramienta: 24×24 Pixel Cursor Bookmarklet

Descripción

La herramienta de Adrian Roselli es diferente a las de Emiliano Montani y Steve Faulkner. En este caso, el puntero de ratón se convierte en un círculo que puedes situar encima de los elementos.

En mi caso, la uso para realizar alguna comprobación rápida y puntual.

Tres tipos de puntero de ratón circulares de 24 por 24 píxeles.

Tiene diferentes variantes: con forma de círculo y con forma de cuadrado.

También dispone de una página de prueba con diferentes elementos de ejemplo para validar.

Curtis Wilcox tiene variantes del cursor circular de este Bookmarklet, puedes probarlas y comprobar cuál te resulta más visible con diferentes fondos: 24px Circle Cursor Bookmarklet variants.

Por último, Adrian Roselli tiene una versión para el criterio 2.5.5 AAA que, como he indicado, exige un tamaño mínimo de 44 por 44 píxeles: CodePen Home 44×44 Pixel Cursor Bookmarklet. Es igual que la Jared Smith (44x44 Pixel Cursor Bookmarklet) pero la Roselli se desactiva con ESC.

Stark

Hay diversos validadores autómaticos que revisan también el criterio 2.5.8, como las extensiones Stark, AXE y Lighthouse.

Es muy importante verificar los resultados, ya que hay errores que no detectan.

Stark

Captura de una web con unos botones muy pequeños. La herramienta Stark los resalta con círculo e indica que son muy pequeños.

Stark: errores en el criterio 2.5.8 y 2.5.5. Pulsa en la imagen para verla más grande.

AXE

Resultado del validador AXE. Encuentra errores en el criterio 2.5.8 de las WCAG 2.2. Indica que hay varios elementos de interacción menores de 24 x 24 píxeles. Pulsa en la imagen para verla más grande.

AXE: error en el criterio 2.5.8. Pulsa en la imagen para verla más grande.

Lighthouse

Resultado del validador Lighthouse, indica el error Las áreas táctiles no tienen un tamaño o un espaciado suficientes.

Lighthouse: error en el criterio 2.5.8. Pulsa en la imagen para verla más grande.

El error de Lighthouse tiene como referencia la misma regla de axe-core ("All touch targets must be 24px large, or leave sufficient space").

Inspección de código

Tipo de herramienta: Inspección de código de Chrome

Descripción

Por último, siempre nos queda la inspección de código:

Información sobre un enlace. Se muestra que su altura es de 31.8 píxeles

Inspección de código en Chrome

Artículos relacionados

lunes, 21 de abril de 2025

Free Book Launch: Web Accessibility. WCAG 2.2 Made Easy. Revised and Expanded Edition in English (2025)

Web Accessibility. WCAG 2.2 made easy

Authors: Olga Revilla Muñoz and Olga Carreras Montoto

Pages: 412 (PDF version)

Language: English.

Format: Accessible PDF (free) - Amazon Print on Demand.

Publication date: 2025

Download free PDF: Web Accessibility. WCAG 2.2 made easy. Accessible PDF version (12MB).

Buy in paperback: Web Accessibility. WCAG 2.2 made easy. Amazon Print on Demand.

Download the 2024 Spanish version (free): Accesibilidad Web. WCAG 2.2 de forma sencilla. Versión 2024 en español.

You can check more book reviews at: "Libros y reseñas"

New features in the 2025 version

In 2024, we published "Web Accessibility. WCAG 2.2 Made Simple" with 336 pages. This year, we are publishing the revised English version, which has 412 pages.

The book has been revised and translated, includes reviews of new tools, and features a new chapter titled "Implementing Web Accessibility Policies".

What will you learn?

The Web Content Accessibility Guidelines aim to create a more accessible web. This book explains how to make websites accessible in a style and language that project managers, developers, designers, and content creators understand, both theoretically and practically.

With it, you will learn, step by step:

  • What the Web Content Accessibility Guidelines (WCAG) 2.2 from W3C (2023 update) are and how to apply them.
  • How to plan an accessible interaction.
  • How to design an accessible webpage.
  • How to create a conformity statement and templates used in Europe and the United States.
  • How to program accessible Single Page Applications (SPA).
  • How to create accessible websites from the start with accessible design systems.
  • How to care for language through clear communication, plain language, and inclusive language.
  • How to implement ARIA, the set of special accessibility attributes.
  • How to carry out evaluations and audits with the WCAG-EM methodology.
  • How to create accessible PDF documents.
  • How to implement a web accessibility policy within an organization.

It also includes chapters where you can find:

  • Tools for validating web document accessibility.
  • Summaries and diagrams of the guidelines.
  • Glossary of technical terms.

In summary, the best book to get introduced into the web accessibility area, no matter if you are a developer, a designer, or a project manager who needs to integrate web accessibility into your projects.

Table of contents

  • Introduction to Web Accessibility
  • Implementing Web Accessibility policies
  • The WCAG Guidelines
  • How to make an accessible website
  • Assessing Web Accessibility with WCAG-EM
  • Principle 1. Perceivable
  • Principle 2. Operable
  • Principle 3. Understandable
  • Principle 4. Robust
  • Accessible PDF documents
  • ARIA, the ally of accessible HTML
  • Accessible Single Page Applications
  • Accessible Design Systems
  • Caring for the words
  • Validation tools
  • Work tools
  • Summaries and Diagrams

Errata list

We have detected an error in the English edition of the book:

  • On page 349, the Bridge PCA link (https://www.myndex.com/BPCA/) is currently unavailable. In the meantime, you can access the APCA tool (https://apcacontrast.com/). Other tools: APCA tools

Herramienta relacionada

Otros libros

Artículo relacionado

miércoles, 27 de diciembre de 2023

AuditTool WCAG 2.2. Herramienta para auditorías de accesibilidad de acuerdo a las WCAG 2.2

Gráficas de cumplimiento de las WCAG 2.2 generadas con AuditTool WCAG 2.2

Ya podéis descargar la nueva versión de mi herramienta gratuita, adaptada ahora a las WCAG 2.2.

Audit Tool WCAG 2.2 de Olga Carreras

AuditTool WCAG 2.2 es una excel que:

  • permite ir registrando los datos obtenidos durante la revisión de accesibilidad de un sitio web de acuerdo a las WCAG 2.2
  • genera automáticamente gráficas, estadísticas y tablas resumen de cumplimiento e incumplimiento de la muestra completa, pero también detalladas por página, nivel (A, AA), criterio de conformidad o principio (perceptible, operable, comprensible y robusto). Además, incluye una comparativa del cumplimiento de la muestra respecto a las WCAG 2.0 y las WCAG 2.1

Descarga de AuditTool WCAG 2.2

Para rellenar e interpretar correctamente los resultados de la excel puedes consultar el Manual de ayuda.

Versión WCAG 2.2 en español (15 páginas de muestra) (NUEVO) (gratuita)

AuditTool WCAG 2.2 (15 páginas de muestra), archivo excel (.XLSX) de 2 MB, en español, gratuita

Es una versión operativa. Si necesitas una versión desprotegida que te permita personalizar el alias de las páginas, el aspecto de las gráficas generadas o cualquier otra personalización, puedes ponerte en contacto con Olga Carreras.

Versión WCAG 2.2 en español (30 páginas de muestra) (NUEVO)

AuditTool WCAG 2.2 (30 páginas de muestra), archivo excel (.XLSX) de 2 MB, en español

Esta versión tiene todas las celdas protegidas. Si te interesa la versión desprotegida, puedes ponerte en contacto con Olga Carreras.

Descarga de versiones anteriores

AuditTool WCAG 2.1 en español (gratuita)

Audit Tool WCAG 2.1, archivo excel (.XLSX) de 1,5 MB, en español

AuditTool WCAG 2.1 (english version) (gratuita)

Audit Tool WCAG 2.1, archivo excel (.XLSX) de 1,5 MB (english version)

Versión anterior WCAG 2.0 (gratuita)

Audit Tool WCAG 2.0, archivo excel (.XLSX) de 161 KB.

Descarga de otras herramientas

Zona de descargas de Usable y accesible

AuditTool WCAG 2.2 es una herramienta para las personas que evalúan la accesibilidad de portales web y elaboran informes con los resultados. Las tablas de resultados y las gráficas que genera la herramienta son especialmente útiles para el informe ejecutivo y estratégico, y para la presentación de resultados, pero además ayudan a:

  • comparar en el tiempo los resultados de distintas evaluaciones de un mismo sitio;
  • comparar los resultados de la evaluación de un sitio web con la evaluación de otros sitios o de otra muestra diferente de páginas del mismo sitio web;
  • identificar con rapidez cuáles son los criterios de conformidad y las páginas que presentan más problemas;
  • comparar el nivel de cumplimiento de un sitio web respecto a las WCAG 2.2 frente al nivel de cumplimiento respecto a versiones anteriores (WCAG 2.1 y WCAG 2.0), y de esto modo conocer el esfuerzo necesario para cumplir con la nueva versión del estándar.

Conoce las novedades de las WCAG 2.2 (artículo de Olga Carreras)

Manual de Ayuda de AuditTool WCAG 2.2

¿Qué es y para qué sirve?

Es una excel que permite ir registrando los datos obtenidos durante una revisión o una auditoría de accesibilidad de un portal web de acuerdo a las WCAG 2.2

La herramienta genera automáticamente gráficas, estadísticas y tablas resumen de cumplimiento e incumplimiento de la muestra completa, pero también detalladas por página, nivel (A, AA), criterio de conformidad y principio (perceptible, operable, comprensible y robusto). Además, incluye una comparativa del cumplimiento de la muestra respecto a las WCAG 2.0, las WCAG 2.1 y las WCAG 2.2

En las hojas iniciales se registran los datos generales de la auditoría y las páginas de la muestra, según se define en la Metodología de Evaluación de Conformidad con la Accesibilidad en sitios Web (WCAG-EM) del W3C. Por ejemplo, permite definir las páginas de la muestra que actuarán como muestra de control.

Descripción detallada

La herramienta AuditTool es una excel de 10 hojas que creé para mi uso personal, pero que comparto en el blog desde comienzos del 2012.

A continuación, describo cada una de las hojas de la excel:

Hoja "1. Datos generales"

Pantallazo de la primera hoja de la excel Datos generales. Permite introducir los datos que se van a enumerar a continuación.

Hoja "1. Datos generales" (ver imagen en grande)

La primera hoja de la excel solicita información general sobre el sitio a evaluar:

  • Cliente: cliente para el cual se está haciendo la evaluación.
  • Nombre del sitio: identificación del sitio o aplicación web que estamos evaluando.
  • Alcance de la evaluación: tiene que ser una definición no ambigua que permita determinar sin lugar a dudas si una página o contenido está o no dentro del alcance de la evaluación. Por ejemplo, "todas las páginas y contenidos de la parte pública de la web Usable y accesible, en el dominio http://www.usableyaccesible.com"
  • Periodo de revisión: periodo de tiempo durante el cual se ha realizado la evaluación.
  • Evaluador: persona que realiza la evaluación.
  • Nivel evaluado: A o AA. Es muy importante rellenar este dato, puesto que las estadísticas se calculan en base al nivel indicado.
  • Soporte de accesibilidad: dispositivos, sistemas operativos, navegadores y productos de apoyo que deben ser soportados por el sitio o aplicación web que se está evaluando.
  • Tecnologías compatibles con la accesibilidad: tecnologías compatibles con la accesibilidad de las que depende el sitio, por ejemplo, HTML5, CSS, WAI-ARIA, SVG, PDF. Comprender el concepto "compatible con la accesibilidad (accessibility-supported) de las WCAG"

Hoja "2. Páginas de la muestra"

Pantallazo de la segunda hoja de la excel Páginas de la muestra. Permite introducir los datos que se van a enumerar a continuación

Hoja "2. Páginas de la muestra" (ver imagen en grande)

En la segunda hoja de la excel se nos solicita información sobre las páginas del sitio que componen la muestra a evaluar:

  • Número de páginas de la muestra: según la versión de la herramienta puede ser de 1-15 páginas o de 1-30 páginas, según la versión de la excel. Es muy importante rellenar este dato puesto que las estadísticas se calculan en base al número de páginas indicado.
  • Alias: es el nombre que le damos a cada página de la muestra para identificarla con más claridad. El alias que le demos a la página será el que automáticamente se le asigne en las tablas y gráficas de resultados de todas las hojas. Se puede modificar en cualquier momento, si la excel está desprotegida, y las hojas se actualizarán en consecuencia para reflejar el cambio. Se recomienda que sea un nombre muy breve: "Home", "Búsqueda", etc.
  • URL: indicamos la URL de cada página de la muestra.
  • ¿Página de control?: la metodología WCAG-EM del W3C indica que se deben incluir en la muestra páginas al azar como muestra de control. Por ejemplo, en una muestra de 15 páginas, 2 serían páginas seleccionadas al azar. Si no estás trabajando con muestra de control no pasa nada, indica que ninguna de tus páginas es una página de control.

Hoja "3. Evaluación Nivel A"

Tercera pestaña de la excel. Se describe a continuación.

Hoja "3. Evaluación Nivel A" (ver imagen en grande)

En esta hoja se listan todos los criterios de conformidad de nivel A de las WCAG 2.2 (se identifican los criterios que se incluyeron nuevos en las WCAG 2.1 y los que se han incluido nuevos en las WCAG 2.2). Por cada uno de los criterios tenemos el listado de las páginas de la muestra.

Tenemos que seleccionar por cada página, mediante un desplegable (columna "¿Cumple?"), uno de los siguientes valores:

Desplegable con los valores si, no, no se aplica

Hoja "3. Evaluación Nivel A". Desplegable asociado a cada página (ver imagen en grande)

  • : para indicar que la página cumple con ese criterio de conformidad.
  • No: para indicar que la página no cumple con ese criterio de conformidad.
  • No se aplica: cuando el criterio de conformidad no se aplica a la página. Por ejemplo, si la página no incluye vídeos, no se aplicarán los criterios relacionados con el contenido multimedia.

En los resultados tendremos columnas separadas para reflejar los resultados teniendo en cuenta los "no se aplica" y sin tenerlos en cuenta. En las gráficas generales de cumplimiento e incumplimiento (como se indica siempre en la excel) no se contabilizan los "no se aplican". Es decir, si por ejemplo en el nivel A, 10 criterios se cumplen, 10 no y 5 no se aplican, el porcentaje de cumplimiento es del 50% para el nivel A, sin contabilizar los "no se aplican".

En función de los datos introducidos se rellena automáticamente el campo "Muestra completa" que indica si la muestra en su conjunto cumple con el criterio.

En un criterio, cada página de la muestra tiene el dato Sí (en 8 páginas), No (en 5 páginas), y No aplica (en 2 páginas). Al final, el campo Muestra completa indica No.

Hoja "3. Evaluación Nivel A". Campo "Muestra completa" de un criterio de conformidad (ver imagen en grande).

El valor del campo "Muestra completa" de cada criterio se cumplimenta siguiendo estas pautas:

  • si alguna de las páginas de la muestra no cumple el criterio de conformidad, la muestra en su conjunto no cumple ese criterio;
  • si el criterio de conformidad "no se aplica" en todas las páginas de la muestra, el criterio "no se aplica" en la muestra completa;
  • si todas las páginas cumplen el criterio de conformidad (aunque en algunas se haya marcado "no se aplica"), la muestra en su conjunto cumple el criterio de conformidad.

Por cada criterio de conformidad se incluye su descripción, su enlace a las WCAG 2.2 y su ayuda revisada.

Hoja "3.1 Gráficas y estadísticas A"

Esta hoja es solo de resultados. Se actualiza automáticamente en base a los datos incluidos en la hoja anterior.

Pantallazo de la hoja 3.1 Incluye una gráfica de tarta de cumplimiento de la muestra y una tabla resumen con los porcentaje de cumplimiento

Hoja "3.1 Gráficas y estadísticas A. Nivel de adecuación A de la muestra en su conjunto" (ver imagen en grande)

Muestra en primer lugar una gráfica de tarta con el porcentaje de cumplimiento de la muestra en su conjunto. Para elaborarla se utilizan los datos introducidos en los campos "Muestra completa" que ya hemos comentado en la hoja anterior. Por tanto, para obtener datos completos es imprescindible que todos los campos "Muestra completa" estén rellenos.

Bajo la gráfica se muestra la tabla con los porcentajes de cumplimiento e incumplimiento. La tabla tiene una columna para los porcentajes teniendo en cuenta los "no se aplica", y una columna para los porcentajes sin tener en cuenta los "no se aplica".

La gráfica muestra los porcentajes sin los "no se aplica".

Es importante tener en cuenta que los porcentajes de cumplimiento de esta hoja son de la muestra en su conjunto.

Imaginemos una muestra de 15 páginas en la que 14 páginas cumplen todos los criterios de conformidad de nivel A, pero 1 página no cumple ninguno de ellos. Todos los criterios de conformidad para la muestra en su conjunto estarán registrados como "no cumple", porque en cuanto una página no cumple el criterio, la muestra no es conforme con ese criterio. Por tanto, en este ejemplo, el porcentaje de cumplimiento de la muestra en su conjunto será 0%.

Esto nos indica que el sitio no cumple el nivel A (pues hay una página que no cumple ninguno de los criterios de nivel A), pero no quiere decir que el sitio sea 0% accesible: ¡hay 14 páginas que sí alcanzan el nivel A!

Para ver el grado de cumplimiento del sitio teniendo en cuenta el % de páginas que sí lo cumple, y no la muestra en su conjunto, tenemos la hoja 6. Resultados de la evaluación por nivel y principio, donde se están mediando los resultados por página. En el caso que ponía de ejemplo, el porcentaje del cumplimiento del sitio reflejado en la hoja 6 no sería 0% sino mucho mayor.

En esta hoja 3.1, se muestran también los datos en formato tabla y en formato gráfica desglosados por página.

Pantallazo de la hoja 3.1 Incluye una tabla y una gráfica de barras con los porcentajes de cumplimiento por página.

Hoja "3.1 Gráficas y estadísticas A. Datos desglosados por cada página de la muestra" (ver imagen en grande)

Hoja "4. Evaluación Nivel AA"

El contenido y funcionamiento de esta hoja es el mismo que el de la hoja 3. Evaluación de nivel A, solo que los criterios de conformidad listados son los criterios de nivel AA de las WCAG 2.2.

Hoja "4.1 Gráficas y estadísticas AA"

Esta hoja es igual que la hoja 3.1 "Gráficas y estadísticas A", pero refleja los resultados de nivel AA en base a los datos introducidos en la hoja 4 "Evaluación Nivel AA".

Pantallazo de la pestaña 4.1. Incluye gráfica de tarta con porcentaje de cumplimiento AA de la muestra y tabla resumen desglosada por cumplimiento de criterios AA y de criterios A+AA

Hoja "4.1 Gráficas y estadísticas AA. Nivel de adecuación AA de la muestra en su conjunto" (ver imagen en grande)

Pantallazo de la pestaña 4.1 Incluye dos tablas desglosando por página el cumplimiento de los criterios de nivel AA y de nivel A+AA

Hoja "4.1 Gráficas y estadísticas AA. Datos desglosados por cada página de la muestra" (ver imagen en grande)

Pantallazo de la pestaña 4.1 Incluye una gráfica de barras con el porcentaje de cumplimiento AA de las páginas de la muestra.

Hoja "4.1 Gráficas y estadísticas AA. Gráfica de cumplimiento de cada página" (ver imagen en grande)

En las WCAG 2.2, hay 31 criterios de conformidad de nivel A (se han añadido dos, pero se ha eliminado el criterio 4.1.1) y 24 de nivel AA (cuatro más que en las WCAG 2.1). Para que una página alcance el nivel AA, debe cumplir con los criterios de nivel A (31) y los criterios de nivel AA (24), es decir, 55 criterios en total.

En esta hoja, las tablas desglosan los resultados obtenidos por los criterios de nivel AA (los 24 criterios evaluados en la hoja 4) y por el nivel AA real (A+AA, hoja 3 + hoja 4 = 55 criterios).

Las gráficas siempre reflejan los datos del nivel AA real (A+AA) para que no haya confusión.

Sin embargo, también pueden ser muy útiles los datos solo de los criterios AA para valorar el esfuerzo que debe hacer la organización en este nivel.

Hoja "5. Resultados por criterio"

En esta hoja se muestran los resultados desglosados por criterio y nivel.

Listado de todos los criterios de conformidad (primero los de nivel A y luego los de nivel AA) con el número de páginas que lo cumplen, no lo cumplen o no se aplica. Incluye gráficas de barras de los resultados desglosados por nivel y criterio.

Hoja "5. Resultados por criterio" (ver imagen en grande)

En primer lugar hay una tabla donde se muestran todos los criterios de conformidad (primero los de nivel A y luego los de nivel AA), en la que automáticamente se van reflejando todos los datos introducidos en las hojas 3 y 4, indicando así en cada criterio el número de páginas que lo cumplen, no lo cumplen o no se aplica.

En base a dichos resultados se generan para el nivel A y para el nivel AA gráficas de barras que desglosan los resultados por criterio de conformidad.

Esta pestaña nos da una perspectiva global de los criterios de conformidad que más o menos problemas están generando.

Hoja "6. Resultados por nivel y principio"

Gracias a la colaboración del profesor Roberto Muñoz y a sus alumnos de la Facultad de Ingeniería de la Universidad de Valparaíso, Chile, desde la versión 2 de la excel se incluyen las hojas 6 y 7.

La hoja 6 "Resultados de la evaluación por nivel y principio, mediando resultados por página" incluye una tabla resumen que desglosa por cada página: su % de cumplimiento A y AA, y su % de cumplimiento por cada uno de los cuatro principios en los que se agrupan los criterios de las WCAG 2.2: perceptible, operable, comprensible y robusto.

Incluye además dos gráficas de barras para mostrar la media del % de cumplimiento de las páginas por nivel y por principio.

Hoja 6. Resultados por nivel y principio. Incluye una tabla desglosada por páginas con el porcentaje de cumplimiento por nivel y principio y gráficas de barras en base a dichos datos.

Hoja "6. Resultados por nivel y principio" (ver imagen en grande)

Como ya he indicado en la hoja 3, el porcentaje de cumplimiento A y AA no tiene por qué coincidir con los de las hojas 3.1 y 4.1. Allí el porcentaje se calcula para la muestra en su conjunto, y aquí mediando el cumplimiento de las páginas.

Desde la versión 3.1 de la excel he mejorado esta hoja para que los resultados sean válidos independientemente del nivel evaluado o del número de páginas de la muestra, por ello es muy relevante indicar en la hoja 1 el nivel evaluado (A o AA) y en la hoja 2 indicar el número de páginas de la muestra (de 1 a 15, o de 1 a 30, según la versión de la excel).

Hoja "7. Resultados detallados por página"

Hoja 7 Resultados detallados por página, incluye diversas tablas desglosando los porcentajes de cumplimiento de cada página por nivel y principio.

Hoja "7. Resultados detallados por página" (ver imagen en grande)

Esta pestaña muestra los mismos resultados que la pestaña 6 (de hecho, se basa en ellos para generarse) pero mucho más detallados.

Desde la versión 3.1 de la excel los porcentajes de cumplimiento por principio los calculo en base al número de criterios de cada principio en el nivel evaluado, es por tanto el % de cumplimiento de ese principio en ese nivel (A o AA). Por ello es muy importante indicar en la hoja 1 el nivel evaluado (A o AA).

Hoja "8. WCAG 2.0 vs WCAG 2.1 vs WCAG 2.2"

En esta hoja se muestra en primer lugar una tabla y una gráfica con el porcentaje de cumplimiento de la muestra completa, de forma comparativa entre las WCAG 2.0, las WCAG 2.1 y las WCAG 2.2 y por nivel A y AA.

Es útil para consultar si la muestra, aunque no cumpla con las WCAG 2.2, sí está al menos cumpliendo con las WCAG 2.0 o las WCAG 2.1

Tabla y gráfica con el porcentaje de cumplimiento de la muestra completa, por el nivel A y por el nivel AA, respecto a las WCAG 2.0,  las WCAG 2.1 y las WCAG 2.2

Hoja "8. WCAG 2.0 vs WCAG 2.1 vs WCAG 2.2" (ver imagen en grande)

Como en las WCAG 2.2 ya no se incluye el criterio 4.1.1 (presente en las WCAG 2.0 y WCAG 2.1), para poder hacer correctamente la comparación, en esta hoja hay que indicar si la muestra en su conjunto cumple o no cumple con el criterio 4.1.1:

Captura de la hoja 8. Hay un campo para seleccionar si la muestra cumple con el criterio 4.1.1

Hoja "8. WCAG 2.0 vs WCAG 2.1 vs WCAG 2.2". Desplegable para seleccionar si la muestra cumple con el criterio 4.1.1 (ver imagen en grande)

A continuación de ese campo, se muestra una tabla y sus correspondientes gráficas solo con los resultados de los criterios de conformidad de las WCAG 2.1. Y una tabla y sus correspondientes gráficas solo con los resultados de los criterios de conformidad de las WCAG 2.2.

Esto puede ser muy útil para la evaluación de sitios que ya cumplen con las WCAG 2.0 o las WCAG 2.1, de manera que es fácil ver el esfuerzo necesario para cumplir con una versión superior del estándar.

Tabla con el listado de los nuevos criterios de las WCAG 2.1 con el número de páginas que lo cumplen o no. Acompañada de dos gráficas generadas a partir de la tabla, con los datos organizados por criterio y organizados por su cumplimiento o no. Lo mismo para los criterios de las WCAG 2.2

Hoja "8. WCAG 2.0 vs WCAG 2.1 vs WCAG 2.2". Cumplimiento de los criterios WCAG 2.1 y de las WCAG 2.2 (ver imagen en grande)

Licencia

La descarga de la excel es directa y gratuita, pero está prohibida su distribución y su uso comercial sin permiso del autor.

Si necesitas desproteger la excel, puedes pedir presupuesto

Mejoras futuras

En futuras versiones:

  • Evaluación del nivel AAA.
  • Evaluación de los criterios EN 301 549.
  • Comparación automática entre las páginas de la muestra de control y las páginas seleccionadas estructuradamente.
  • Alerta si no se ha cumplimentado algún campo de la hoja 3 y 4.
  • Seguir mejorando la accesibilidad de la excel.
  • Versión en inglés.

Cualquier otra sugerencia me la podéis dejar en los comentarios.

Descarga de AuditTool WCAG 2.2

Para rellenar e interpretar correctamente los resultados de la excel puedes consultar el Manual de ayuda.

Versión WCAG 2.2 en español (15 páginas de muestra) (NUEVO) (gratuita)

AuditTool WCAG 2.2 (15 páginas de muestra), archivo excel (.XLSX) de 2 MB, en español, gratuita

Es una versión operativa. Si necesitas una versión desprotegida que te permita personalizar el alias de las páginas, el aspecto de las gráficas generadas o cualquier otra personalización, puedes ponerte en contacto con Olga Carreras.

Versión WCAG 2.2 en español (30 páginas de muestra) (NUEVO)

AuditTool WCAG 2.2 (30 páginas de muestra), archivo excel (.XLSX) de 2 MB, en español

Esta versión tiene todas las celdas protegidas. Si te interesa la versión desprotegida, puedes ponerte en contacto con Olga Carreras.

Descarga de versiones anteriores

AuditTool WCAG 2.1 en español (gratuita)

Audit Tool WCAG 2.1, archivo excel (.XLSX) de 1,5 MB, en español

AuditTool WCAG 2.1 (english version) (gratuita)

Audit Tool WCAG 2.1, archivo excel (.XLSX) de 1,5 MB (english version)

Versión anterior WCAG 2.0 (gratuita)

Audit Tool WCAG 2.0, archivo excel (.XLSX) de 161 KB.

Descarga de otras herramientas

Zona de descargas de Usable y accesible

Servicios relacionados: Consultoría, auditoría y formación en accesibilidad web

Artículos relacionados: