Extension 1.3.1 WCAG 2.2

This extension automatically evaluates common structures that violate WCAG 2.2, criteria 1.3.1: Info and Relationships, helping identify elements that may interfere with assistive technologies' interpretation of page semantics.

Important: Beta stage

This is an actively developed beta version. While it provides useful results, false positives or partial interpretations may occur. Manual verification is strongly recommended to validate the reported issues.

What Does the Extension Check?

This tool detects common semantic issues, including:

• Non-semantic text directly inside <div> or <span> tags, excluding those inside links, buttons, lists, or with appropriate roles. Note: Due to complex HTML structures, some false positives may occur.
• Empty paragraphs or those containing " - - ".
• Deprecated or non-semantic tags, such as <b>, <u>, <br>, <font>, <s>, <small>.
• Presence of <i> tags
• Empty heading tags.
• Multiple <h1> headings on a single page.
• Empty list containers: <ul> or <ol>.
• Empty <th> headers inside tables.

Each error includes a small code snippet to help you locate and inspect the problematic element.

---

Classes

Some elements may not be properly marked if they are hidden via CSS. The classes (activated by checking the checkbox) used to search the code are:

• General: 'resaltado-error'
• For div elements: 'error-div' and for span elements: 'error-span'
• For p tags: 'error-p'
• For b: 'error-b', i: 'error-i', s: 'error-s', u: 'error-u', font: 'error-font' and small tags: 'error-small'
• For empty heading tags: 'error-h' and for repeated h1 headings: 'error-hh'
• For br tags: 'error-br'
• For empty ol and ul list: 'error-lista' and for empty th header cells: 'error-th'

Results Interface

Results are grouped by error type, each within a collapsible block. Every block includes:

• A summary with the number of errors found.
• A detailed list of individual issues.
• A direct link to the element on the page (if visible — otherwise, an alert will indicate it's hidden).

You can also activate in-page visualization, which highlights all problematic elements using color-coded styles based on the error type.

Extension Accessibility Features

• Uses role="status" to notify screen readers of updated results.
• Fully operable via keyboard navigation.
• Includes visible focus indicators.

Additional Options

• Filter by highlighted color and label using the "Highlight errors" option.
• Copy results to clipboard.
• Button to clear results (includes automatic cleanup when changing the URL on most sites, but may fail depending on the load of active tabs).

More on WCAG 2.2 – Criterion 1.3.1

For a complete explanation of this WCAG criterion, visit the official documentation: Criteria 1.3.1 (WCAG2.2)

---

Your Feedback Is Valuable!

This extension is under active development. If you find bugs, false positives, or have suggestions for improvements, please send your feedback to: emilianomontani@gmail.com

I hope this tool helps you in your daily work. "Muchas gracias" for your support and collaboration!

Esta extensión evalúa automáticamente estructuras comunes que infringen el criterio 1.3.1: Información y Relaciones de las WCAG 2.2, facilitando la identificación de elementos que podrían afectar la interpretación semántica del contenido por parte de tecnologías de asistencia.

Importante: Fase beta

Esta es una versión en desarrollo activo. Si bien ofrece resultados útiles, podrían producirse falsos positivos o interpretaciones parciales. Se recomienda verificación manual adicional como respaldo. Se recomienda realizar una verificación manual para confirmar la validez de los errores detectados.

¿Qué verifica la extensión?

La extensión detecta los siguientes errores semánticos comunes:

• Si hay etiquetas <div> o <span> con texto directo no semántico, ignorando los que están dentro de enlaces, botones, listas o con roles apropiados. Nota: Debido a la complejidad de ciertas estructuras HTML, podrían existir falsos positivos.
• Verifica si hay párrafos vacíos o con " - - ".
• Si hay etiquetas con <b>, <u>, <br>, <font>, <s>, <small>.
• Si hay etiquetas <i>
• Si hay encabezados vacíos.
• Si hay más de un encabezado <h1>.
• si hay listas vacías <ul> o <ol>.
• Si hay encabezados <th> vacíos dentro de tablas.

En cada error, se muestra un fragmento del código para facilitar su localización y revisión.

---

Clases

Algunos elementos al estar ocultos por CSS pueden no marcarse adecuadamente. Las clases (se activan al presionar la casilla de verificación) que se utilizan (para buscar en el código) son:

• General: 'resaltado-error'
• Para elementos div: 'error-div' y para elementos span: 'error-span'
• Para etiquetas p: 'error-p'
• Para etiquetas b: 'error-b', i: 'error-i', s: 'error-s', u: 'error-u', font: 'error-font' y small: 'error-small'
• Para encabezados vacíos: 'error-h' y encabezaados h1 repetidos: 'error-hh'
• Para etiquetas br: 'error-br'
• Para etiquetas ol y ul vacías: 'error-lista' y para encabezados th vacíos: 'error-th'

Interfaz de Resultados

Los resultados se presentan organizados por tipo de error, dentro de bloques desplegables. Cada bloque incluye:

• Un resumen con la cantidad de errores detectados para esa categoría.
• Una lista detallada de errores individuales.
• Enlace directo al elemento problemático en la página (si es visible, sino muestra una alerta anunciando que está oculto).

También podés activar la visualización directa en la página, que resalta todos los elementos con error usando colores distintos por tipo.

Accesibilidad de la extensión

• Usa role="status" para anunciar resultados nuevos a lectores de pantalla.
• Se puede utilizar completamente mediante teclado.
• Incluye indicadores de foco visibles.

Opciones disponibles

• Filtrado por tipo de error (con color y etiqueta mediante Visualizar errores).
• Botón para copiar los errores al portapapeles.
• Botón para limpiar resultados (incluye limpieza automática al cambiar de URL en la mayoría de los sitios, pero dependiendo de la carga de pestañas activas puede fallar).

Más Información sobre el Criterio 1.3.1

Para una explicación completa del criterio 1.3.1, consultá la documentación oficial: Criterio 1.3.1 (WCAG2.2)

---

¡Tu Feedback es Valioso!

Esta extensión se encuentra en desarrollo activo. Te agradecería enormemente que la probaras y Si encontrás errores, falsos positivos o tenés sugerencias, escribime a: emilianomontani@gmail.com

¡Espero que esta herramienta te sea útil en tu trabajo diario! Muchas gracias por tu colaboración