How I ship accessible UI—section-first BEM, stable hooks, no hash selectors.
Demonstrated on live weableColor and thaddeuskilo.design—not a separate product SKU.
Accessible BEM · documented on weableColor
- BEM
- saca-* section naming
- AA+
- WCAG-minded defaults
- Proof
- weableColor + portfolio
Methodology pointer—the full SACA walkthrough lives on the weableColor case study (Design & accessibility section).
Methodology, not a launch
SACA (Sexy Accessibility Compliance Alliance) is how I build: `saca-{section}__{element}--{modifier}` on interactive and layout nodes, WCAG 2.1 AA+ as the default bar, and no selectors on Emotion hash classes.
SACA shows up in shipped UI—Figma plugin panels, VS Code chrome, and this portfolio—not as a separate product pitch.
Read the proof on weableColor
The weableColor case study includes a dedicated “Design & accessibility (SACA)” section: `saca-wc-*` hooks, Test-with-eyez mindset, and marketplace copy guardrails. This site uses `saca-portfolio-*` with the same rules.
- Pattern: section-first BEM, extend in dedicated CSS files
- Contrast measured on chrome and content; no legal certification over-claim
- In-house IDE experiments use the same hook discipline privately