accessibility

Apply WCAG 2.1 accessibility patterns and checks to UI components.

2|Updated Apr 9, 2026

Search Tags:#accessibility #wcag #semantic-html #aria #keyboard-navigation #focus-management

Ready to run

npx skills add https://github.com/fernando-bertholdo/4-successful-AI-life --skill accessibility-fernando-bertholdo

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/fernando-bertholdo/4-successful-AI-life/tree/main/plugins/ui-excellence/skills/foundations/accessibility
Command: npx skills add https://github.com/fernando-bertholdo/4-successful-AI-life --skill accessibility-fernando-bertholdo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide helps teams build and review accessible UI components by providing practical patterns, examples, and testing practices that align with WCAG 2.1.

Core Features & Use Cases

Semantic HTML foundations and proper landmark usage to improve document structure.
Keyboard navigation patterns, focus management, and ARIA attribute guidance for interactive components.
Testing guidance with automated tools (axe-core, Lighthouse) and manual checks for screen readers and color contrast.
Use Case: For a new form or modal, apply the patterns to ensure keyboard focus, visible focus rings, meaningful labels, and accessible error messaging.

Quick Start

Inspect a UI component for semantic structure, add appropriate ARIA attributes, and implement keyboard interactions following the examples.

Frequently Asked Questions about accessibility

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

FAQPage Schema

How do I make my UI components WCAG 2.1 compliant?▼

WCAG 2.1 compliant UI components require semantic HTML foundations, proper landmark usage, ARIA attributes, and keyboard navigation patterns. Validate implementations using axe-core, Lighthouse, and manual screen reader checks.

What is the best way to implement keyboard navigation and focus management for web accessibility?▼

Keyboard navigation and focus management require proper ARIA attributes and semantic HTML structure. Implement visible focus rings, meaningful labels, and logical tab order to ensure interactive components are fully operable without a mouse.

How do I add accessible error messaging to forms and modals?▼

Accessible error messaging in forms and modals uses ARIA attributes to link errors to input fields. Apply semantic HTML labels, manage keyboard focus to the error or input, and ensure screen readers announce validation feedback clearly.

Does this accessibility approach work with automated testing tools like axe-core and Lighthouse?▼

Yes, this accessibility approach is designed for validation with automated tools like axe-core and Lighthouse. It provides actionable patterns for semantic HTML and ARIA that these tools check, alongside guidance for manual screen reader and color contrast verification.

Why does my screen reader skip interactive elements in my web dashboard?▼

Screen readers skip interactive elements when semantic HTML is missing or ARIA attributes are incorrectly applied. Ensure proper landmark usage, add meaningful labels, and implement focus management so screen readers correctly identify and navigate interactive components.