skills.rest
bradtaylorsf
bradtaylorsfCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

accessibility-patterns

Provide WCAG-compliant web accessibility patterns with semantic HTML and ARIA examples.

8|2|Updated Jan 15, 2026
Search Tags:#accessibility#keyboard navigation#frontend#wcag#semantic html#aria
One-click install
npx skills add https://github.com/bradtaylorsf/alphaagent-team --skill accessibility-patterns-bradtaylorsf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-patterns
Source: https://github.com/bradtaylorsf/alphaagent-team/tree/main/plugins/aai-dev-frontend/skills/accessibility-patterns
Command: npx skills add https://github.com/bradtaylorsf/alphaagent-team --skill accessibility-patterns-bradtaylorsf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating web applications that are usable by everyone, regardless of their abilities, by providing patterns and best practices for web accessibility.

Core Features & Use Cases

  • Semantic HTML: Guides developers on using appropriate HTML elements for better structure and accessibility.
  • Keyboard Navigation: Demonstrates techniques for ensuring full keyboard operability.
  • ARIA Patterns: Provides examples of using ARIA attributes to enhance screen reader support for dynamic content and custom components.
  • Color & Contrast: Explains WCAG contrast ratio requirements and how to avoid relying solely on color.
  • Image & Media Accessibility: Details best practices for alt text and video captions.
  • Use Case: A developer can use this skill to ensure their new e-commerce site is navigable by keyboard users and properly announced by screen readers, meeting WCAG 2.1 AA compliance.

Quick Start

Apply semantic HTML elements and proper heading hierarchy to improve web page structure.

Frequently Asked Questions about accessibility-patterns

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

FAQPage Schema
How do I make my web application accessible and meet WCAG compliance?▼

To ensure keyboard navigation is fully accessible, implement logical tab ordering, manage focus states for dynamic content, and use ARIA attributes to announce interactive custom components to screen readers.

What is the correct way to use ARIA roles and semantic HTML for screen reader support?▼

The correct way to use ARIA roles and semantic HTML is to prioritize native HTML elements for structure, applying ARIA attributes only to enhance dynamic content and custom components where standard semantics are insufficient.

How do I meet WCAG color contrast requirements without relying solely on color?▼

To meet WCAG color contrast requirements, maintain a 4.5:1 ratio for text against backgrounds, and pair color-coded indicators with text labels or patterns to avoid relying solely on color for information.

Can I use these accessibility patterns for an e-commerce site frontend?▼

You can use these accessibility patterns for an e-commerce site frontend to ensure your platform is navigable by keyboard users, properly announced by screen readers, and meets WCAG 2.1 AA compliance standards.

What are the limitations of using ARIA for web accessibility compliance?▼

A limitation of using ARIA for web accessibility compliance is that it cannot substitute for missing semantic HTML structure; overusing ARIA can disrupt screen reader announcements rather than enhancing them.

Related Skills

Explore More Software Engineering Skills→
dragoscirjandragoscirjan

lang-html

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

Community
Basic
ouakarouakar

accessibility-engineer

Audit web and mobile interfaces for WCAG 2.2 AA/AAA conformance.

Community
Advanced
thec3ukthec3uk

Frontend Accessibility

Guide frontend code to meet accessibility standards like ARIA and keyboard navigation.

Official
Basic
joabgonzalezjoabgonzalez
7

html

Write semantic, accessible HTML markup with proper heading hierarchy and ARIA-compliant semantics.

Community
Advanced