Recipe: Screen-reader-friendly markup

Ingredients

• Landmark regions: <header>, <main>, <nav>, <footer>
• Heading hierarchy: one <h1>, nested <h2>–<h6>
• Descriptive link text — never "click here"
• aria-label on icon-only controls
• Skip-to-content link as first focusable element

Steps

1. Audit your page structure.

   Open DevTools Accessibility panel. Every visible region should have a role.

2. Replace div soup with landmarks.

   Screen readers can jump between landmarks. Use them intentionally.

3. Add a skip link.

   First tab stop jumps past navigation straight to <main>.

4. Label every form control.

   Pair <label> with htmlFor or wrap the input.