Screen Reader Testing & Semantic Landmarks

Screen reader users (navigating via VoiceOver on macOS/iOS, NVDA or JAWS on Windows, or TalkBack on Android) do not read an entire webpage top-to-bottom sequentially. Instead, they scan interfaces using landmarks and heading hierarchies.

Essential structural rules include:

• Use Semantic Landmarks: Wrap major page areas in <header>, <nav>, <main>, <aside>, and <footer> rather than generic <div> tags.
• Logical Heading Hierarchy: Pages must have exactly one <h1>, followed logically by <h2> and <h3> without skipping levels (e.g., jumping directly from <h1> to <h4>).
• Screen Reader Only Text (sr-only): Provide visually hidden text for icon-only buttons (e.g., <button><X /><span className="sr-only">Close dialog</span></button>).