Screen readers
A screen reader reads a page aloud or sends it to a Braille display. Popular ones include the free open-source NVDA, the long-running JAWS (my friends like this one the most), and VoiceOver, built into Apple devices. WebAIM's Screen Reader User Survey shows how real people use them. The kindest thing you can do is write semantic HTML: real headings, lists, buttons, and landmarks.
Alt text
Alt text is a short description that stands in for an image. The W3C image tutorial is the friendliest guide. Quick recipe:
- Describe the meaning, not every pixel:
alt="Black kitten napping in a teacup". - Skip “image of” — the screen reader already says it's an image.
- Purely decorative? Give it an empty alt (
alt="") so it's politely skipped. - Decorative emoji can be wrapped in
aria-hidden="true"so they aren't read one-by-one.
Keyboard & focus
Lots of people never touch a mouse. Everything clickable should also be reachable with Tab and usable with Enter or Space.
- Keep a visible focus outline (WCAG 2.4.7). Try tabbing around this page.
- Make sure the tab order follows the reading order.
- Don't trap focus inside a widget with no way out.
Forms & labels
Every input deserves a real <label>. Placeholder text alone
disappears the moment you start typing and is often too low-contrast. Pair labels with
inputs using for and id.
A bit of ARIA (when needed)
ARIA can add labels and roles where plain HTML can't — but the first rule of ARIA is
“don't use ARIA if a native element will do.” The
MDN ARIA guide
is a nice place to learn. On this site, ARIA does small jobs like
aria-current="page" on the active nav link.
Motion & CSS care
Animations can be charming, but can also cause nausea or worse. Honor the system
setting with prefers-reduced-motion
For example, this site switches off or slows down every transition for anyone who asks. Avoid anything that
flashes (much more on the Photosensitivity page).