Accessibility

A large share of this site’s readers are working twelve-hour shifts and reading on a phone at 03:00. Legibility is not a nice-to-have here, so the accessibility work was done as the site was built rather than audited on afterwards.

Color and contrast

Every text and background pair in the palette was checked with the WCAG 2.x relative-luminance formula against the exact colors shipped — computed, not estimated. The results decided the palette rather than describing it:

• Body text measures 14.71:1 and headlines 16.96:1 on the page background, both AAA.
• Captions and metadata measure 9.96:1 and 7.40:1, both AAA.
• Our rust link color measures 4.33:1 on the tinted surface, which fails AA for normal text. That result is why tinted panels use the darker rust instead, which measures 6.30:1 to 7.09:1.
• Button text measures 5.02:1 on the primary and 5.47:1 on the secondary fill, both AA.

No information on this site is conveyed by color alone. Score bars carry their numeric value, the award labels are text, and the hand-drawn underline beneath headings is decorative only.

Keyboard and focus

• A skip-to-content link is the first focusable element on every page.
• Focus is shown with a 2px teal outline and a 2px offset, applied through :focus-visible so it appears for keyboard users without drawing a ring on every mouse click.
• Navigation, buy buttons and the contact form are standard links, buttons and inputs rather than scripted substitutes, so they behave as the browser intends.
• Product tiles are clickable as a whole, implemented with a stretched link over a real anchor. The buy button inside a tile is a separate control rather than a nested link, so tab order stays predictable.

Screen readers

• Pages declare a language and use one H1, with section headings in order beneath it.
• Every image carries descriptive alternative text. Our thumbnail component cannot render an unlabeled image — where no photograph exists it renders a labeled placeholder instead.
• The decorative signature stroke under headings is marked aria-hidden and non-focusable, because it is below the non-text contrast threshold and carries no meaning.
• Comparison tables have captions and real header cells with scope, so they can be navigated by row and column.
• Form fields have visible, associated labels, and errors are returned as text rather than color.

Motion and layout

• A prefers-reduced-motion rule removes transitions and animation for readers who ask their system for it.
• Text reflows to a single column at small widths and the layout is usable at 200% zoom without horizontal scrolling of body copy. Wide comparison tables scroll horizontally within their own container, which is deliberate — the alternative is shrinking numbers below legibility.
• Text is never pure black on pure white; the warm palette was chosen partly to reduce glare on a night shift.

What we have not done

We will not claim conformance we have not tested. To be specific about the gaps:

• No independent audit. No third party has assessed this site, and we have not run a formal WCAG 2.2 AA conformance evaluation. The contrast figures above are computed; the rest is careful implementation, not certification.
• No screen-reader testing matrix. We have not systematically tested with JAWS, NVDA and VoiceOver across browsers.
• Horizontally scrolling tables. Several comparison tables need sideways scrolling on a phone. We judged legible figures to be worth more than avoiding the scroll, but it is a trade-off rather than a solution.
• Third-party destinations. Our buying links go to Amazon, whose accessibility we do not control.

If something is in your way

Tell us and we will fix it. Email contact@shiftandsole.com or use the contact form, and if you can, say what you were trying to read and what you use to read it — that is usually enough for us to reproduce the problem.

Reports of this kind are treated the same way as a factual correction under our editorial policy: we fix it and we date the change.