Ir a YuJa
  1. Centro de Ayuda de YuJa
  2. Plataforma de accesibilidad web EqualGround
  3. Funciones de accesibilidad

Uso de DevAssist de EqualGround para mejorar la accesibilidad del código

Avatar
YuJa
  • Actualización

El plugin YuJa EqualGround DevAssist aprovecha la IA para ayudarle a resolver problemas de accesibilidad de HTML directamente en el IDE VS Code, lo que ahorra el tiempo necesario para la corrección manual retroactiva una vez que los sitios web y las aplicaciones web ya están en producción. YuJa DevAssist verifica el cumplimiento de los estándares WCAG 2.1 y 2.2, niveles A, AA y AAA, para ayudar a garantizar el cumplimiento total.

Configuración de YuJa EqualGround DevAssist 

El plugin YuJa EqualGround DevAssist se puede descargar desde el sitio web de EqualGround e instalar en Visual Studio Code. 

  1. En el menú de la barra lateral de EqualGround, vaya a Configuración > DevAssist. 

    downloading dev assist.png

  2. Haga clic en el botón Descargar plugin del paso 1 para descargar el plugin de EqualGround para VS Code.

    downloading dev assist 2.png

  3. Abra Visual Studio Code.

  4. Seleccione la pestaña Extensiones en la barra lateral. 

    downloading dev assist 3.png

  5. Haga clic en el menú Más acciones y elija Instalar desde VSIX. 

    downloading dev assist 4.png

  6. Busque el archivo del plugin de EqualGround descargado y seleccione Instalar para completar la configuración.

    downloading dev assist 5.png

  7. Abra cualquier archivo HTML para iniciar el análisis de accesibilidad en tiempo real. 

Cómo usar YuJa EqualGround DevAssist

YuJa EqualGround DevAssist corrige errores de código proponiendo correcciones rápidas. Al seleccionar una corrección rápida, los cambios se aplican al instante en su código. Las sugerencias de corrección rápida se identifican por un ícono de bombilla amarilla.

  1. Abra Visual Studio Code.
  2. Abra cualquier archivo HTML para iniciar el análisis de accesibilidad en tiempo real. Los problemas se marcan directamente en su código con un subrayado rojo ondulado. 

  3. Coloque el cursor sobre un problema para conocer más sobre él y por qué es importante. 

    how to use dev assist.png

  4. Use Corrección rápida para hacer correcciones instantáneas en su código. Para abrir Corrección rápida:

    • Use el atajo de teclado Ctrl +.

      Nota: Este es el atajo predeterminado; su combinación de teclas puede ser diferente. 

    • Desplácese hasta la parte inferior de la ventana emergente y haga clic en Corrección rápida…

      how to use dev assist 2.png

    • Seleccione la línea con el error y luego haga clic en el ícono de bombilla azul. 

      how to use dev assist 3.png

Problemas que YuJa DevAssist puede resolver

Consulte la tabla a continuación para ver los diferentes problemas de WCAG 2.2 que YuJa DevAssist puede resolver. 
 

Pauta de WCAG Número del criterio de éxito de WCAG Problema
1.1 Alternativas textuales 1.1.1 Contenido no textual A las imágenes, los íconos y otros elementos no textuales les faltan texto alternativo o etiquetas ARIA.
1.2 Medios basados en el tiempo 1.2.1 Solo audio y solo video (grabado previamente) El audio o video grabado previamente no tiene una alternativa de transcripción de texto.
1.2.2 1.2.2 Subtítulos (grabados previamente) Al video grabado previamente le faltan subtítulos sincronizados.
1.3 Adaptable 1.3.1 Información y relaciones Hay un uso incorrecto de HTML semántico (p. ej., <div> en lugar de <nav>, campos de entrada sin etiquetas, jerarquía de encabezados omitida).
1.3.4 Orientación El contenido se bloquea en una orientación de pantalla específica (solo vertical u horizontal).
1.3.5 Identificar el propósito de la entrada A los campos de formulario les faltan atributos de autocompletado para datos personales (nombre, correo electrónico, etc.)
1.4 Distinguible 1.4.10 Reflujo El contenido se rompe o se desborda al ampliarlo al 400% o con un ancho de ventana de 320px (reflujo deficiente).
1.4.12 Espaciado del texto El texto se corta o se superpone cuando se modifica el espaciado (altura de línea, espaciado entre letras o espaciado entre palabras).
2.2 Tiempo suficiente 2.2.1 Tiempo ajustable Los límites de tiempo (sesiones, cuestionarios) no se pueden desactivar, extender ni ajustar.
2.2.2 Pausar, detener, ocultar El contenido de reproducción automática o en movimiento (carruseles, animaciones) no tiene control para pausar o detener.
2.4 Navegable 2.4.2 Titulado de páginas A las páginas les falta un elemento <title> significativo.
2.4.3 Orden del foco Hay un orden de foco del teclado ilógico que no coincide con el diseño visual.
2.4.9 Propósito de los enlaces (solo el enlace) Los enlaces con etiquetas vagas como “haga clic aquí” o “leer más” son ambiguos fuera de contexto.
2.4.10 Encabezados de sección A las secciones de contenido extensas les faltan encabezados que permitan a los usuarios navegar por ellas.
3.1 Legible 3.1.1 Idioma de la página Al elemento <html> le falta el atributo lang.
3.2 Predecible 3.2.5 Cambios a petición Hay cambios de contexto inesperados al ingresar datos (p. ej., redirecciones de página o envíos de formularios activados sin la intención del usuario).
4.1 Compatible 4.1.2 Nombre, función, valor A los elementos interactivos (botones, campos de entrada, widgets personalizados) les faltan atributos de nombre, función o valor para las tecnologías de asistencia.


 

Artículos relacionados

Comuníquese con soporte