CommunityProgramación y desarrollogithub.com

mindrally/accessibilidad-a11y

Implementa las mejores prácticas de accesibilidad web (a11y) siguiendo las pautas WCAG para crear interfaces de usuario inclusivas y accesibles.

¿Qué es accessibilidad-a11y?

Esta habilidad, mindrally/accessibility-a11y, proporciona a los desarrolladores y agentes de IA un conjunto de directrices y prácticas recomendadas para implementar accesibilidad web (a11y) de acuerdo con los estándares WCAG (Web Content Accessibility Guidelines). Su propósito es garantizar que las interfaces de usuario sean inclusivas y utilizables por personas con diversas capacidades, incluyendo aquellas con discapacidades visuales, auditivas, motoras o cognitivas. Es útil para cualquier proyecto de desarrollo web que busque cumplir con normativas de accesibilidad, mejorar la experiencia del usuario y evitar barreras de acceso. La habilidad se basa en la documentación SKILL.md, que detalla principios clave como la percepción, operabilidad, comprensibilidad y robustez, así como técnicas para aplicar etiquetas ARIA, contraste de color, navegación por teclado y pruebas automatizadas o manuales. Funciona en plataformas como Claude Code, Cursor y Codex, integrando estas pautas en el flujo de trabajo del agente para auditar, corregir y optimizar el código en tiempo real.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mindrally/skills/tree/main/skills/accessibility-a11y

Installed? Explore more Programación y desarrollo skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

¿Qué hace accessibilidad-a11y?

Implementa las mejores prácticas de accesibilidad web (a11y) siguiendo las pautas WCAG para crear interfaces de usuario inclusivas y accesibles.

Descripción general

Esta habilidad guía a los agentes de IA en la aplicación de los principios de accesibilidad web durante el desarrollo de interfaces de usuario. Cubre desde la semántica HTML adecuada hasta el uso de roles ARIA, contraste de color, navegación por teclado y manejo de enfoque.

Principios clave

  • Perceptible: La información y los componentes de la interfaz de usuario deben presentarse de manera que los usuarios puedan percibirlos.
  • Operable: Los componentes de la interfaz de usuario y la navegación deben ser operables.
  • Comprensible: La información y la operación de la interfaz de usuario deben ser comprensibles.
  • Robusto: El contenido debe ser suficientemente robusto para ser interpretado de manera fiable por una amplia variedad de agentes de usuario, incluyendo tecnologías de asistencia.

Prácticas recomendadas

  1. Semántica HTML: Usa elementos HTML semánticos como <header>, <nav>, <main>, <article>, y <footer>.
  2. Roles ARIA: Aplica roles ARIA solo cuando no exista un elemento HTML nativo adecuado.
  3. Contraste de color: Asegura una relación de contraste mínima de 4.5:1 para texto normal y 3:1 para texto grande.
  4. Navegación por teclado: Verifica que todos los elementos interactivos sean accesibles mediante teclado.
  5. Etiquetas descriptivas: Proporciona etiquetas claras y descriptivas para todos los formularios, botones y enlaces.
  6. Gestión del enfoque: Implementa un orden de enfoque lógico y consistente.
  7. Texto alternativo: Incluye texto alternativo significativo en todas las imágenes.
  8. Pruebas de accesibilidad: Realiza pruebas utilizando herramientas automáticas y manuales, como lectores de pantalla (NVDA, VoiceOver).

Plataformas compatibles

  • Claude Code
  • Cursor
  • Codex

Cómo usarlo

Integra esta habilidad en tu agente de IA para auditar y mejorar la accesibilidad de tus proyectos web. El agente aplicará las pautas WCAG de manera consistente durante el desarrollo.

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

mindrally/chrome-extension-development

Expert guidelines for Chrome extension development with Manifest V3, covering security, performance, and best practices. Use when building browser extensions, creating popup UIs, implementing content scripts, working with Chrome APIs, managing extension permissions, or publishing to Chrome Web Store.

mindrally/computer-vision-opencv

Expert guidance for computer vision development using OpenCV, PyTorch, and modern deep learning techniques for image and video processing.

mindrally/data-analysis-jupyter

Expert guidance for data analysis, visualization, and Jupyter Notebook development with pandas, matplotlib, seaborn, and numpy.

mindrally/deep-learning-pytorch

Expert guidance for deep learning, transformers, diffusion models, and LLM development with PyTorch, Transformers, Diffusers, and Gradio.

mindrally/expo-react-native-typescript

Expert in Expo React Native TypeScript mobile development with best practices

mindrally/fastapi-python

Expert in FastAPI Python development with best practices for APIs and async operations

mindrally/framer-motion

Expert guidelines for building performant animations with Framer Motion/Motion library in React applications

mindrally/htmx

HTMX development guidelines for building dynamic web applications with minimal JavaScript using HTML attributes.

mindrally/jwt-security

Guidelines for implementing JWT authentication with security best practices for token creation, validation, and storage

mindrally/machine-learning

Machine learning development with JAX, functional programming patterns, and high-performance computing.

mindrally/mysql-best-practices

MySQL development best practices for schema design, query optimization, and database administration

mindrally/nextjs-react-typescript

Expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind

mindrally/nextjs-typescript-tailwindcss-supabase

Full-stack Next.js 14 development with TypeScript, TailwindCSS, and Supabase for building production-ready web applications.

mindrally/odoo-development

Expert guidance for Odoo ERP development including Python ORM, XML views, and module architecture

mindrally/puppeteer-automation

Expert guidance for browser automation using Puppeteer with best practices for web scraping, testing, screenshot capture, and JavaScript execution in headless Chrome.

mindrally/redis-best-practices

Redis development best practices for caching, data structures, and high-performance key-value operations

mindrally/scrapy-web-scraping

Expert guidance for building web scrapers and crawlers using the Scrapy Python framework with best practices for spider development, data extraction, and pipeline management.

mindrally/scss-best-practices

SCSS/Sassy CSS best practices and coding guidelines for maintainable, scalable stylesheets

mindrally/typeorm

Guidelines for developing with TypeORM, a full-featured ORM for TypeScript and JavaScript supporting multiple databases

mindrally/web-scraping

Expert in web scraping and data extraction with Python tools

Skills relacionados