skills.rest
elliotsaha
elliotsahaCOMMUNITY
Explore all skills by this author →
GitHub

Frontend Accessibility

Guide frontend UI components toward WCAG-compliant semantics, keyboard navigation, and screen reader support.

Updated Aug 23, 2026
Search Tags:#accessibility#screen reader#semantic HTML#keyboard navigation#WCAG#frontend#UI/UX
One-click install
npx skills add https://github.com/elliotsaha/smt-slack-app --skill frontend-accessibility-elliotsaha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Accessibility
Source: https://github.com/elliotsaha/smt-slack-app/tree/main/.claude/skills/frontend-accessibility
Command: npx skills add https://github.com/elliotsaha/smt-slack-app --skill frontend-accessibility-elliotsaha

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures that user interfaces are accessible to everyone, including individuals with disabilities, by automating adherence to WCAG guidelines. It reduces the effort required to build inclusive UIs, expanding your user base and complying with accessibility standards.

Core Features & Use Cases

  • WCAG Compliance: Guides the implementation of accessible design principles.
  • Semantic HTML: Promotes the use of meaningful HTML structures.
  • Keyboard Navigation: Ensures all interactive elements are navigable without a mouse.
  • Use Case: When creating a new modal dialog, this Skill ensures the AI uses appropriate ARIA attributes, manages focus correctly for keyboard users, and provides sufficient color contrast for text elements, making it usable for screen reader users.

Quick Start

When building the LoginButton component, ensure it uses a semantic <button> tag and has a clear focus state for keyboard users.

Frequently Asked Questions about Frontend Accessibility

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

FAQPage Schema
How do I ensure my frontend UI meets WCAG accessibility standards?▼

WCAG accessibility ensures UIs are usable by everyone, including people with disabilities. This Skill guides implementation of semantic HTML, keyboard navigation, ARIA attributes, color contrast, and screen reader support across components, pages, forms, and modals to meet compliance standards.

What's the best way to make interactive elements keyboard navigable?▼

Keyboard navigation allows users without mice to access all interactive elements. Use semantic HTML tags like `<button>` and `<a>`, manage focus states visibly, ensure logical tab order, and avoid trapping focus. This Skill applies these patterns to components and dynamic content automatically.

How do I structure HTML semantically for screen readers?▼

Semantic HTML uses meaningful tags (`<nav>`, `<main>`, `<heading>`, `<button>`) that screen readers interpret correctly. Proper heading hierarchy, alt text for images, and form labels enable assistive technology users to understand page structure and content.

When building a modal or form, what accessibility considerations matter most?▼

Modals and forms need focus management, ARIA attributes (like `aria-label` and `aria-modal`), keyboard closure, sufficient color contrast, and clear labels. This Skill ensures these patterns are applied so keyboard and screen reader users can interact fully.

Can I check color contrast and focus states in my UI components?▼

Color contrast and visible focus states are critical for users with low vision or those navigating by keyboard. This Skill applies WCAG contrast ratios and highlight focus indicators across your component library, forms, and pages.

Do I need accessibility review for dynamic content and state changes?▼

Dynamic content requires ARIA live regions, proper role announcements, and focus management so screen reader users are notified of updates. This Skill covers dynamic UI patterns in addition to static components to ensure full accessibility.

Related Skills

Explore More Software Engineering Skills→
martinezharomartinezharo

accessibility

Audit web interfaces for WCAG 2.2 compliance and implement accessible patterns.

Community
Intermediate
BRANDNEWSHVTBRANDNEWSHVT

accessibility-audit

Identify and fix WCAG 2.1 AA accessibility gaps in frontend user interfaces.

Official
Advanced
haabehaabe

a11y-check

Audits web interfaces for WCAG 2.1 AA accessibility compliance.

Community
Intermediate
CrazyDubyaCrazyDubya

accessibility-auditor

Audit web applications for WCAG 2.1 Level AA accessibility compliance.

Community
Intermediate