skills.rest
Omar-Obando
Omar-ObandoCOMMUNITY
Explore all skills by this author →
GitHub

accessibility-implementation

Implement WCAG 2.1 AA accessible web content with semantic HTML and ARIA.

44|9|Updated May 7, 2026
Search Tags:#accessibility#screen reader#keyboard navigation#semantic html#accessibility testing#aria#wcag 2.1 aa
One-click install
npx skills add https://github.com/Omar-Obando/qwen-orchestrator --skill accessibility-implementation-omar-obando
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-implementation
Source: https://github.com/Omar-Obando/qwen-orchestrator/tree/main/skills/accessibility-implementation
Command: npx skills add https://github.com/Omar-Obando/qwen-orchestrator --skill accessibility-implementation-omar-obando

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you prevent accessibility regressions by guiding you to implement web interfaces that meet WCAG 2.1 AA expectations for people using keyboards and screen readers.

Core Features & Use Cases

  • Semantic HTML guidance: Choose correct native elements for structure (header/nav/main/footer/etc.) to improve robustness and assistive-technology interpretation.
  • ARIA + state management: Add appropriate landmark roles and dynamic announcements using aria-live, aria-expanded, aria-selected, and related state attributes.
  • Keyboard and focus behavior: Implement logical tab order, visible focus, skip links, and safe focus trapping for modals/dialogs.
  • Accessibility testing and verification: Use automated and manual checks to validate contrast, labeling, error announcements, and overall operability.

Quick Start

Ask the AI to audit and refactor your current UI code to make it keyboard- and screen-reader-accessible and compliant with WCAG 2.1 AA, including semantic markup, ARIA where appropriate, focus management, and a testing checklist.

Frequently Asked Questions about accessibility-implementation

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

FAQPage Schema
How do I make my web app WCAG 2.1 AA compliant?▼

To make your web app WCAG 2.1 AA compliant, apply semantic HTML structure, appropriate ARIA roles and states, logical keyboard navigation patterns, and screen-reader friendly announcements to ensure operability for assistive technologies.

What is the best way to implement keyboard navigation and focus trapping for modals?▼

The best way to implement keyboard navigation and focus trapping for modals is to use semantic HTML combined with ARIA attributes, ensuring logical tab order, visible focus indicators, and safe focus management within the dialog.

How do I add ARIA roles and aria-live announcements for dynamic UI updates?▼

Add ARIA roles and aria-live announcements for dynamic UI updates by applying appropriate landmark roles and utilizing state attributes like aria-expanded and aria-selected to communicate content changes directly to screen readers.

Does this accessibility approach work for complex elements like forms, charts, and tables?▼

Yes, this accessibility approach works for complex elements like forms, charts, and tables by providing specific semantic markup, error messaging, and accessible media styling guidance aligned with W3C ARIA Authoring Practices across common frontend scenarios.

How do I test accessibility and verify contrast targets in my frontend code?▼

Test accessibility and verify contrast targets in your frontend code by running both automated and manual checks to validate color contrast, accurate labeling, proper error announcements, and overall keyboard operability.

Why do screen readers struggle with my website's navigation and structure?▼

Screen readers struggle with website navigation and structure when semantic HTML elements like header, nav, and main are missing, preventing assistive technologies from correctly interpreting landmarks and dynamic content updates.

Related Skills

Explore More Design & Creative Skills→
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced
leboncoinleboncoin
92

check-accessibility

Automate WCAG 2.1 AA accessibility testing of Spark UI components with Playwright.

Official
Intermediate
marjan-ahmedmarjan-ahmed

frontend-qa

Automate frontend accessibility and QA validation for HTML, CSS, and JavaScript.

Community
Advanced
bdbchbdbch
2

accessibility-review

Audit web applications for WCAG 2.1/2.2 accessibility compliance in Chrome.

Community
Advanced