Agent skill · design visual · mindrally
accessibility-a11y
Implement web accessibility (a11y) best practices following WCAG guidelines to create inclusive, accessible user interfaces.
Why this skill is useful
Provides specific guidelines and patterns for implementing web accessibility that the AI wouldn't reliably generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-06-09. 217 stars on the source repository.
What this skill does
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 Avoid deprecated markup Form Accessibility Associate labels with form inputs using for and id attributes Group related form elements with <fieldset> and <legend> Provide clear error messages and validation feedback Use appropriate input types (email, tel, number, etc.) Include placeholder text as supplementary hints, not replacements for labels ARIA Implementation When to Use ARIA Use ARIA roles and attributes to enhance accessibility where semantic HTML is insufficient Prefer native HTML elements over ARIA when possible Use aria-label for elements without visible text labels Implement aria-describedby for additional context Use aria-live regions for dynamic content updates Common ARIA Patterns Use role="button" only when a non-button element must act as a button Implement aria-expanded for collapsible content Use aria-hidden="true" for decorative elements Apply aria-current="page" for navigation highlighting Use aria-labelledby to reference visible labels Visual Accessibility Color and Contrast Ensure sufficient color contrast for text (minimum 4.5:1 for nor …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills mindrally/accessibility-a11y