skills.rest
jhb-software
jhb-softwareOFFICIAL
Explore all skills by this author →
WebsiteGitHub

astro-accessibility

Audits Astro components for WCAG 2.1 AA compliance gaps in accessibility.

38|13|Updated Jun 30, 2025
Search Tags:#accessibility#images#wcag#astro#keyboard#semantic-html#aria
One-click install
npx skills add https://github.com/jhb-software/payload-astro-website-template --skill astro-accessibility
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: astro-accessibility
Source: https://github.com/jhb-software/payload-astro-website-template/tree/main/.claude/skills/astro-accessibility
Command: npx skills add https://github.com/jhb-software/payload-astro-website-template --skill astro-accessibility

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill identifies and closes accessibility gaps in Astro components by guiding semantic markup, ARIA usage, keyboard navigation, and accessible images.

Core Features & Use Cases

  • Enforces semantic HTML structure and ARIA best practices, including meaningful markup for headers, navigation, sections, lists, and landmarks.
  • Guides accessible image handling with proper alt text and ARIA labels for interactive elements.
  • Provides guidance for keyboard operability and focus management across components and pages.

Quick Start

Audit an Astro project and implement WCAG 2.1 AA compliant components.

Frequently Asked Questions about astro-accessibility

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

FAQPage Schema
How do I make Astro components WCAG 2.1 AA compliant?▼

To make Astro components WCAG 2.1 AA compliant, audit your code to enforce semantic HTML structure, proper ARIA labeling, keyboard operability, and accessible images with correct alt text.

What is needed for accessible keyboard navigation in Astro?▼

Accessible keyboard navigation in Astro requires implementing proper focus management across components and pages, ensuring all interactive elements are fully operable without a mouse.

How do I add ARIA labels and semantic HTML to Astro components?▼

Add ARIA labels and semantic HTML to Astro components by applying meaningful markup for headers, navigation, sections, lists, and landmarks according to established best practices.

What is the best way to handle accessible images in Astro?▼

The best way to handle accessible images in Astro is providing proper alt text for visual content and applying appropriate ARIA labels for any interactive image elements.

Can I use this to audit existing Astro projects for accessibility gaps?▼

Yes, you can audit existing Astro projects to identify and close accessibility gaps by checking for semantic structure, ARIA usage, keyboard operability, and image accessibility compliance.

Why are my Astro component landmarks failing WCAG compliance?▼

Astro component landmarks fail WCAG compliance when the semantic HTML structure lacks meaningful markup for headers, navigation, and sections, or when ARIA attributes are incorrectly applied.

Related Skills

Explore More Software Engineering Skills→
AnglesiteAnglesite
2

new-page

Generate a new web page with SEO and accessibility structure in Astro and Keystatic.

Official
Intermediate
kimmyxpowkimmyxpow

wcag-audit-patterns

Identify and remediate WCAG 2.2 accessibility violations with automated testing and checklists.

Community
Advanced
ajelinekajelinek

ui-engineering

Codify and enforce shared UI engineering standards for TypeScript projects.

Community
Advanced
AGMO-IncAGMO-Inc
4

accessibility

Detect WCAG accessibility issues in React/HTML/CSS via static review.

Official
Intermediate