CSS Fundamentals: The Box Model, Specificity, Positioning, and Layout

Part 17 of 18 · ~2 min

Accessibility Basics That Affect Real Usage

None of this is decoration — each rule below changes whether someone can actually use the card, not just how it looks doing it.

Removing a :focus outline with no real replacement erases the only signal a keyboard-only visitor has for where focus currently sits on the page — don't, unless something equally visible takes its place. :focus-visible in place of plain :focus shows that ring for keyboard navigation specifically, while staying invisible for an ordinary mouse click, which is the more comfortable default for almost everyone:

.card__add:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

The cart drawer's quantity field needs an actual programmatic connection to its label — for matched against id, or the input nested directly inside the <label> itself — because visual proximity alone means nothing to assistive software, and clicking text that only looks like a label focuses nothing at all:

<label for="qty-c8814">Quantity</label>
<input id="qty-c8814" type="number" min="1" value="1" />

The sale ribbon can't rely on color alone to say "this is discounted" — someone with a color vision deficiency needs to be able to tell without it:

.card__ribbon { background: var(--accent-color); }

<span class="card__ribbon">Sale</span> <!-- the word carries the meaning; the color is decoration on top of it -->

Reach for <button> rather than a <div> dressed up to look like one for "Add to cart" — genuine semantics bring keyboard focusability, the right accessibility-tree role, and both click and keyboard activation along with them, none of which need reimplementing by hand.

And the hover-lift transform from the positioning chapter needs an off switch:

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
  .card:hover {
    transform: none;
  }
}

That's a genuine accessibility fix on its own, for anyone who finds motion on hover disorienting or nauseating — and it comes with a quiet second benefit worth noticing: a card that never picks up a transform on hover also never becomes a containing block for its own fixed toast, so the corner-jamming bug from that chapter simply cannot happen for anyone browsing with reduced motion turned on. One accessibility fix, two bugs gone.