skills.rest
fernando-bertholdo
fernando-bertholdoCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/fernando-bertholdo/4-successful-AI-life --skill accessibility-fernando-bertholdo
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
dragoscirjandragoscirjan

lang-html

Enforce semantic HTML, WCAG 2.1 AA accessibility, and keyboard navigability.

Community
Basic
AndersonBaezPAndersonBaezP

accessibility

Audit web pages for WCAG 2.1 compliance using Lighthouse and axe-core.

Community
Advanced
erp-mafiaerp-mafia
209

swarm-a11y-agent

Audit Next.js/React frontend code for WCAG AA accessibility compliance.

Official
Advanced
lexicalninjalexicalninja
2

accessibility-design-checker

Identify accessibility issues in UI designs, wireframes, and prototypes.

Community
Intermediate