Wszystkie Skills / AFFAAN-M

affaan-m/ecc

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels, accessibility traits and hints, focus management, contrast, target size, and screen-reader support.

Zobacz źródło

Zobacz w działaniu

Przykład użycia

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.

Przykładowe dane

<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>

Oryginalny przykład · ENZobacz oryginał · affaan-m/ECC Licencja · MIT

Licencja

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.

Przykład użycia

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.

Przykładowe dane

Button(action: deleteItem) {
    Image(systemName: "trash")
}
.accessibilityLabel("Delete item")
.accessibilityHint("Permanently removes this item from your list")
.accessibilityAddTraits(.isButton)

Oryginalny przykład · ENZobacz oryginał · affaan-m/ECC Licencja · MIT

Licencja

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.

Przykład użycia

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.

Przykładowe dane

Switch(
    checked = isEnabled,
    onCheckedChange = { onToggle() },
    modifier = Modifier.semantics {
        contentDescription = "Enable notifications"
    }
)

Oryginalny przykład · ENZobacz oryginał · affaan-m/ECC Licencja · MIT

Licencja

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.

Jak używać

Skopiuj polecenie instalacji i sprawdź źródła przed instalacją we własnym środowisku agenta.
W oryginale sprawdź wymagane narzędzia, dane dostępowe i obsługiwane środowiska.
Opisz dane wejściowe i oczekiwany rezultat; porównaj wynik ze źródłami.

npx skills add https://github.com/affaan-m/ecc --skill accessibility

Przed rozpoczęciem

Instalacja nie obejmuje subskrypcji modelu, limitu API ani uprawnień do plików.
Gwiazdki i instalacje pokazują aktywność, a nie niezależny test jakości lub bezpieczeństwa.

Oryginalny dokument Skill

Treść z repozytorium z zachowaniem nagłówków, przykładów, kodu, tabel, linków i obrazów.

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, and contentDescription.

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, Value patterns.
Implement aria-live or live regions for dynamic status updates.

Accessibility Architecture Diagram

mermaid

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 --> AT

Cross-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

html

<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

swift

Button(action: deleteItem) {
    Image(systemName: "trash")
}
.accessibilityLabel("Delete item")
.accessibilityHint("Permanently removes this item from your list")
.accessibilityAddTraits(.isButton)

Android: Accessible Toggle

kotlin

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 Escape key 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 (Escape key 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-patterns
design-system
liquid-glass-design
swiftui-patterns

Powiązane zadania

z tego samego repozytorium

Więcej Skills

Wszystkie Skills

docker-patterns

Docker and Docker Compose patterns for local development, hardened CLI installer harnesses, container security, networking, volumes, and multi-service orchestration. Use when creating or reviewing Dockerfiles and Compose services, testing installers across Linux distributions, or planning accurate native macOS and Windows validation.

Instalacje / 1h: 3
GitHub Stars: 295,8 tys.
Aktualizacja: 2 lis

Zobacz szczegóły →

benchmark

Measure performance baselines and detect regressions across browser Core Web Vitals (LCP, INP, CLS, page weight), API endpoint latency percentiles, and build/test feedback times, with before/after comparison stored in git-tracked .ecc/benchmarks JSON. Use when checking page speed, responding to 'it feels slow' reports, verifying launch performance targets, or comparing stack alternatives.

Instalacje / 1h: 3
GitHub Stars: 294,1 tys.
Aktualizacja: 30 paź

Zobacz szczegóły →

benchmark-methodology

Score a scoped competitor set into comparable profile cards: nine weighted dimensions (positioning, voice, visual craft, offer packaging, evidence, enterprise-readiness, thought leadership, pricing, client tension) with 1-5 evidence-anchored rubrics and a tension 2x2 plot. Use when benchmarking or scoring competitors, building a competitive comparison matrix, or grading rival positioning before assembling the report; runs after competitive-platform-analysis and before competitive-report-structur

Instalacje / 1h: 3
GitHub Stars: 294,1 tys.
Aktualizacja: 30 paź

Zobacz szczegóły →

benchmark-optimization-loop

Convert 'make it faster' requests into a bounded measured optimization loop — baseline first, generate one-hypothesis variants, benchmark each against a correctness gate, and promote the fastest safe variant with reproducible commands. Use when asked to speed something up, try many variants, run recursive optimization, benchmark latency/throughput/cost, or pick the best implementation by repeated measured tests.

Instalacje / 1h: 3
GitHub Stars: 294,1 tys.
Aktualizacja: 30 paź

Zobacz szczegóły →