skills.rest
grvpanchal
grvpanchalCOMMUNITY
Explore all skills by this author →
Website𝕏@grvpanchalGitHub

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
One-click install
npx skills add https://github.com/grvpanchal/elegant --skill ui-accessibility-grvpanchal
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
deepfuturenowdeepfuturenow

port-base-ui

Port Base UI React components to Lit-based DUI primitives while preserving accessibility.

Official
Advanced
pacphipacphi
6

accessibility-testing

Perform WCAG 2.2 accessibility testing on web applications with axe-core.

Community
Advanced
marcusagmmarcusagm
4

lint-and-validate

Run linting, type checking, and security audits across Node.js/TypeScript and Python projects.

Community
Intermediate
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-forced-colors

Detect forced-colors accessibility failures in rendered web pages.

Community
Intermediate