Categorías

← View All Tools

Verificador de accesibilidad

Detecta problemas comunes de WCAG 2.1 en HTML, paginas o imagenes de diseno y devuelve sugerencias accionables

Resultados de ejemplo

2 Ejemplos

Revisar un fragmento de landing para etiquetas faltantes

Analiza un bloque HTML y detecta botones vacios, alt faltantes y campos sin etiqueta

Accessibility report with critical issues for images, links, buttons, and forms.
Ver parámetros de entrada
{ "htmlInput": "<img src=\"/hero.png\"><a href=\"/pricing\"><svg></svg></a><button><svg></svg></button><input type=\"email\" />", "wcagLevel": "AA" }

Inspeccionar una maqueta por riesgo de contraste

Ejecuta heuristicas de contraste sobre la paleta de una imagen de diseno

Accessibility report with palette-based contrast warnings from a design image.
Ver parámetros de entrada
{ "designImage": "/public/samples/images/logo.png", "wcagLevel": "AAA" }

Click to upload file or drag and drop file here

Maximum file size: 20MB Supported formats: image/png, image/jpeg, image/webp, image/svg+xml

Datos clave

Categoría
Validation
Tipos de entrada
textarea, text, file, select
Tipo de salida
html
Cobertura de muestras
4
API disponible
Yes

Resumen

Verificador de accesibilidad que analiza fragmentos HTML, URLs de páginas o imágenes de diseño para detectar incumplimientos de WCAG 2.1. Identifica problemas como botones vacíos, imágenes sin atributo alt, campos de formulario sin etiquetas y riesgos de contraste, generando un informe HTML con correcciones aplicables.

Cuándo usarlo

  • •Antes de publicar una landing page para validar que los botones e imágenes cumplen con los criterios de accesibilidad.
  • •Al revisar maquetas de diseño para detectar problemas de contraste de color antes de pasar a desarrollo.
  • •Durante auditorías de código para identificar rápidamente elementos interactivos sin etiquetas descriptivas.

Cómo funciona

  • •Pega el código HTML, introduce una URL o sube una imagen de diseño según el tipo de análisis que necesites.
  • •Selecciona el nivel de conformidad WCAG (AA o AAA) para ajustar la rigurosidad de la evaluación.
  • •El sistema ejecuta heurísticas de accesibilidad para detectar violaciones de contraste, navegación por teclado y semántica.
  • •Recibe un informe HTML detallado con los problemas encontrados y sugerencias específicas para corregirlos.

Casos de uso

Validación de componentes HTML antes de su integración en el repositorio.
Auditoría de contraste en paletas de color de maquetas gráficas.
Revisión de formularios y navegación por teclado en páginas web publicadas.

Ejemplos

1. Validación de botones e imágenes en landing page

Desarrollador frontend
Contexto
Un desarrollador necesita verificar que un nuevo componente de hero section cumple con WCAG antes del despliegue en producción.
Problema
El código contiene botones con solo íconos SVG sin texto, imágenes sin atributo alt y enlaces vacíos que dificultan la navegación asistida.
Cómo usarlo
Pega el fragmento HTML en el campo 'Entrada HTML', selecciona nivel WCAG AA y ejecuta el análisis.
Resultado
El informe detecta los botones sin etiquetas accesibles y las imágenes faltantes, sugiriendo añadir atributos aria-label y alt descriptivos para cumplir los criterios.

2. Análisis de contraste en mockup de interfaz

Diseñador UX
Contexto
Un diseñador necesita validar que los colores de una nueva interfaz cumplen los estándares de accesibilidad antes de entregar al equipo de desarrollo.
Problema
La paleta de colores utiliza tonos que podrían no alcanzar el ratio de contraste mínimo requerido para texto pequeño según WCAG.
Cómo usarlo
Sube la imagen del diseño en formato PNG o JPG y selecciona nivel WCAG AAA para una validación exhaustiva de contraste.
Resultado
El verificador identifica combinaciones de colores con contraste insuficiente y sugiere ajustes de luminosidad para cumplir los umbrales requeridos.

3. Auditoría de formulario de contacto

QA Engineer
Contexto
Un tester necesita verificar que un formulario recién implementado es navegable por teclado y tiene etiquetas correctas antes de la release.
Problema
Los campos de entrada carecen de etiquetas asociadas explícitas y existen elementos interactivos que dificultan la navegación por teclado.
Cómo usarlo
Introduce la URL de la página en el campo correspondiente, selecciona nivel AA y ejecuta la validación.
Resultado
Se genera un listado de campos sin label vinculados mediante atributos for/id y elementos que interrumpen el orden de tabulación, con recomendaciones específicas para corregirlos.

Probar con muestras

xml, html, image
Ejemplos de XML
Ejemplos de formato XML (eXtensible Markup Language) desde estructuras simples hasta complejas
preferred input family image
image
Ejemplos de Procesamiento de Imágenes Windows C++
Ejemplos de procesamiento de imágenes Windows C++ incluyendo leer/guardar imágenes, redimensionamiento y conversión de formato usando Windows Imaging Component
preferred input family image
image
Ejemplos SVG
Ejemplos de Gráficos Vectoriales Escalables (SVG) que demuestran varias características y técnicas SVG
preferred input family image
image
Ejemplos de Procesamiento de Imágenes Web Rust
Ejemplos de procesamiento de imágenes Web Rust incluyendo lectura/escritura, escalado y conversión de formato
preferred input family image
image

Hubs relacionados

Herramientas de Image para Convert
Explora 100 herramientas de image para flujos de convert y encuentra utilidades cercanas con rapidez.
Herramientas de Text para Convert
Explora 80 herramientas de text para flujos de convert y encuentra utilidades cercanas con rapidez.
Herramientas de Image
Explora 40 herramientas de image para flujos de utility y encuentra utilidades cercanas con rapidez.
Herramientas de Xml para Convert
Explora 33 herramientas de xml para flujos de convert y encuentra utilidades cercanas con rapidez.

Preguntas frecuentes

¿Qué formatos de imagen admite el verificador?

Acepta PNG, JPEG, WebP y SVG para análisis de contraste y elementos visuales.

¿Puedo analizar una página web completa?

Sí, introduciendo la URL directamente en el campo correspondiente.

¿Cuál es la diferencia entre nivel AA y AAA?

El nivel AA es el estándar mínimo recomendado, mientras que AAA exige requisitos más estrictos de contraste y navegación.

¿Detecta automáticamente el texto alternativo faltante?

Sí, identifica imágenes sin atributo alt y botones vacíos que carecen de texto accesible.

¿El informe indica cómo solucionar los errores?

Sí, devuelve sugerencias accionables para cada problema detectado, incluyendo código HTML corregido cuando aplica.

Documentación de la API

Punto final de la solicitud

POST /es/api/tools/accessibility-checker

Parámetros de la solicitud

Nombre del parámetro Tipo Requerido Descripción
htmlInput textarea No -
pageUrl text No -
designImage file (Subida requerida) No -
wcagLevel select No -

Los parámetros de tipo archivo necesitan ser subidos primero vía POST /upload/accessibility-checker para obtener filePath, luego pasar filePath al campo de archivo correspondiente.

Formato de respuesta

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

Documentación de MCP

Agregue este herramienta a su configuración de servidor MCP: 

{
  "mcpServers": {
    "elysiatools-accessibility-checker": {
      "name": "accessibility-checker",
      "description": "Detecta problemas comunes de WCAG 2.1 en HTML, paginas o imagenes de diseno y devuelve sugerencias accionables",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=accessibility-checker",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Puede encadenar múltiples herramientas, por ejemplo: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máximo 20 herramientas.

Soporte para enlaces de archivos URL o codificación Base64 para parámetros de archivo.

Si encuentra algún problema, por favor, póngase en contacto con nosotros en [email protected]