skills.rest
chris78rey
chris78reyCOMMUNITY
Explore all skills by this author →
GitHub

accessible-ui-patterns

Provide WCAG 2.1 AA accessible UI patterns as copy-paste-ready code snippets.

Updated Feb 6, 2026
Search Tags:#WCAG#components#copy-paste#accessible#UI-patterns#web-accessibility
One-click install
npx skills add https://github.com/chris78rey/en_construccion --skill accessible-ui-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessible-ui-patterns
Source: https://github.com/chris78rey/en_construccion/tree/main/.opencode/skills/accessible-ui-patterns
Command: npx skills add https://github.com/chris78rey/en_construccion --skill accessible-ui-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Este Skill entrega patrones UI accesibles que cumplen WCAG 2.1 AA, listos para copiar-pegar, para acelerar la creación de interfaces sin sacrificar la accesibilidad ni el diseño profesional.

Core Features & Use Cases

  • Patrones de formularios accesibles con etiquetas correctamente asociadas, descripciones y estados de error claros.
  • Controles accesibles como select, radio y botón, con foco visible y contraste adecuado.
  • Navegación, alertas, modales y tablas diseñados para ser usados como componentes reutilizables en proyectos web.

Quick Start

Copia y pega los snippets de UI accesible en tus páginas para comenzar a cumplir WCAG 2.1 AA de inmediato.

Frequently Asked Questions about accessible-ui-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add accessible UI components that meet WCAG 2.1 AA standards?▼

Accessible UI components meeting WCAG 2.1 AA standards can be added by copying and pasting ready-to-use code snippets directly into your web pages, providing semantic HTML structure and clear ARIA usage without external tooling.

What is the best way to build accessible forms with proper error states?▼

The best way to build accessible forms is using copy-paste-ready patterns that include correctly associated labels, clear descriptions, and defined error states, ensuring visible focus indicators and adequate contrast for immediate integration.

Do I need external libraries to implement accessible modals and navigation?▼

No external libraries are needed to implement accessible modals and navigation, as these self-contained front-end patterns rely solely on semantic HTML structure and clear ARIA usage for immediate integration into professional websites.

Can I use these accessible UI patterns for standard HTML elements like selects and buttons?▼

Yes, you can use these accessible UI patterns for standard HTML elements like selects, radios, and buttons, which feature visible focus states and adequate contrast to comply with WCAG 2.1 AA requirements.

What accessible UI patterns are available for data tables and alerts?▼

Accessible UI patterns available for data tables and alerts include copy-paste-ready code snippets designed as reusable components, featuring semantic HTML structure and clear ARIA usage for professional web projects.

Related Skills

Explore More Design & Creative Skills→
rknallrknall
58

Web Design Builder

Generate accessible HTML5/CSS/JavaScript web designs with WCAG 2.1 AA compliance.

Community
Advanced
mvellandimvellandi

a11y-debugging

Diagnose accessibility issues in web pages using Lighthouse audits and code snippets.

Community
Intermediate
maxrittermaxritter
1.8k

standards-accessibility

Audit frontend components for semantic HTML, ARIA, keyboard navigation, and WCAG compliance.

Community
Basic
profmikegreeneprofmikegreene
1

accessibility-validation

Identify accessibility barriers in digital outputs and prescribe WCAG-aligned remediation.

Community
Intermediate