Semántica - 1.3.1

Semántica es una herramienta ligera y gratuita diseñada para analista de accesibilidad web, consultores de accesibilidad Web y puede ser útil también para desarrolladores, diseñadores y gestores de contenido que buscan garantizar que sus páginas web cumplan con los requisitos de accesibilidad estructural definidos por el criterio 1.3.1 (Información y relaciones) de las W3C (WCAG 2.2). Con un solo clic, detecta automáticamente errores semánticos comunes que pueden interferir con la correcta interpretación del contenido por parte de tecnologías de asistencia (lectores de pantalla, navegadores en modo lectura, etc.).

¿Qué revisa?

- Texto no semántico directamente dentro de <div> o <span> (fuera de enlaces, botones, listas o elementos con roles semánticos apropiados).

- Párrafos vacíos o que contienen solo marcadores vacíos (“--”).

- Etiquetas semánticamente obsoletas o no adecuadas: <b>, <u>, <br>, <font>, <s>, <small>, e incluso <i>.

- Encabezados vacíos o más de un <h1> en la misma página.

- Listas vacías (<ul> o <ol>) y tablas con cabeceras <th> vacías. etc

Para cada problema detectado, Semántica puede incluir una clase si se activa, lo que facilita localizar y corregir el error al inspeccionar el código buscando esa clase en particular.

Interfaz de resultados

- Agrupa los errores por tipo en bloques desplegables: cada bloque incluye un resumen con la cantidad de incidencias y una lista detallada.

- Permite saltar directamente al elemento problemático en la página (si es visible; si está oculto, podría dar fallos puntuales).

- Ofrece la opción de visualizar los errores sobre el mismo contenido: los elementos conflictivos se resaltan con colores distintos según el tipo de error.

- Es compatible con navegación por teclado, incluye indicadores visibles de foco. Utiliza role="status" para anunciar los resultados a lectores de pantalla.

Funciones adicionales

Copiar el listado de errores al portapapeles.

Botón para limpiar los resultados; la extensión intenta limpiar automáticamente al cambiar de URL en casi la mayoría de los sitios.

Uso recomendado y límites
Semántica está en fase beta y —aunque provee resultados útiles— puede generar falsos positivos o interpretaciones parciales, especialmente en estructuras HTML complejas. Por ese motivo, recomendamos siempre validar manualmente los errores detectados.

Para quién es útil

- Desarrolladores y maquetadores que quieran asegurar una estructura semántica correcta desde el inicio con una revisión rápida.

- Revisores de accesibilidad que necesiten un escaneo rápido previo a auditorías formales.

- Equipos de contenido y CMS que deseen verificar que sus páginas cumplan con WCAG 1.3.1 antes de publicar.

Es muy importante: Esto es una herramienta y puede tener fallos. SIEMPRE debe evaluarse mediante una revisión manual para verificar el estado de estos errores.

------------------------
English version

Semántica is a lightweight, free tool designed for web accessibility analysts, accessibility consultants, and it can also be useful for developers, designers, and content editors who need to ensure that their webpages meet the structural accessibility requirements defined by WCAG 2.2, Success Criterion 1.3.1 (Info and Relationships). With a single click, it automatically detects common semantic issues that may interfere with how assistive technologies (screen readers, reader modes, etc.) interpret content.

What does it check?

- Non-semantic text placed directly inside <div> or <span> elements (outside links, buttons, lists, or elements with appropriate semantic roles).

- Empty paragraphs or paragraphs containing only placeholder markers (“--”).

- Semantically obsolete or unsuitable tags such as <b>, <u>, <br>, <font>, <s>, <small>, and <i>.

- Empty headings or more than one <h1> on the same page.

- Empty lists (<ul> or <ol>) and tables with empty <th> headers, among others.

For each issue detected, Semántica can add a helper CSS class—if the option is enabled—to make it easier to locate and fix the error by inspecting the code.

Results interface

- Groups errors by type in collapsible sections, each including a summary with the number of occurrences and a detailed list.

- Allows jumping directly to the problematic element on the page (if it is visible; hidden elements may cause occasional errors).

- Offers an option to visually highlight the issues on the page: problematic elements are marked with different colors depending on the error type.

- Supports full keyboard navigation, includes visible focus indicators, and uses role="status" to announce results to screen reader users.

Additional features

Copy the full error list to the clipboard.

A button to clear all results; the extension also attempts to auto-clear when the URL changes on most sites.

Recommended use and limitations

Semántica is currently in beta. Although it provides useful insights, it may produce false positives or partial interpretations, especially on complex HTML structures. For this reason, manual verification of all issues is always required.

Who is it for?

- Developers and front-end implementers who want a quick semantic structure review early in the process.

- Accessibility reviewers who need a fast scan before conducting formal audits.

- Content and CMS teams who want to ensure that their pages comply with WCAG 1.3.1 before publishing.

Important: This is a tool and may contain errors. Manual evaluation is ALWAYS necessary to confirm the actual status of the detected issues.