| name | accessibility-workflow |
| description | Three-phase accessibility workflow for uFawkes.dev — audit (find issues), remediate (fix specifications), verify (confirm compliance). Covers WCAG AA, Jekyll/HTML patterns, and vanilla CSS focus states. |
| license | MIT |
| compatibility | opencode |
Accessibility Workflow — uFawkes.dev
Target: WCAG 2.1 AA minimum. AAA where achievable without design compromise.
Phase 1 — Audit
What to check
Structure
Images
Links
Color and contrast
Keyboard navigation
Forms
Motion
Contrast reference (brand palette)
| Foreground | Background | Ratio | Pass/Fail |
|---|
#111827 (text primary) | #ffffff | 16.1:1 | ✅ AAA |
#374151 (text secondary) | #ffffff | 9.7:1 | ✅ AAA |
#6b7280 (text muted) | #ffffff | 5.9:1 | ✅ AA |
#16a34a (brand green) | #ffffff | 4.7:1 | ✅ AA |
#ffffff | #16a34a | 4.7:1 | ✅ AA |
#111827 | #f9fafb | 15.3:1 | ✅ AAA |
⚠️ Always verify contrast with a tool when adding new color combinations.
Phase 2 — Remediate
Focus states (vanilla CSS)
Add to assets/css/main.css (append only):
:focus-visible {
outline: 2px solid #16a34a;
outline-offset: 2px;
}
:focus:not(:focus-visible) {
outline: none;
}
Screen-reader-only utility
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
Use .sr-only for: duplicate H1 text, icon button labels, "opens in new tab" notices.
Double H1 fix (issue #1)
# uFawkes
<span class="sr-only">uFawkes</span>
Skip navigation
Add to _layouts/default.html immediately after <body>:
<a class="skip-nav" href="#main-content">Skip to main content</a>
Add CSS:
.skip-nav {
position: absolute;
left: -9999px;
z-index: 999;
padding: 8px 16px;
background: #16a34a;
color: #ffffff;
font-weight: 600;
}
.skip-nav:focus {
left: 8px;
top: 8px;
}
Add id="main-content" to <main> element.
Motion reduction
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
Phase 3 — Verify
After any accessibility-related change:
- Run
make build — confirm no build errors
- Check heading structure:
grep -n "^#" [file.md]
- Check for alt text:
grep -n "<img" [file] — confirm all have alt=""
- Manually tab through affected page in browser
- Confirm focus rings are visible on all interactive elements
- Run contrast check on any new color combinations
Review agent checklist (accessibility section)
