--- name: fixing-accessibility description: Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance. risk: critical source: https://github.com/ibelick/ui-skills/tree/main/skills/fixing-accessibility source_repo: ibelick/ui-skills source_type: community date_added: 2026-07-01 license: MIT license_source: https://github.com/ibelick/ui-skills/blob/main/LICENSE --- # fixing-accessibility ## When to Use Use this skill when you need audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance. Fix accessibility issues. ## how to use - `/fixing-accessibility` Apply these constraints to any UI work in this conversation. - `/fixing-accessibility ` Review the file against all rules below and report: - violations (quote the exact line or snippet) - why it matters (one short sentence) - a concrete fix (code-level suggestion) Do not rewrite large parts of the UI. Prefer minimal, targeted fixes. ## when to apply Reference these guidelines when: - adding or changing buttons, links, inputs, menus, dialogs, tabs, dropdowns - building forms, validation, error states, helper text - implementing keyboard shortcuts or custom interactions - working on focus states, focus trapping, or modal behavior - rendering icon-only controls - adding hover-only interactions or hidden content ## rule categories by priority | priority | category | impact | |----------|----------|--------| | 1 | accessible names | critical | | 2 | keyboard access | critical | | 3 | focus and dialogs | critical | | 4 | semantics | high | | 5 | forms and errors | high | | 6 | announcements | medium-high | | 7 | contrast and states | medium | | 8 | media and motion | low-medium | | 9 | tool boundaries | critical | ## quick reference ### 1. accessible names (critical) - every interactive control must have an accessible name - icon-only buttons must have aria-label or aria-labelledby - every input, select, and textarea must be labeled - links must have meaningful text (no “click here”) - decorative icons must be aria-hidden ### 2. keyboard access (critical) - do not use div or span as buttons without full keyboard support - all controls must be keyboard reachable; composite widgets may use one Tab stop plus documented arrow-key navigation - focus must be visible for keyboard users - do not use tabindex greater than 0 - Escape must close dialogs or overlays when applicable ### 3. focus and dialogs (critical) - modals must trap focus while open - restore focus to the trigger on close - set initial focus inside dialogs - opening a dialog should not scroll the page unexpectedly ### 4. semantics (high) - prefer native elements (button, a, input) over role-based hacks - if a role is used, required aria attributes must be present - lists must use ul or ol with li - do not skip heading levels - tables must use th for headers when applicable ### 5. forms and errors (high) - errors must be linked to fields using aria-describedby - required fields must be announced - invalid fields must set aria-invalid - helper text must be associated with inputs - disabled submit actions must explain why ### 6. announcements (medium-high) - critical form errors should use aria-live - loading states should use aria-busy or status text - toasts must not be the only way to convey critical information - expandable controls must use aria-expanded and aria-controls ### 7. contrast and states (medium) - ensure sufficient contrast for text and icons - hover-only interactions must have keyboard equivalents - disabled states must not rely on color alone - do not remove focus outlines without a visible replacement ### 8. media and motion (low-medium) - images must have correct alt text (meaningful or empty) - videos with speech should provide captions when relevant - respect prefers-reduced-motion for non-essential motion - avoid autoplaying media with sound ### 9. tool boundaries (critical) - prefer minimal changes, do not refactor unrelated code - do not add aria when native semantics already solve the problem - do not migrate UI libraries unless requested ## common fixes ```html
Save
Invalid email Invalid email ``` ## review guidance - fix critical issues first (names, keyboard, focus, tool boundaries) - prefer native HTML before adding aria - quote the exact snippet, state the failure, propose a small fix - for complex widgets (menu, dialog, combobox), prefer established accessible primitives over custom behavior ## Limitations - Use this skill only when the task clearly matches its upstream source and local project context. - Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes. - Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions. --- Source attribution: ibelick/ui-skills contributors, via Agentic Awesome Skills Original project: https://github.com/ibelick/ui-skills License: MIT + CC-BY-4.0 License information: https://creativecommons.org/licenses/by/4.0/ Original upstream instructions; downloaded from Mega AI Hub. ## Upstream license notice MIT License Copyright (c) 2026 Julien Thibeaut Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. # Mega AI Hub resource metadata Creator / publisher: ibelick/ui-skills contributors, via Agentic Awesome Skills Original project: https://github.com/ibelick/ui-skills Attribution basis: Recorded upstream repository Fields of work: Development & Engineering Roles: Frontend Developer Specialties: Specialty not specified Tools: Tool not specified Country applicability: Country not specified Classification basis: Dave AI task classification from package title, description, and declared metadata Instruction SHA-256: 8329df7b17bc884ae9ac3df1929d6d697f8045468b8857cb0725dde0bb1530ec Metadata reviewed: 2026-10-27 This metadata supersedes earlier Mega AI Hub catalog attribution. Original instruction and supporting files are preserved.