skills.rest
flitzrrr
flitzrrrCOMMUNITY
Explore all skills by this author →
𝕏@flitzrrrGitHub

accessibility

Audit web interfaces for HTML semantics, ARIA, keyboard navigation, and color contrast.

4|1|Updated Apr 4, 2026
Search Tags:#accessibility#a11y#forms#semantic-html#aria#keyboard-navigation#wcag-2.1
One-click install
npx skills add https://github.com/flitzrrr/frontend-design-skills --skill accessibility-flitzrrr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/flitzrrr/frontend-design-skills/tree/main/skills-src/accessibility
Command: npx skills add https://github.com/flitzrrr/frontend-design-skills --skill accessibility-flitzrrr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Audit and improve the accessibility of web interfaces, ensuring semantic HTML, ARIA, keyboard navigation, color contrast, and BFSG/WCAG compliance.

Core Features & Use Cases

  • Semantic HTML guidance with proper tag usage, landmark roles, and native controls.
  • ARIA attributes, keyboard navigation parity, contrast validation, accessible forms, and media accessibility patterns.
  • Use Case: A frontend team performs an accessibility audit and implements fixes to meet WCAG 2.1 AA across multiple pages.

Quick Start

Run a guided accessibility assessment on the current project to identify and fix violations.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I audit my web interface for WCAG 2.1 AA conformance?▼

To audit web interface accessibility for WCAG 2.1 AA conformance, run a guided assessment to identify violations across semantic HTML, ARIA attributes, keyboard navigation, and color contrast rules.

What is the best way to implement accessible forms using semantic HTML and ARIA?▼

The best way to implement accessible forms is by enforcing semantic HTML tag usage and applying ARIA best practices to ensure proper label associations, landmark roles, and keyboard input parity for users.

How does keyboard navigation parity work for frontend projects?▼

Keyboard navigation parity works by ensuring all interactive interface elements remain fully operable without a mouse, enforcing native HTML controls and ARIA patterns to support standard keyboard accessibility.

When do I need to validate color contrast for BFSG compliance?▼

You need to validate color contrast for BFSG compliance when auditing frontend projects across multiple pages, ensuring text and visual elements meet strict WCAG 2.1 AA contrast requirements.

Can I use this accessibility audit approach for media elements?▼

Yes, you can use this approach for media elements by applying media accessibility patterns alongside semantic HTML and ARIA rules to ensure audio and video interfaces meet BFSG and WCAG compliance.

Related Skills

Explore More Design & Creative Skills→
thec3ukthec3uk

Frontend Accessibility

Guide frontend code to meet accessibility standards like ARIA and keyboard navigation.

Official
Basic
arcasilesgrouparcasilesgroup
54

accessibility

Review frontend code for WCAG 2.1 AA compliance and report actionable findings.

Official
Advanced
marcustamarcusta

contrast-validator

Validate WCAG AA contrast ratios in React, Vue, or HTML/CSS code.

Community
Intermediate
Gaku52Gaku52
6

web-accessibility

Implement WCAG-compliant accessibility with semantic HTML, ARIA, and testing workflows.

Community
Basic