skills.rest
saint2706
saint2706COMMUNITY
Explore all skills by this author →
𝕏@Saint2706GitHub

web-accessibility

Implement WCAG 2.1 accessibility standards for web interfaces.

Updated Aug 21, 2021
Search Tags:#accessibility#a11y#ARIA#WCAG#frontend#screen-reader#keyboard-navigation
One-click install
npx skills add https://github.com/saint2706/Coding-For-MBA --skill web-accessibility-saint2706
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-accessibility
Source: https://github.com/saint2706/Coding-For-MBA/tree/main/.agents/skills/web-accessibility
Command: npx skills add https://github.com/saint2706/Coding-For-MBA --skill web-accessibility-saint2706

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures your web interfaces are usable by everyone, regardless of ability, by adhering to accessibility standards and best practices.

Core Features & Use Cases

  • Semantic HTML: Guides the use of meaningful HTML elements for better structure and screen reader compatibility.
  • Keyboard Navigation: Ensures all interactive elements can be accessed and operated using only a keyboard.
  • ARIA Implementation: Provides guidance on using ARIA attributes to enhance screen reader experiences for dynamic content and custom components.
  • Visual Accessibility: Addresses color contrast and focus indicators for users with visual impairments.
  • Testing: Outlines methods for automated and manual accessibility testing.
  • Use Case: When developing a new modal component, use this Skill to ensure it's fully keyboard navigable, has proper ARIA roles, and announces its presence and state to screen readers.

Quick Start

Implement accessible web interfaces by following WCAG 2.1 guidelines for semantic HTML, keyboard navigation, and ARIA attributes.

Frequently Asked Questions about web-accessibility

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

FAQPage Schema
How do I make a web modal component accessible to screen readers?▼

Make modal components accessible to screen readers by implementing proper ARIA roles, ensuring full keyboard navigation, and using semantic HTML so the component announces its presence and state dynamically.

What is the best way to implement keyboard navigation for custom UI components?▼

Implement keyboard navigation by ensuring all interactive elements can be accessed and operated using only a keyboard, following WCAG 2.1 guidelines for focus management and semantic structure.

Does this accessibility guidance work with React, Vue, and Svelte?▼

Yes, the accessibility guidance handles ARIA attributes, semantic HTML, and keyboard navigation testing across various frontend frameworks including React, Vue, and Svelte.

When do I need to use ARIA attributes in frontend development?▼

Use ARIA attributes in frontend development to enhance screen reader experiences for dynamic content and custom components when semantic HTML alone cannot convey the necessary state or structure.

How do I test web accessibility for visual impairments like color contrast?▼

Test web accessibility for visual impairments by checking color contrast ratios and verifying visible focus indicators, utilizing both automated tools and manual testing methods outlined by WCAG 2.1.

Related Skills

Explore More Software Engineering Skills→
89jobrien89jobrien
4

web-accessibility

Audit web content for WCAG 2.1/2.2 conformance and accessibility issues.

Community
Advanced
matteocervellimatteocervelli
25

accessibility-checker

Identify and report WCAG 2.1 Level AA accessibility violations on web pages.

Community
Advanced
beardcoderbeardcoder

css-a11y

Audit CSS for accessibility issues and fix focus, motion, and contrast patterns.

Community
Advanced
bdbchbdbch
2

accessibility-review

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

Community
Advanced