skills.rest
shynlee04
shynlee04COMMUNITY
Explore all skills by this author →
GitHub

Frontend Accessibility

Implement accessible user interfaces with semantic HTML, keyboard navigation, and ARIA support.

Updated Feb 5, 2026
Search Tags:#accessibility#screen reader#keyboard navigation#wcag#semantic html#aria
One-click install
npx skills add https://github.com/shynlee04/idumb-v2 --skill frontend-accessibility-shynlee04
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Accessibility
Source: https://github.com/shynlee04/idumb-v2/tree/main/.agent/skills%20copy/frontend-accessibility
Command: npx skills add https://github.com/shynlee04/idumb-v2 --skill frontend-accessibility-shynlee04

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that user interfaces are usable by everyone, regardless of their abilities, by adhering to accessibility standards.

Core Features & Use Cases

  • Semantic HTML: Use appropriate HTML5 elements for structure and meaning.
  • Keyboard Navigation: Ensure all interactive elements are focusable and operable via keyboard.
  • Color Contrast: Maintain sufficient contrast ratios for text and UI elements.
  • Screen Reader Support: Provide necessary ARIA attributes and alt text for assistive technologies.
  • Use Case: When developing a new modal component, use this skill to ensure it's keyboard-navigable, has proper focus management, and provides ARIA roles for screen reader users.

Quick Start

Use the frontend accessibility skill to ensure the new button component is fully keyboard accessible.

Frequently Asked Questions about Frontend Accessibility

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

FAQPage Schema
How do I make web interfaces accessible with semantic HTML and ARIA?▼

Accessible web interfaces use semantic HTML5 elements for structure and ARIA attributes to provide necessary context for assistive technologies, ensuring screen readers can interpret forms, buttons, and links correctly.

How do I ensure modal components support keyboard navigation and focus management?▼

Modal components achieve keyboard navigation by making all interactive elements focusable and operable, applying proper focus management to trap focus within the modal, and utilizing ARIA roles for screen reader support.

Does this accessibility skill work with frontend frameworks like React, Vue, and Svelte?▼

Yes, this accessibility approach applies to frontend frameworks like React, Vue, and Svelte, as well as direct HTML structures, ensuring components like buttons and dynamic content meet WCAG guidelines across different environments.

What's the best way to implement WCAG guidelines for color contrast and screen reader support?▼

Implementing WCAG guidelines involves maintaining sufficient color contrast ratios for text and UI elements, providing alt text for images, and adding ARIA attributes to ensure screen readers properly announce dynamic content updates.

When do I need ARIA attributes for dynamic content management in web applications?▼

You need ARIA attributes for dynamic content management when standard HTML cannot convey semantic meaning or state changes, ensuring screen readers announce live updates, form validation errors, and custom widget interactions properly.

Why does my keyboard navigation fail on dynamically loaded interactive elements?▼

Keyboard navigation fails when dynamically loaded interactive elements lack proper HTML5 semantics or ARIA roles, making them non-focusable; ensuring elements are operable via keyboard and properly labeled resolves this.

Related Skills

Explore More Design & Creative Skills→
jwyniajwynia

frontend-design

Analyze CSS/HTML foundations and generate design tokens, palettes, typography, and component templates.

Community
Advanced
leboncoinleboncoin
92

check-accessibility

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

Official
Intermediate
nanorepublicananorepublica
61

Frontend Accessibility

Enforce frontend accessibility compliance in HTML, CSS, and JavaScript components.

Community
Basic
Hack23Hack23
9

html-accessibility

Audit static HTML/CSS sites and implement WCAG 2.1 AA accessibility improvements.

Official
Intermediate