web-accessibility
Implement WCAG 2.1 accessibility standards for semantic HTML, keyboard navigation, ARIA attributes, and screen reader support.
- Covers semantic HTML structure, keyboard navigation (Tab, arrow keys, ESC), and focus management for modals and interactive components
- Provides ARIA attribute guidance (aria-label, aria-live, aria-hidden, role attributes) with practical React/TypeScript examples
- Includes color contrast requirements (WCAG AA/AAA), visual focus indicators, and testing strategies using axe-core and Lighthouse
- Enforces mandatory rules: keyboard-only usability, alternative text for images, associated form labels, and prohibition of outline removal
Web Accessibility (A11y)
When to use this skill
- New UI Component Development: Designing accessible components
- Accessibility Audit: Identifying and fixing accessibility issues in existing sites
- Form Implementation: Writing screen reader-friendly forms
- Modals/Dropdowns: Focus management and keyboard trap prevention
- WCAG Compliance: Meeting legal requirements or standards
Input Format
Required Information
- Framework: React, Vue, Svelte, Vanilla JS, etc.
- Component Type: Button, Form, Modal, Dropdown, Navigation, etc.
- WCAG Level: A, AA, AAA (default: AA)
More from supercent-io/skills-template
security-best-practices
Implement security best practices for web applications and infrastructure. Use when securing APIs, preventing common vulnerabilities, or implementing security policies. Handles HTTPS, CORS, XSS, SQL Injection, CSRF, rate limiting, and OWASP Top 10.
14.1Kdata-analysis
Analyze datasets to extract insights, identify patterns, and generate reports. Use when exploring data, creating visualizations, or performing statistical analysis. Handles CSV, JSON, SQL queries, and Python pandas operations.
13.8Kworkflow-automation
Automate repetitive development tasks and workflows. Use when creating build scripts, automating deployments, or setting up development workflows. Handles npm scripts, Makefile, GitHub Actions workflows, and task automation.
12.6Kcode-review
Conduct thorough, constructive code reviews for quality and security. Use when reviewing pull requests, checking code quality, identifying bugs, or auditing security. Handles best practices, SOLID principles, security vulnerabilities, performance analysis, and testing coverage.
12.5Kdatabase-schema-design
Design and optimize database schemas for SQL and NoSQL databases. Use when creating new databases, designing tables, defining relationships, indexing strategies, or database migrations. Handles PostgreSQL, MySQL, MongoDB, normalization, and performance optimization.
12.2Kcode-refactoring
Simplify and refactor code while preserving behavior, improving clarity, and reducing complexity. Use when simplifying complex code, removing duplication, or applying design patterns. Handles Extract Method, DRY principle, SOLID principles, behavior validation, and refactoring patterns.
11.9K