Ir a la guía de uso
fixing-accessibilitypor Julien Thibeaut

Fixing Accessibility Skill.

Una skill de Claude Code y Codex para revisión de diseño: audita y corrige errores de ARIA, teclado, foco, contraste y formularios.

  • Revisión de Diseño y Accesibilidad
  • Informe de revisión
ibelick/ui-skills · skills/fixing-accessibility/SKILL.mdSKILL.md
--- name: fixing-accessibility description: Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance. --- ## how to use ## when to apply ## rule categories by priority ## common fixes ## review guidance
Metadatos iniciales y encabezados de sección leídos del archivo original el 14/09/2026 · 4714 caracteres en total

01 Qué hace

Qué hace el skill fixing-accessibility en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Un conjunto de reglas de referencia y corrección para accesibilidad en HTML, dirigido a diseñadores y desarrolladores que añaden o revisan UI interactiva en un agente de código. Clasifica nueve categorías de reglas por prioridad e impacto, desde nombres accesibles, acceso por teclado, foco y diálogos, y límites de herramientas en crítico, hasta semántica, formularios y errores, anuncios, contraste y estados, hasta medios y movimiento.

Cada categoría es una lista breve de requisitos concretos, como aria-label en botones solo con icono, ningún tabindex por encima de 0, y aria-invalid en campos con errores. Un bloque de correcciones comunes muestra HTML antes y después para botones solo con icono, div como botón y errores de formulario sin vincular, y el modo de revisión reporta cada infracción con la línea citada, una frase sobre por qué importa y una corrección a nivel de código.

Informe de revisión
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Aplicar las Restricciones en el Lugar

    Ejecutar el comando simple convierte las reglas en restricciones permanentes sobre cualquier trabajo de UI que ocurra en esa conversación, no en una sola pasada de auditoría.

  2. 02
    Dirigirlo a un Archivo para un Informe de Infracciones

    Con un argumento de archivo, comprueba ese archivo contra todas las reglas y reporta cada infracción como una línea o fragmento citado, una frase corta sobre por qué importa y una corrección a nivel de código.

  3. 03
    Trabajar las Categorías en Orden de Prioridad

    Las reglas se agrupan en categorías clasificadas con una calificación de impacto; los nombres accesibles ocupan la prioridad 1, marcada como crítica.

  4. 04
    Mantener el Cambio Mínimo

    El skill es explícito en que no debe reescribir grandes partes de la UI, y que las correcciones deben ser mínimas y específicas.

02 Encuentra tu caso de uso

Cuándo usar la skill fixing-accessibility

Usa el skill fixing-accessibility en Claude Code o Codex cuando el trabajo sea revisión de diseño de este tipo. Alcance y límites a continuación se toman del archivo propio del skill.

Buen caso de uso

  • Añadir o cambiar botones, enlaces, campos de entrada, menús, diálogos, pestañas o desplegables en una interfaz existente.
  • Construir formularios con validación, estados de error y texto de ayuda.
  • Implementar atajos de teclado u otras interacciones personalizadas.
  • Trabajar en estados de foco, atrapamiento de foco o comportamiento de modales.
  • Renderizar controles solo con icono, o añadir interacciones que solo aparecen al pasar el cursor y contenido oculto.

Conozca los límites

  • Refactorizar código que no está relacionado con el problema de accesibilidad que se está corrigiendo.
  • Usar trucos basados en roles cuando un botón, enlace o input nativo haría el mismo trabajo.
  • Reproducir contenido multimedia automáticamente con sonido.

03 Dentro del skill

Reglas que el skill fixing-accessibility le da a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

  1. Nombra Cada Control Solo con Icono

    Los botones solo con icono deben tener un nombre accesible mediante aria-label o aria-labelledby, no solo un glifo visible.

  2. Nunca Uses un Tabindex Positivo

    Los valores de tabindex mayores que 0 quedan totalmente descartados; el orden de tabulación se deja a la secuencia natural.

  3. Atrapa, Establece y Restaura el Foco en los Diálogos

    Los modales deben atrapar el foco mientras están abiertos, establecer el foco inicial dentro del diálogo y devolver el foco al elemento que los activó cuando se cierran.

  4. Vincula los Errores a su Campo

    Los errores deben vincularse al input con aria-describedby para que el mensaje se anuncie junto con el campo.

  5. Marca los Campos con Errores como Inválidos

    Un campo inválido debe establecer aria-invalid, no limitarse a mostrar un estilo de error.

  6. Omite ARIA Cuando la Semántica Nativa Ya Funciona

    No añadas aria cuando la semántica nativa ya resuelve el problema; esto se encuadra dentro de los límites de la herramienta como una restricción crítica.

  7. Mantén el Foco Visible

    No se pueden eliminar los contornos de foco a menos que se proporcione un sustituto visible.

  8. No Migres Librerías de UI

    Cambiar una librería de UI queda fuera del alcance a menos que el usuario lo solicite explícitamente.

04 Ponlo a trabajar

Instala fixing-accessibility en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agrega fixing-accessibility a Claude Code, Codex o tu agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill fixing-accessibility

Forma genérica de la CLI de skills para skills/fixing-accessibility/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al skill una primera tarea de revisión de diseño

El SKILL.md no incluye un prompt de ejemplo; este iniciador está escrito desde la línea descriptiva del catálogo. Reemplaza la línea de tarea con tu briefing real.

Starter prompt
Use the fixing-accessibility skill on the material I attach. What the skill should do here: Audits and fixes ARIA, keyboard, focus, contrast, and form errors. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

Fuente: prompt de inicio escrito desde el uso de una línea del catálogo (no desde el SKILL.md).

Revisa el primer resultado

Antes de aceptar el resultado, busca esto en la transcripción y los archivos:

  • El resultado se entrega como informe de revisión, tal como el catálogo indica para este skill.
  • El agente nombra el skill fixing-accessibility en su plan o transcripción antes de producir el resultado.
  • Su propio contenido, nombres y números aparecen sin cambios en la salida.

En OpenDesign importa fixing-accessibility desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónalo en la barra superior.

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Repository
github.com/ibelick/ui-skills Rama main
Archivo de skill
skills/fixing-accessibility/SKILL.md Checksum de contenido registrado en verificación; commit 79081ab
License
MIT De LICENSE.
Estrellas del repositorio
8.402 Instantánea de GitHub tomada el 14-09-2026 para todo el repositorio ibelick/ui-skills, que contiene 5 skills en este catálogo. No es una calificación ni un recuento de uso para fixing-accessibility.
Verificado por OpenDesign
14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.
La descripción propia del Skill
"Audita y corrige problemas de accesibilidad HTML incluyendo etiquetas ARIA, navegación por teclado, gestión de foco, contraste de color y errores de formulario. Úsalo al agregar controles interactivos, formularios, diálogos o revisar cumplimiento WCAG."

Descripción del front-matter de SKILL.md. El archivo completo tiene aproximadamente 4.714 caracteres. Lee el archivo completo en GitHub.

Fixing Accessibility

Ejecuta fixing-accessibility en una tarea real de revisión de diseño.

Descarga OpenDesign, importa fixing-accessibility desde su enlace SKILL.md, pega el prompt de arriba y lee el plan antes del resultado.

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill fixing-accessibility

OpenDesign Desktop

Un sistema de diseño. Tu marca, coherente en cada resultado

En el Vibe Design Workspace completo, aplica las mismas reglas de marca a sitios web, presentaciones, prototipos interactivos, dashboards, imágenes y vídeo HTML. Conecta Codex, Claude Code, Cursor y otros agentes de código locales y crea gratis.

  • Web, presentaciones, prototipos, dashboards, imágenes y vídeo
  • Más de 140 sistemas de diseño y la biblioteca completa de plantillas y skills
  • Codex local y más de 21 agentes de código · Gratis
Descargar gratis

Disponible para macOS y Windows