frontend-accessibility
Mejorar la accesibilidad frontend
Los equipos frontend pueden pasar por alto requisitos de teclado, semántica y lectores de pantalla. Esta skill guía a los agentes de IA para crear componentes de interfaz de usuario accesibles.
Instalar con mi Agente
Copia esta solicitud en tu Agente. Incluye la página canónica del Skill y el manifiesto.
Review the Skillstore skill "frontend-accessibility" from https://skillstore.io/skills/devanb-frontend-accessibility.md and its manifest at https://skillstore.io/api/skills/devanb-frontend-accessibility/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Tu Agente debe seguir mostrando su plan y solicitar cualquier confirmación exigida por la política de seguridad.
Recursos legibles por agentes
Usa estos enlaces cuando un agente de IA, crawler o script necesite contexto limpio en vez de leer la página completa.
Pruébalo
Usando "frontend-accessibility". Un formulario React con etiquetas solo en placeholder y mensajes de validación en línea.
Resultado esperado:
La revisión identifica etiquetas faltantes, anuncios de error poco claros, estados de foco débiles y recomienda etiquetas explícitas con texto de validación accesible.
Usando "frontend-accessibility". Un componente de menú personalizado que se abre al hacer clic y contiene varias acciones.
Resultado esperado:
La respuesta explica el comportamiento de teclado requerido, el movimiento del foco, los nombres accesibles y los roles ARIA solo cuando los elementos nativos no son suficientes.
Usando "frontend-accessibility". Un diseño de página con niveles de encabezado omitidos y landmarks poco claros.
Resultado esperado:
La auditoría sugiere un orden lógico de encabezados, mejoras en landmarks y una estructura de navegación más clara para usuarios de lectores de pantalla.
Auditoría de seguridad
SeguroThe inline-code backticks on line 12 are a false positive because they only mark file extensions. The relative path on line 29 is confirmed because it points outside the skill directory. No prompt injection or data exfiltration intent was found.
Elementos de revisión de capacidades (1)
Estas son capacidades locales reales que pueden esperarse para esta habilidad, por lo que requieren revisión, pero no se cuentan como comportamiento malicioso confirmado.
Factores de riesgo
⚙️ Comandos externos (1)
📁 Acceso al sistema de archivos (1)
Compartir y citar este informe
Comparte el informe de evaluación versionado, la insignia neutral, la tarjeta insertable y las citas. Skillstore presenta evidencias sin decidir si este Skill es seguro.
Copiar enlace del informe
https://skillstore.io/skills/devanb-frontend-accessibility/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportInsignia Markdown
[](https://skillstore.io/skills/devanb-frontend-accessibility?utm_source=security_passport_badge)Insignia HTML
<a href="https://skillstore.io/skills/devanb-frontend-accessibility?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/devanb-frontend-accessibility/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Tarjeta para insertar
<iframe src="https://skillstore.io/embed/skills/devanb-frontend-accessibility.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Citas académicas (APA · BibTeX · CFF)
Cita APA
DevanB. (2026). frontend-accessibility security audit report (audit version 10) [Author version unspecified]. Skillstore. https://skillstore.io/skills/devanb-frontend-accessibility/audits/10Cita BibTeX
@techreport{devanb-devanb-frontend-accessibility-2026,
author = {DevanB},
title = {frontend-accessibility security audit report (audit version 10)},
institution = {Skillstore},
year = {2026},
number = {10},
url = {https://skillstore.io/skills/devanb-frontend-accessibility/audits/10},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-accessibility security audit report (audit version 10)"
version: "unspecified"
type: report
authors:
- name: "DevanB"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/devanb-frontend-accessibility/audits/10"
identifiers:
- type: other
value: "skillstore:devanb-frontend-accessibility:audit:10"
description: "Skillstore immutable audit report identifier"
Comparar variantes
2 variantes instalablesCada autor sigue siendo un skill instalable independiente. La variante recomendada se ordena según la evidencia de Skillstore.
Por qué esta variante es la primera
eis-its-frontend-accessibility
2026-09-09
devanb-frontend-accessibility
2026-09-09
Puntuación de Skillstore
Por qué esta puntuación Confianza de la evidencia: AltoLo que puedes crear
Revisar componentes React
Encontrar brechas de accesibilidad en el marcado de componentes, etiquetas, estados de foco y uso de ARIA antes del lanzamiento.
Crear formularios accesibles
Crear formularios con etiquetas claras, mensajes de validación, compatibilidad con teclado y una estructura compatible con lectores de pantalla.
Auditar UI interactiva
Evaluar diálogos, menús, botones y contenido dinámico en cuanto al control del foco y el comportamiento del teclado.
Prueba estos prompts
Revisa este componente en busca de problemas de accesibilidad. Céntrate en HTML semántico, etiquetas, compatibilidad con teclado, contraste y comportamiento con lectores de pantalla.
Mejora este formulario para hacerlo accesible. Asegúrate de que cada entrada tenga una etiqueta, que se anuncie la validación y que los usuarios de teclado puedan completar el flujo.
Audita este flujo de modal o diálogo. Revisa el atrapamiento del foco, el foco inicial, el comportamiento de escape, el retorno del foco, los anuncios y la interacción con teclado.
Revisa este flujo frontend en busca de riesgos de accesibilidad WCAG. Proporciona correcciones priorizadas para semántica, foco, contraste, encabezados, ARIA y compatibilidad con tecnologías de asistencia.
Mejores prácticas
- Prefiere controles HTML nativos antes de añadir roles ARIA o modelos de interacción personalizados.
- Prueba los flujos importantes con navegación solo con teclado y al menos un lector de pantalla.
- Verifica el contraste del texto, los controles, los indicadores de foco, los estados deshabilitados y los estados de error.
Evitar
- No uses elementos div clicables cuando un botón o enlace sea el control correcto.
- No ocultes los indicadores de foco ni dependas únicamente de interacciones con puntero.
- No añadas atributos ARIA sin el comportamiento correspondiente y nombres accesibles.