Accessible UI Component Series

A short series of accessible UI components built on one shared “Codespud” design-token file, so I could test ARIA Authoring Practices patterns myself instead of trusting a component library blindly.

Two more pieces from the same series already have full write-ups: the accessible tab container and the focus-within fixes for common hover-only UI patterns.

#Accordion

Disclosure pattern using aria-expanded, aria-controls, and role="region" per the ARIA APG accordion pattern, with animated expand/collapse and visible focus states.

#Accessible buttons in claymorphic styling

Proof that an on-trend visual style (claymorphic / soft-UI) doesn’t have to come at the cost of accessible markup — real <button> elements, visible focus rings, and sufficient contrast underneath the styling.

#Shared design tokens

Both components above (and the tab container/accordion pair) pull from one typography and color token file — a small design system built with accessible contrast ratios in mind from the start.

More CodePen experiments: codepen.io/chrisbautista