skills.rest
Tibsfox
TibsfoxCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

accessibility-patterns

Audit UI focus order, semantic clarity, and color contrast to fix accessibility issues.

69|9|Updated Jan 30, 2026
Search Tags:#accessibility#a11y#wcag#semantic-html#color-contrast#aria#keyboard-navigation
One-click install
npx skills add https://github.com/Tibsfox/gsd-skill-creator --skill accessibility-patterns-tibsfox
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-patterns
Source: https://github.com/Tibsfox/gsd-skill-creator/tree/main/examples/skills/accessibility-patterns
Command: npx skills add https://github.com/Tibsfox/gsd-skill-creator --skill accessibility-patterns-tibsfox

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web accessibility is often overlooked, leading to interfaces that exclude users with disabilities. This guide consolidates best practices to help teams build inclusive UI patterns that meet WCAG criteria.

Core Features & Use Cases

  • Comprehensive guidance on semantic HTML, ARIA roles, color contrast, and keyboard navigation.
  • Real-world examples showing how to fix common a11y pitfalls in components like buttons, forms, and navigation.
  • Use Case: A developer updates a form to be fully accessible for screen readers and keyboard-only users.

Quick Start

Audit a current UI for focus order, semantic clarity, and color contrast, then apply the patterns described above to fix identified issues.

Frequently Asked Questions about accessibility-patterns

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

FAQPage Schema
How do I make web components accessible for keyboard navigation and screen readers?▼

Make web components accessible by applying semantic HTML, correct ARIA roles, and logical keyboard navigation patterns to ensure screen readers and keyboard-only users can interact with all UI elements effectively.

What is the best way to fix color contrast issues to meet WCAG 2.1 AA conformance?▼

Fix color contrast issues by auditing your UI to identify failing color pairs and applying accessible contrast patterns that meet WCAG 2.1 AA requirements for text and interactive elements.

How do I use semantic HTML and ARIA attributes to improve form accessibility?▼

Improve form accessibility by using semantic HTML for input labels and grouping, applying ARIA attributes for dynamic error messaging, and ensuring keyboard navigation works for all form controls.

When do I need ARIA roles for UI components, and when is semantic HTML enough?▼

Use semantic HTML as the baseline for accessibility, and apply ARIA roles only when native HTML cannot convey the necessary semantics for dynamic UI components or complex navigation patterns.

Can I audit an existing web interface for WCAG 2.1 AA compliance issues?▼

Yes, you can audit an existing web interface by checking focus order, semantic clarity, and color contrast, then apply documented accessibility patterns to fix any identified issues.

What are common accessibility pitfalls in web navigation and forms?▼

Common accessibility pitfalls include missing keyboard focus states, improper ARIA usage, insufficient color contrast, and non-semantic HTML in forms and navigation, all fixable with established a11y patterns.

Related Skills

Explore More Design & Creative Skills→
nattergabrielnattergabriel
2

accessibility

Identify and resolve accessibility gaps in web user interfaces using ARIA guidelines.

Community
Intermediate
DanielPodolskyDanielPodolsky
274

accessibility-fundamentals

Identify and fix accessibility issues in JSX UI components using WCAG, ARIA, and keyboard navigation.

Community
Basic
hiyenwonghiyenwong
2

accessibility-wcag

Audit web interfaces for WCAG 2.2 conformance and provide remediation guidance.

Community
Advanced
dylantarredylantarre
38

color-contrast

Validate color combinations against WCAG 2.1 contrast requirements and generate accessible pairings.

Community
Basic