accessibility-standards

What problem does it solve?

This Skill provides guidelines for implementing WCAG 2.1 AA accessibility standards in Vue 3 applications. It ensures that the vehicle insurance data platform is usable by people with diverse abilities, enhancing inclusivity and compliance.

Core Features & Use Cases

• Keyboard Navigation: Details proper tab order, skip links, and keyboard event handling for full keyboard operability.
• ARIA Labels: Guides on using ARIA attributes for buttons, forms, live regions, and dialogs to provide semantic meaning for assistive technologies.
• Color Contrast: Explains WCAG 2.1 AA requirements for text and large text, and suggests improvements for platform colors.
• Focus Indicators: Emphasizes visible focus states and proper focus management for keyboard users.
• Screen Reader Support: Provides best practices for image alt text, chart accessibility, and loading announcements.
• Use Case: A developer needs to ensure a new modal component is accessible. This skill guides them to add role="dialog", aria-labelledby, aria-describedby, aria-modal="true", and manage focus within the modal.

Quick Start

Ensure the 'FilterPanel.vue' component is fully keyboard navigable and provides appropriate ARIA labels for its controls.