Skip to main content
← All notes
Building

Every focus ring uses the accent colour and every animation respects the user

softwareaccessibility

The site has one global focus style. The focus-visible pseudo-class sets a two-pixel solid outline using the accent colour custom property with a two-pixel offset. Every interactive element on every page — buttons, links, inputs, the theme toggle, the skip-to-content link, the service card navigation, the checkout wizard — gets the same visible focus ring when reached by keyboard. No element has outline none without a replacement. No element uses a custom focus style that differs from the global one. The accent colour is purple by default and shifts to the service accent on service pages, so the focus ring adapts to context automatically. The skip-to-content link works through CSS positioning alone. By default, it sits at position absolute with left set to negative nine thousand nine hundred and ninety-nine pixels. It is off-screen but still in the accessibility tree. When a keyboard user tabs into the page, the link receives focus and a single CSS rule fires — left zero. The link slides into view at the top-left corner with a z-index of nine hundred and ninety-nine so it always appears above other content. The background uses the accent colour. The text uses the background colour. The padding is 0.75rem by 1.5rem, giving it a touch target well above forty-four pixels. The border-radius is zero on three corners and 0.5rem on the bottom-right, so it tucks into the top-left corner of the viewport. When focus moves away, the link slides back off-screen. Zero JavaScript. The reduced motion preference is handled at the root. When prefers-reduced-motion is set to reduce, the scroll-behavior on the html element switches from smooth to auto. Every scroll-into-view call, every anchor link jump, every hash-based sidebar switch snaps instantly instead of animating. The color-scheme property switches between dark and light based on the data-theme attribute so the browser's native form controls — scrollbars, select dropdowns, date pickers — match the theme without any additional styling. Three CSS rules handle three accessibility concerns — focus visibility, motion sensitivity, and native control theming.

Comments coming soon

Sign in with TikTok to leave a comment. Coming soon.