Guarda in azione
Accessible controls: labeled web search markup
Complete source HTML pattern for a search label, native input and named submit button. The SVG ellipsis is the author’s icon placeholder; provide actual artwork, styles and submission behavior. This is a markup example, not a complete application or a WCAG conformance audit.
Input di esempio
<form role="search">
<label for="search-input" class="sr-only">Search products</label>
<input type="search" id="search-input" placeholder="Search..." />
<button type="submit" aria-label="Submit Search">
<svg aria-hidden="true">...</svg>
</button>
</form>Licenza
Complete original selected block/file retained without filling placeholders. Only enclosing source fences or documented outer section whitespace removed. Titles/summaries are editorial. Source code, role prompts, diagnosis/privacy forms, learning formats and illustrative prompt rewrites are displayed as escaped copyable text, not executed or observed outcomes. No source workflow, subagent dispatch, user-session read/export, archive, tracker post, model request, package install, database mutation, file-cleanup or external communication was performed.
MIT License
Copyright (c) 2026 Affaan Mustafa
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.
Accessible controls: SwiftUI action label and hint
Complete author SwiftUI button pattern with a label, hint and button trait. Supply the surrounding app, imports and deleteItem action, and verify behavior with the target assistive technology. The fragment is displayed as source; it does not delete an item or establish accessibility conformance.
Input di esempio
Button(action: deleteItem) {
Image(systemName: "trash")
}
.accessibilityLabel("Delete item")
.accessibilityHint("Permanently removes this item from your list")
.accessibilityAddTraits(.isButton)Licenza
Complete original selected block/file retained without filling placeholders. Only enclosing source fences or documented outer section whitespace removed. Titles/summaries are editorial. Source code, role prompts, diagnosis/privacy forms, learning formats and illustrative prompt rewrites are displayed as escaped copyable text, not executed or observed outcomes. No source workflow, subagent dispatch, user-session read/export, archive, tracker post, model request, package install, database mutation, file-cleanup or external communication was performed.
MIT License
Copyright (c) 2026 Affaan Mustafa
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.
Accessible controls: Compose toggle semantics
Complete author Compose toggle pattern with a notification description. Provide the app’s isEnabled state, onToggle behavior and required Compose imports. It is a source component pattern requiring platform testing rather than a finished or audited screen.
Input di esempio
Switch(
checked = isEnabled,
onCheckedChange = { onToggle() },
modifier = Modifier.semantics {
contentDescription = "Enable notifications"
}
)Licenza
Complete original selected block/file retained without filling placeholders. Only enclosing source fences or documented outer section whitespace removed. Titles/summaries are editorial. Source code, role prompts, diagnosis/privacy forms, learning formats and illustrative prompt rewrites are displayed as escaped copyable text, not executed or observed outcomes. No source workflow, subagent dispatch, user-session read/export, archive, tracker post, model request, package install, database mutation, file-cleanup or external communication was performed.
MIT License
Copyright (c) 2026 Affaan Mustafa
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.
Come usare
- Copia il comando e controlla il pacchetto prima di installarlo nel tuo ambiente agente.
- Controlla strumenti, credenziali e ambienti richiesti nel documento originale.
- Descrivi input e risultato desiderato; confronta l’output con le fonti.
npx skills add https://github.com/affaan-m/ecc --skill accessibilityPrima di iniziare
- L’installazione non include abbonamenti, quote API o accesso ai file.
- Stelle e installazioni indicano attività, non un test indipendente di qualità o sicurezza.
Contenuto dal repository con titoli, esempi, codice, tabelle, link e immagini preservati.
Accessibility (WCAG 2.2)
This skill ensures that digital interfaces are Perceivable, Operable, Understandable, and Robust (POUR) for all users, including those using screen readers, switch controls, or keyboard navigation. It focuses on the technical implementation of WCAG 2.2 success criteria.
When to Use
- Defining UI component specifications for Web, iOS, or Android.
- Auditing existing code for accessibility barriers or compliance gaps.
- Implementing new WCAG 2.2 standards like Target Size (Minimum) and Focus Appearance.
- Mapping high-level design requirements to technical attributes (ARIA roles, traits, hints).
Core Concepts
- POUR Principles: The foundation of WCAG (Perceivable, Operable, Understandable, Robust).
- Semantic Mapping: Using native elements over generic containers to provide built-in accessibility.
- Accessibility Tree: The representation of the UI that assistive technologies actually "read."
- Focus Management: Controlling the order and visibility of the keyboard/screen reader cursor.
- Labeling & Hints: Providing context through
aria-label,accessibilityLabel, andcontentDescription.
How It Works
Step 1: Identify the Component Role
Determine the functional purpose (e.g., Is this a button, a link, or a tab?). Use the most semantic native element available before resorting to custom roles.
Step 2: Define Perceivable Attributes
- Ensure text contrast meets 4.5:1 (normal) or 3:1 (large/UI).
- Add text alternatives for non-text content (images, icons).
- Implement responsive reflow (up to 400% zoom without loss of function).
Step 3: Implement Operable Controls
- Ensure a minimum 24x24 CSS pixel target size (WCAG 2.2 SC 2.5.8).
- Verify all interactive elements are reachable via keyboard and have a visible focus indicator (SC 2.4.11).
- Provide single-pointer alternatives for dragging movements.
Step 4: Ensure Understandable Logic
- Use consistent navigation patterns.
- Provide descriptive error messages and suggestions for correction (SC 3.3.3).
- Implement "Redundant Entry" (SC 3.3.7) to prevent asking for the same data twice.
Step 5: Verify Robust Compatibility
- Use correct
Name, Role, Valuepatterns. - Implement
aria-liveor live regions for dynamic status updates.
Accessibility Architecture Diagram
flowchart TD
UI["UI Component"] --> Platform{Platform?}
Platform -->|Web| ARIA["WAI-ARIA + HTML5"]
Platform -->|iOS| SwiftUI["Accessibility Traits + Labels"]
Platform -->|Android| Compose["Semantics + ContentDesc"]
ARIA --> AT["Assistive Technology (Screen Readers, Switches)"]
SwiftUI --> AT
Compose --> ATCross-Platform Mapping
| Feature | Web (HTML/ARIA) | iOS (SwiftUI) | Android (Compose) |
|---|---|---|---|
| Primary Label | aria-label / <label> | .accessibilityLabel() | contentDescription |
| Secondary Hint | aria-describedby | .accessibilityHint() | Modifier.semantics { stateDescription = ... } |
| Action Role | role="button" | .accessibilityAddTraits(.isButton) | Modifier.semantics { role = Role.Button } |
| Live Updates | aria-live="polite" | .accessibilityLiveRegion(.polite) | Modifier.semantics { liveRegion = LiveRegionMode.Polite } |
Examples
Web: Accessible Search
<form role="search">
<label for="search-input" class="sr-only">Search products</label>
<input type="search" id="search-input" placeholder="Search..." />
<button type="submit" aria-label="Submit Search">
<svg aria-hidden="true">...</svg>
</button>
</form>iOS: Accessible Action Button
Button(action: deleteItem) {
Image(systemName: "trash")
}
.accessibilityLabel("Delete item")
.accessibilityHint("Permanently removes this item from your list")
.accessibilityAddTraits(.isButton)Android: Accessible Toggle
Switch(
checked = isEnabled,
onCheckedChange = { onToggle() },
modifier = Modifier.semantics {
contentDescription = "Enable notifications"
}
)Anti-Patterns to Avoid
- Div-Buttons: Using a
<div>or<span>for a click event without adding a role and keyboard support. - Color-Only Meaning: Indicating an error or status only with a color change (e.g., turning a border red).
- Uncontained Modal Focus: Modals that don't trap focus, allowing keyboard users to navigate background content while the modal is open. Focus must be contained and escapable via the
Escapekey or an explicit close button (WCAG SC 2.1.2). - Redundant Alt Text: Using "Image of..." or "Picture of..." in alt text (screen readers already announce the role "Image").
Best Practices Checklist
- [ ] Interactive elements meet the 24x24px (Web) or 44x44pt (Native) target size.
- [ ] Focus indicators are clearly visible and high-contrast.
- [ ] Modals contain focus while open, and release it cleanly on close (
Escapekey or close button). - [ ] Dropdowns and menus restore focus to the trigger element on close.
- [ ] Forms provide text-based error suggestions.
- [ ] All icon-only buttons have a descriptive text label.
- [ ] Content reflows properly when text is scaled.
References
- WCAG 2.2 Guidelines
- WAI-ARIA Authoring Practices
- iOS Accessibility Programming Guide
- iOS Human Interface Guidelines - Accessibility
- Android Accessibility Developer Guide
Related Skills
frontend-patternsdesign-systemliquid-glass-designswiftui-patterns
