ui-accessibility

Analyze semantic HTML, ARIA attributes, and keyboard navigation for accessibility issues.

1|3|Updated Sep 4, 2023

Search Tags:#semantic HTML #keyboard navigation #ARIA #WCAG #web accessibility

Ready to run

npx skills add https://github.com/grvpanchal/elegant --skill ui-accessibility-grvpanchal

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-accessibility
Source: https://github.com/grvpanchal/elegant/tree/main/skills/ui-accessibility
Command: npx skills add https://github.com/grvpanchal/elegant --skill ui-accessibility-grvpanchal

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps ensure that web components are accessible to users with disabilities, improving the user experience and compliance with WCAG standards.

Core Features & Use Cases

Accessibility Review: Helps identify and fix issues with semantic HTML, ARIA attributes, and keyboard navigation.
ARIA Usage: Adds ARIA roles and labels for custom widgets and implements keyboard navigation.
Color Contrast: Audits and enforces color contrast ratios for readability.
Use Case: When you need to ensure that your web components are accessible to users with visual impairments, such as those who use screen readers or have limited motor skills.

Quick Start

Use the ui-accessibility skill to review the accessibility of your React component 'MyComponent.jsx'.

Frequently Asked Questions about ui-accessibility

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

FAQPage Schema

How do I check web component accessibility for screen readers?▼

To check web component accessibility, review semantic HTML structure, add appropriate ARIA roles and labels, and verify keyboard navigation works properly. This ensures screen reader compatibility and improves usability for users with visual impairments.

How do I ensure my web components meet WCAG standards?▼

Ensuring web components meet WCAG standards involves applying POUR principles, auditing color contrast ratios, adding missing alt text, and implementing proper keyboard navigation to enhance accessibility for users with disabilities.

Can I use semantic HTML to fix keyboard navigation issues?▼

Yes, using proper semantic HTML elements intrinsically resolves many keyboard navigation issues by providing default focus management and interaction behaviors, reducing the need for manual ARIA implementations.

What do I need to know to audit color contrast ratios for readability?▼

Auditing color contrast ratios requires understanding WCAG readability standards to identify insufficient contrast between text and background colors, ensuring visual content is accessible to users with visual impairments.

Why does my custom widget fail web accessibility checks despite using ARIA?▼

Custom widgets often fail web accessibility checks when ARIA attributes are misapplied or semantic HTML is ignored, requiring proper role implementation and keyboard navigation mapping to resolve the issues.