# Fixing Accessibility

> Audita y corrige problemas de accesibilidad HTML: ARIA, navegación por teclado, gestión del foco, contraste de color y errores de formulario. Úsalo al añadir controles interactivos, formularios, diálogos o revisar WCAG.

Fuente: https://skillsagentes.com/skills/ibelick/ui-skills/fixing-accessibility
Markdown: https://skillsagentes.com/skills/ibelick/ui-skills/fixing-accessibility.md

Repositorio: https://github.com/ibelick/ui-skills
Autor: ibelick
Licencia: MIT
Actualizado: hace 6 meses
Coste de contexto: 55 tok instalada, 1.2k tok al activarse, 1.2k tok con todos los archivos del bundle
Bundle: 1 archivo, 5 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add ibelick/ui-skills --skill fixing-accessibility --agent claude-code
# Cursor
npx -y skills add ibelick/ui-skills --skill fixing-accessibility --agent cursor
# Codex
npx -y skills add ibelick/ui-skills --skill fixing-accessibility --agent codex
# Gemini CLI
npx -y skills add ibelick/ui-skills --skill fixing-accessibility --agent gemini
# Windsurf
npx -y skills add ibelick/ui-skills --skill fixing-accessibility --agent windsurf
# Cline
npx -y skills add ibelick/ui-skills --skill fixing-accessibility --agent cline
```

## Qué hace

- Aplica restricciones de accesibilidad a cualquier trabajo de UI en la conversación.
- Revisa archivos contra reglas de accesibilidad y reporta violaciones con la línea exacta, por qué importa y una corrección concreta.
- Propone arreglos mínimos y específicos sin reescribir grandes partes de la interfaz.
- Prioriza problemas críticos: nombres accesibles, acceso por teclado, gestión del foco y límites de la herramienta.
- Prefiere elementos HTML nativos antes que añadir ARIA cuando ya resuelven el problema.

## Cuándo usarla

- Al añadir o cambiar botones, enlaces, inputs, menús, diálogos, pestañas o desplegables.
- Al construir formularios, validaciones, estados de error o texto de ayuda.
- Al implementar atajos de teclado o interacciones personalizadas.
- Al trabajar con estados de foco, modales, controles solo con iconos o interacciones solo con hover.

## Qué la activa

- "/fixing-accessibility"
- "/fixing-accessibility formulario.html"
- "Revisa la accesibilidad de este modal y dime qué viola WCAG."
- "Corrige el contraste y los nombres accesibles de esta barra de navegación."
- "¿Por qué este botón con solo un icono no es accesible? Arréglalo."

## Archivos

- SKILL.md — 5 KB

## SKILL.md

Reproducido tal cual desde ibelick/ui-skills bajo MIT. Esta sección es el documento original y está en inglés.

# fixing-accessibility

Fix accessibility issues.

## how to use

- `/fixing-accessibility`
  Apply these constraints to any UI work in this conversation.

- `/fixing-accessibility <file>`
  Review the file against all rules below and report:
  - violations (quote the exact line or snippet)
  - why it matters (one short sentence)
  - a concrete fix (code-level suggestion)

Do not rewrite large parts of the UI. Prefer minimal, targeted fixes.

## when to apply

Reference these guidelines when:
- adding or changing buttons, links, inputs, menus, dialogs, tabs, dropdowns
- building forms, validation, error states, helper text
- implementing keyboard shortcuts or custom interactions
- working on focus states, focus trapping, or modal behavior
- rendering icon-only controls
- adding hover-only interactions or hidden content

## rule categories by priority

| priority | category | impact |
|----------|----------|--------|
| 1 | accessible names | critical |
| 2 | keyboard access | critical |
| 3 | focus and dialogs | critical |
| 4 | semantics | high |
| 5 | forms and errors | high |
| 6 | announcements | medium-high |
| 7 | contrast and states | medium |
| 8 | media and motion | low-medium |
| 9 | tool boundaries | critical |

## quick reference

### 1. accessible names (critical)

- every interactive control must have an accessible name
- icon-only buttons must have aria-label or aria-labelledby
- every input, select, and textarea must be labeled
- links must have meaningful text (no “click here”)
- decorative icons must be aria-hidden

### 2. keyboard access (critical)

- do not use div or span as buttons without full keyboard support
- all interactive elements must be reachable by Tab
- focus must be visible for keyboard users
- do not use tabindex greater than 0
- Escape must close dialogs or overlays when applicable

### 3. focus and dialogs (critical)

- modals must trap focus while open
- restore focus to the trigger on close
- set initial focus inside dialogs
- opening a dialog should not scroll the page unexpectedly

### 4. semantics (high)

- prefer native elements (button, a, input) over role-based hacks
- if a role is used, required aria attributes must be present
- lists must use ul or ol with li
- do not skip heading levels
- tables must use th for headers when applicable

### 5. forms and errors (high)

- errors must be linked to fields using aria-describedby
- required fields must be announced
- invalid fields must set aria-invalid
- helper text must be associated with inputs
- disabled submit actions must explain why

### 6. announcements (medium-high)

- critical form errors should use aria-live
- loading states should use aria-busy or status text
- toasts must not be the only way to convey critical information
- expandable controls must use aria-expanded and aria-controls

### 7. contrast and states (medium)

- ensure sufficient contrast for text and icons
- hover-only interactions must have keyboard equivalents
- disabled states must not rely on color alone
- do not remove focus outlines without a visible replacement

### 8. media and motion (low-medium)

- images must have correct alt text (meaningful or empty)
- videos with speech should provide captions when relevant
- respect prefers-reduced-motion for non-essential motion
- avoid autoplaying media with sound

### 9. tool boundaries (critical)

- prefer minimal changes, do not refactor unrelated code
- do not add aria when native semantics already solve the problem
- do not migrate UI libraries unless requested

## common fixes

```html
<!-- icon-only button: add aria-label -->
<!-- before --> <button><svg>...</svg></button>
<!-- after -->  <button aria-label="Close"><svg aria-hidden="true">...</svg></button>

<!-- div as button: use native element -->
<!-- before --> <div onclick="save()">Save</div>
<!-- after -->  <button onclick="save()">Save</button>

<!-- form error: link with aria-describedby -->
<!-- before --> <input id="email" /> <span>Invalid email</span>
<!-- after -->  <input id="email" aria-describedby="email-err" aria-invalid="true" /> <span id="email-err">Invalid email</span>
```

## review guidance

- fix critical issues first (names, keyboard, focus, tool boundaries)
- prefer native HTML before adding aria
- quote the exact snippet, state the failure, propose a small fix
- for complex widgets (menu, dialog, combobox), prefer established accessible primitives over custom behavior

## Dónde encaja

- Categoría: [Herramientas para desarrolladores](https://skillsagentes.com/categorias/herramientas-desarrollo.md) — Skills que cambian cómo tu agente escribe, revisa y despliega código.
- Creador: [ibelick](https://skillsagentes.com/creators/ibelick.md) — 7 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Create Design Md](https://skillsagentes.com/skills/ibelick/ui-skills/create-design-md.md): Crea o actualiza un DESIGN.md desde un repositorio o web pública: documenta el lenguaje de diseño, reconstruye el sistema visual y extrae tokens y pautas de evidencia. No modifica código fuente ni convierte patrones accidentales en diseño.
- [Improve Ui](https://skillsagentes.com/skills/ibelick/ui-skills/improve-ui.md): Audita una interfaz contra su diseño, detecta problemas de UI verificados y escribe planes autocontenidos sin tocar código. Útil para revisar, refinar o limpiar sin cambiar la identidad, ver deriva del design system o preparar un handoff.
- [Ui Skills Root](https://skillsagentes.com/skills/ibelick/ui-skills/ui-skills-root.md): Úsalo antes de trabajo relacionado con UI para seleccionar el contexto de UI Skills más pequeño y útil a través de la CLI ui-skills.
- [Baseline Ui](https://skillsagentes.com/skills/ibelick/ui-skills/baseline-ui.md): Pule rápido el código de interfaz corrigiendo espaciado, jerarquía, tipografía y pequeños problemas de layout. Úsalo cuando la interfaz necesite una limpieza o un pulido rápido.
- [Fixing Motion Performance](https://skillsagentes.com/skills/ibelick/ui-skills/fixing-motion-performance.md): Audita y corrige problemas de rendimiento en animaciones: layout thrashing, propiedades del compositor, movimiento ligado al scroll y desenfoques. Úsalo si las animaciones van a tirones o revisas el rendimiento de animaciones CSS/JS.

## Skills relacionadas

- [Create Design Md](https://skillsagentes.com/skills/ibelick/ui-skills/create-design-md.md): Crea o actualiza un DESIGN.md desde un repositorio o web pública: documenta el lenguaje de diseño, reconstruye el sistema visual y extrae tokens y pautas de evidencia. No modifica código fuente ni convierte patrones accidentales en diseño.
- [Fixing Motion Performance](https://skillsagentes.com/skills/ibelick/ui-skills/fixing-motion-performance.md): Audita y corrige problemas de rendimiento en animaciones: layout thrashing, propiedades del compositor, movimiento ligado al scroll y desenfoques. Úsalo si las animaciones van a tirones o revisas el rendimiento de animaciones CSS/JS.
- [Baseline Ui](https://skillsagentes.com/skills/ibelick/ui-skills/baseline-ui.md): Pule rápido el código de interfaz corrigiendo espaciado, jerarquía, tipografía y pequeños problemas de layout. Úsalo cuando la interfaz necesite una limpieza o un pulido rápido.
- [Fixing Metadata](https://skillsagentes.com/skills/ibelick/ui-skills/fixing-metadata.md): Audita y corrige metadatos HTML: títulos, descripciones, canónicas, Open Graph, Twitter cards, favicons, JSON-LD y robots. Úsalo al añadir SEO, arreglar vistas previas, revisar Open Graph, configurar canónicas o publicar páginas nuevas.
- [Improve Ui](https://skillsagentes.com/skills/ibelick/ui-skills/improve-ui.md): Audita una interfaz contra su diseño, detecta problemas de UI verificados y escribe planes autocontenidos sin tocar código. Útil para revisar, refinar o limpiar sin cambiar la identidad, ver deriva del design system o preparar un handoff.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)