hjemmesidekongen/accessibility-wcag
plugins/smedjen/skills/accessibility-wcag/SKILL.md
WCAG 2.1 AA compliance — ARIA, keyboard navigation, screen readers, color contrast, and semantic HTML. Covers the POUR principles, semantic-first authoring, ARIA as last resort, and practical testing workflows.
development
Updated Apr 5, 2026
$ install --global
skillsauthnpx skillsauth add hjemmesidekongen/ai accessibility-wcagInstall 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 5, 2026, 5:27 PM30.7s2 files scanned
SKILL.md
- name:
- accessibility-wcag
- description:
- >
- user_invocable:
- false
- interactive:
- false
- model_tier:
- senior
- depends_on:
- []
- reads:
- []
- writes:
- []
- type:
- data_validation
- - name:
- form_labels_present
- verify:
- Every form input has an associated label (explicit, aria-label, or aria-labelledby)
- fail_action:
- Add visible label or aria-label — placeholder text is not a label
- on_fail:
- Accessibility violations found — resolve before merging
- on_pass:
- WCAG 2.1 AA checks passed
- origin:
- smedjen
- inspired_by:
- original
- ported_date:
- 2026-03-10
- iteration:
- 1
- changes:
- Original skill, no port
accessibility-wcag
Accessibility is structural. Retrofit is expensive — build it in from the first element.
POUR Principles
Perceivable — content and UI components must be presentable in ways users can perceive: text alternatives for non-text content, captions, adaptable layout, sufficient contrast.
Operable — all functionality available via keyboard, no timing traps, no content that causes seizures, skip navigation provided.
Understandable — text is readable, pages behave predictably, input errors are identified and described.
Robust — content is compatible with current and future assistive technologies; valid HTML is the baseline.
AA vs AAA
Target AA in production. AAA is aspirational — pursue it for high-stakes content (legal, medical, public services) but do not block release on AAA failures. Document AAA gaps explicitly.
Semantic HTML First
Native elements carry free accessibility: <button> handles focus, keyboard activation, and role without ARIA. Use semantic elements before reaching for ARIA. Wrong element + ARIA is always worse than the right element alone.
button, a, nav, main, aside, header, footer, section, article,
h1–h6, ul/ol/li, table, form, fieldset, legend, label, input, select, textarea
ARIA as Last Resort
ARIA supplements missing semantics — it does not fix incorrect markup. Rule of thumb: if a native element exists, use it. ARIA is correct when you build custom widgets (combobox, tree, dialog) that have no HTML equivalent.
First rule of ARIA: do not use ARIA if a native element provides the semantics.
See references/process.md for the full checklist, ARIA roles/states/properties, keyboard patterns, screen reader testing, React patterns, and testing tools.
Related Skills
hjemmesidekongen/brand-strategy
development
VerifiedTrustedCommunity
Creates a brand from scratch through market research and interactive sparring. Runs competitive research via Perplexity, then guides the user through positioning, audience, voice, values, and content pillars. Produces the full brand guideline set at .ai/brand/{name}/. Use when building a new brand, defining brand strategy for a product, or when /våbenskjold:create is invoked.
SKILL.mdUpdated Apr 5, 2026
hjemmesidekongen/brand-loader
testing
VerifiedTrustedCommunity
Loads brand guidelines from .ai/brand/{name}/ and makes them available to the current context. Progressive disclosure: L1 confirms brand exists, L2 loads summary, L3 loads specific files on demand. Use when a downstream skill or user needs brand context, or when /våbenskjold:apply is invoked.
SKILL.mdUpdated Apr 5, 2026
hjemmesidekongen/brand-evolve
documentation
VerifiedTrustedCommunity
Guided reinvention of an existing brand guideline. Loads current brand from .ai/brand/{name}/, identifies what to keep vs change, and walks the user through targeted evolution. Preserves brand equity while updating positioning, voice, or values. Use when refreshing a brand or when /våbenskjold:evolve is invoked.
SKILL.mdUpdated Apr 5, 2026
hjemmesidekongen/brand-audit
development
VerifiedTrustedCommunity
Codifies an existing brand from materials, samples, and references. Analyzes provided content to extract voice patterns, values, and positioning. Produces the same guideline format as brand-strategy. Use when a brand already exists but isn't documented, or when /våbenskjold:audit is invoked.
SKILL.mdUpdated Apr 5, 2026