Screen reader accessibility — the basics

A screen reader (NVDA on Windows, VoiceOver on Mac/iOS, TalkBack on Android) reads your site to blind + low-vision users. Good screen-reader experience = good accessibility in general. Five basics: (1) Heading hierarchy: one H1 per page + sequential H2/H3 in logical order — not H1→H4. Screen readers offer "navigate by heading" — bad hierarchy makes site unnavigable. (2) Alt text: every <img> gets alt="...". Decorative = alt="" (empty, not missing). Informative = describe what it conveys. (3) Form labels: <label for=""> linked to every input. No "placeholder" as label substitute — disappears once typed. (4) ARIA labels: for icon buttons without visible text aria-label="Close menu". For regions role="navigation", role="main". Don't overdo: HTML semantics (button, nav, main) is stronger than ARIA. (5) Focus order: Tab key navigates in logical order. tabindex="-1" only for focus management. Test instructions: Mac VoiceOver Cmd+F5 / Windows NVDA free. Do these 5 things: (a) navigate site via Tab + Enter, (b) navigate via H keys (NVDA: H, VoiceOver: VO+Cmd+H), (c) try filling form via only keyboard + screen reader, (d) listen to alt texts, (e) test every button has a clear name. Tools: aXe DevTools, WAVE, Pa11y. But manual testing remains essential.