skills.rest
lord-vinayak
lord-vinayakCOMMUNITY
Explore all skills by this author →
Website𝕏@lord_vinayak_GitHub

keyboard-focus-auditor

Audits web keyboard accessibility including tab order and WCAG compliance using CSS and JavaScript.

Updated May 19, 2026
Search Tags:#accessibility#keyboard navigation#WCAG#focus management#tab order
One-click install
npx skills add https://github.com/lord-vinayak/orive-reqcap --skill keyboard-focus-auditor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: keyboard-focus-auditor
Source: https://github.com/lord-vinayak/orive-reqcap/tree/main/.claude/skills/audit/keyboard-focus-auditor_
Command: npx skills add https://github.com/lord-vinayak/orive-reqcap --skill keyboard-focus-auditor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, axe-core, focus-trap, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the complex task of auditing and improving keyboard accessibility in user interfaces, ensuring compliance with WCAG standards.

Core Features & Use Cases

  • Tab Order Audit: Identifies and corrects tab order issues for seamless navigation.
  • Focus Management: Validates focus traps and skip links, improving usability for keyboard and assistive technology users.
  • Complex Scenarios: Handles nested modals, comboboxes, and virtual scrolling with focus management.
  • Focus Indicator Assessment: Ensures visible and contrast-compliant focus indicators for all interactive elements.
  • Windows High Contrast Mode: Provides solutions for maintaining accessibility in high contrast modes.
  • Roving Tabindex Pattern: Supports dynamic focus handling for components with multiple focusable items.
  • Keyboard Shortcut Conflict Avoidance: Helps implement keyboard shortcuts without conflicts.

Quick Start

Use the keyboard-focus-auditor skill to perform a full audit on your web application 'my-app.html'.

Frequently Asked Questions about keyboard-focus-auditor

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

FAQPage Schema
How do I audit keyboard navigation and tab order in my web application?▼

Keyboard navigation auditing requires evaluating tab order and focus management against WCAG 2.1/2.2 criteria. This Skill conducts a comprehensive audit using JavaScript for interactive focus handling and CSS for visual feedback to identify and correct navigation issues.

What is focus management and how does it apply to complex UI scenarios?▼

Focus management controls where keyboard focus moves during user interactions. This Skill validates focus traps and skip links while handling complex scenarios like nested modals, comboboxes, and virtual scrolling to ensure seamless accessibility.

How do I check if my focus indicators are WCAG compliant?▼

Focus indicator assessment ensures all interactive elements have visible and contrast-compliant outlines. This audit checks your CSS visual feedback against WCAG 2.1/2.2 accessibility criteria to maintain compliance for keyboard and assistive technology users.

Can I use axe-core and puppeteer to automate keyboard accessibility testing?▼

axe-core and puppeteer are supported dependencies for automating keyboard accessibility testing. Combined with focus-trap, they enable comprehensive validation of tab order, focus management, and complex interactive scenarios within web development workflows.

How do I implement the roving tabindex pattern for dynamic focus handling?▼

The roving tabindex pattern manages dynamic focus for components with multiple focusable items. This Skill supports implementing this pattern to ensure proper keyboard navigation without conflicts, improving usability for complex UI widgets.

Does this keyboard accessibility audit handle Windows High Contrast Mode?▼

Windows High Contrast Mode accessibility is explicitly handled by this audit. The Skill provides solutions for maintaining visible focus indicators and keyboard navigation compliance when users have high contrast system settings enabled.

Related Skills

Explore More Software Engineering Skills→
1veso1veso

tweak

Inject a live tweak panel into HTML files and bake adjustments into source CSS.

Community
Intermediate
mgiffordmgifford
39

keyboard

Ensure keyboard operability and clear focus indicators for interactive UI elements.

Community
Advanced
mouayadakelmouayadakel

accessibility-test-generator

Generate accessibility tests for axe-core violations, keyboard navigation, focus traps, and ARIA attributes.

Community
Intermediate
vecearvecear

accessibility-auditor

Audit web applications for WCAG 2.1 accessibility issues.

Community
Advanced