devjarus/accessibility
skills/frontend/accessibility/SKILL.md
Web accessibility patterns and requirements (WCAG 2.1 AA). Use when building any user-facing UI.
development
Updated Apr 25, 2026
$ install --global
skillsauthnpx skillsauth add devjarus/coding-agent accessibilityInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 25, 2026, 7:34 PM130.2s1 file scanned
SKILL.md
- name:
- accessibility
- description:
- Web accessibility patterns and requirements (WCAG 2.1 AA). Use when building any user-facing UI.
Accessibility
Perceivable
- Write meaningful alt text that conveys purpose, not just appearance. Decorative images use
alt="". - Never use color as the sole carrier of information (e.g., red for error — also use an icon or text).
- Maintain contrast ratios: 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold).
- Ensure content remains readable and functional when zoomed to 200%.
Operable
- All interactive elements must be reachable and usable with keyboard alone.
- Maintain a logical, predictable focus order that follows the visual/DOM flow.
- Focus indicators must be visible — never remove outlines without providing an alternative.
- No keyboard traps: users must be able to tab into and out of every component.
- Respect
prefers-reduced-motion: wrap animations in@media (prefers-reduced-motion: no-preference)or disable them via JS.
Understandable
- Use visible labels — placeholders disappear on input and do not substitute for
<label>elements. - Error messages must identify the specific field and describe how to correct it.
- Set
langattribute on<html>(e.g.,<html lang="en">). - Keep navigation consistent across pages — same order, same labels.
Robust
- Use semantic HTML:
<button>for actions,<a>for navigation. Never use<div onclick>or<span onclick>. - Apply ARIA correctly — it supplements semantics, it does not replace them. Prefer native elements.
- Custom interactive components must expose roles, states, and properties via ARIA (e.g.,
role="dialog",aria-expanded,aria-checked).
Common Patterns
Buttons vs Links
<button>: triggers an action (submit, open modal, toggle).<a href>: navigates to a new location or resource.
Modals
- Trap focus inside the modal while it is open.
- Close on Escape key.
- Return focus to the trigger element on close.
- Set
aria-hidden="true"on background content while modal is open.
Forms
- Pair every input with a
<label>using matchingfor/idattributes. - Mark required fields with
aria-required="true". - Link error messages to their field using
aria-describedby. - Use action-specific submit button text ("Save changes", not just "Submit").
Live Regions
- Use
aria-live="polite"for dynamic content updates, toasts, and loading states. - Use
aria-live="assertive"only for critical, time-sensitive alerts. - Keep live region containers in the DOM from the start; inject content into them dynamically.
Related Skills
devjarus/deep-research
testing
VerifiedTrustedCommunity
Multi-source research method — decompose a question, fan out parallel investigators, interleaved-think each result, verify claims adversarially, synthesize a cited answer. Use for breadth-heavy research, stack comparisons, "which approach wins" questions.
SKILL.mdUpdated May 30, 2026
devjarus/test-doubles-strategy
testing
VerifiedTrustedCommunity
Decide when to use unit vs integration vs e2e tests, and when to mock vs use the real thing per dependency. Dependency injection is the enabler — without it you end up monkey-patching imports. Apply when writing tests of any kind.
SKILL.mdUpdated Apr 25, 2026
devjarus/tdd
development
VerifiedTrustedCommunity
Test-driven development process — write failing test, implement to pass, refactor. Use when implementing any feature or fixing bugs.
SKILL.mdUpdated Apr 25, 2026
devjarus/shared-contracts
development
VerifiedTrustedCommunity
Patterns for sharing types, API contracts, and validation schemas between frontend and backend. Use when multiple domains consume the same data shapes to prevent contract drift.
SKILL.mdUpdated Apr 25, 2026