add-accessibility

Name: add-accessibility
Availability: InStock
Author: IntelliTect

Audit and remediate accessibility gaps in Vuetify components for WCAG compliance.

Updated Apr 27, 2026

Search Tags:#accessibility #a11y #wcag #aria #keyboard-accessibility #vuetify

Ready to run

npx skills add https://github.com/IntelliTect/IntelliPlugins --skill add-accessibility

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: add-accessibility
Source: https://github.com/IntelliTect/IntelliPlugins/tree/main/plugins/vuetify-components/skills/add-accessibility
Command: npx skills add https://github.com/IntelliTect/IntelliPlugins --skill add-accessibility

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Vuetify components often miss WCAG-compliant accessibility features, creating barriers for users with assistive technologies. This skill guides teams to audit, remediate, and validate accessibility across a Vue 3 + Vuetify component library.

Core Features & Use Cases

WCAG-aligned accessibility audit and remediation for Vuetify components, covering keyboard navigation, ARIA labeling, color contrast, and focus management.
Reusable patterns and templates for accessible components (dialogs, forms, tables, navigation) to ensure consistent UX across applications.
Guidance on testing and verification with automated tools (axe-core) and manual testing to verify conformance in production projects.

Quick Start

Audit the Vuetify component library for accessibility gaps and generate a remediation plan.

Frequently Asked Questions about add-accessibility

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

FAQPage Schema

How do I make Vuetify components accessible and WCAG compliant?▼

To make Vuetify components accessible, audit and remediate gaps in ARIA labeling, keyboard navigation, color contrast, and focus management to achieve WCAG-compliant UX. This ensures your Vue 3 interfaces are inclusive for users relying on assistive technologies.

What is the best way to audit a Vue 3 component library for accessibility gaps?▼

The best way to audit a Vue 3 component library is to evaluate components against WCAG criteria and generate a remediation plan. This process identifies missing semantic HTML, ARIA attributes, and focus management issues across dialogs, forms, and navigation.

How do I fix keyboard navigation and focus management in Vuetify dialogs?▼

Fixing keyboard navigation and focus management in Vuetify dialogs requires enforcing proper ARIA labeling and focus trapping within the component. Applying accessible patterns ensures users can navigate and close dialogs using only their keyboards.

Can I use axe-core to test accessibility remediation in a Vuetify project?▼

Yes, you can use axe-core to test accessibility remediation in a Vuetify project. Automated tools like axe-core verify conformance, while manual testing ensures keyboard navigation and screen reader interactions meet WCAG standards in production.

Does this accessibility remediation process apply to Vuetify forms and tables?▼

This accessibility remediation process applies directly to Vuetify forms and tables, ensuring inclusive interfaces across your application. It provides reusable patterns to enforce semantic HTML, proper ARIA roles, and color contrast for these specific components.