Accessibility Basics

Accessibility means a page works for people navigating with a screen reader, tabbing through with a keyboard instead of a mouse, or dealing with low vision or motion sensitivity. It doesn't take a rewrite, just a handful of concrete habits.

Use real HTML elements

A <button> comes with keyboard support and screen reader announcements built in for free. A <div> styled to look like a button has neither, unless you rebuild both by hand. The same goes for structure: use <nav>, <main>, and <footer> for their real purpose, and keep headings in order, one <h1> per page, without skipping from an <h2> straight to an <h4>. The HTML basics guide covers these tags themselves.

Alt text on images

The alt attribute describes an image for anyone who can't see it. Describe what the image actually shows or means, not "image of":

<img src="cat.jpg" alt="A cat sitting on a windowsill">

If an image is purely decorative and adds no information, an empty alt="" tells a screen reader to skip it entirely, which is better than reading out its filename.

Visible focus states

Someone navigating by keyboard presses Tab to move between links and buttons, and needs to see where they currently are. Never remove the default focus outline with outline: none unless you replace it with something else equally visible:

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

:focus-visible shows the outline for keyboard navigation without adding it on every mouse click, which is usually the effect you actually want.

Respect motion preferences

Some people get genuinely dizzy or nauseated from unnecessary motion. A media query lets you scale back or remove animation for anyone who's told their system they'd prefer that:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
  }
}

Seeing it in practice

ydnim.com uses every one of these: a skip link at the top of every page, a global focus-visible outline on every link, alt text or aria-hidden on every image, and a reduced-motion media query on the background animation. None of it is complicated on its own; it's just a habit of checking for it on every page.