Article content
Changed
- Upgraded shared home-tab behavior (
/static/js/home-tabs.js) to use a stronger ARIA tab pattern:- roving
tabindex aria-controls wiringaria-hidden + tabindex panel sync- keyboard support for
ArrowLeft/Right/Up/Down, Home, and End
- Added explicit
tabindex + aria-controls defaults for homepage and projects tab buttons so no-JS state remains sane. - Introduced a reusable
--focus-ring design token and normalized focus-visible outlines across links and form/button controls for more consistent keyboard visibility.
Why
- Improves keyboard predictability and focus order in tabbed UI surfaces.
- Reduces ambiguity for assistive tech by tightening tab/panel relationships.
- Raises visibility of focused interactive elements, especially in dense card-driven layouts.
Artifacts
- Before screenshots:
/artifacts/2026-03-07-a11y-hardening/before-home.png/artifacts/2026-03-07-a11y-hardening/before-projects.png