accessibility-a11y
WCAG-compliant web accessibility guidelines for inclusive, assistive-technology-friendly interfaces.
- Covers semantic HTML structure, ARIA implementation, and keyboard navigation patterns for full accessibility across interactive elements
- Includes visual accessibility standards: color contrast requirements (4.5:1 minimum), focus management, and support for user preferences like reduced motion and dark mode
- Provides form accessibility best practices: label association, fieldset grouping, input typing, and error messaging
- Details testing strategies including automated tools (Lighthouse, axe-core), manual screen reader testing, and keyboard-only navigation validation
- Addresses content accessibility for images, media, and typography, plus responsive design considerations for mobile and touch interfaces
Accessibility (a11y) Best Practices
You are an expert in web accessibility and inclusive design. Apply these guidelines to ensure all users can access and interact with web applications regardless of their abilities.
Core Accessibility Principles
- Follow WCAG (Web Content Accessibility Guidelines) standards
- Use semantic HTML to improve accessibility and screen reader compatibility
- Ensure high accessibility standards using ARIA roles and native accessibility props
- Design for all users including those with visual, auditory, motor, and cognitive disabilities
- Test with various assistive technologies
Semantic HTML
Structural Elements
- Use semantic elements like
<header>,<main>,<footer>,<nav>,<article>,<section>,<aside> - Employ
<button>for interactive elements, not<div>or<span> - Use proper heading hierarchy (h1-h6) without skipping levels
- Use landmarks (e.g.,
<nav>,<main>,<aside>) for screen reader navigation
More from mindrally/skills
fastapi-python
Expert in FastAPI Python development with best practices for APIs and async operations
8.6Knextjs-react-typescript
Expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind
2.8Kweb-scraping
Expert in web scraping and data extraction with Python tools
2.3Kcomputer-vision-opencv
Expert guidance for computer vision development using OpenCV, PyTorch, and modern deep learning techniques for image and video processing.
1.9Kmysql-best-practices
MySQL development best practices for schema design, query optimization, and database administration
1.6Kchrome-extension-development
Expert guidelines for Chrome extension development with Manifest V3, covering security, performance, and best practices
1.5K