SmartCodingTips

Using HTML for Screen Reader Accessibility

Screen readers are assistive technologies that convert on-screen content into speech or braille output. Writing semantic and accessible HTML ensures that all users, including visually impaired individuals, can access your content effectively.

What Screen Readers Read

  • Headings (<h1>...<h6>) – Used to navigate the page hierarchy.
  • Alt text on images (alt attribute).
  • Form labels (<label> and aria-label).
  • Landmark elements (<nav>, <main>, <footer>).
  • ARIA roles and properties.

Best Practices for Screen Reader Support

  • Use semantic HTML elements for structure and clarity.
  • Always associate form inputs with a label.
  • Use aria-label or aria-labelledby for custom UI components.
  • Use landmarks like <header>, <nav>, and <main> for easy navigation.
  • Avoid using display: none for content that should be read by screen readers—use aria-hidden="true" when appropriate.

Example


<form>
  <label for="email">Email address:</label>
  <input type="email" id="email" name="email">

  <button aria-label="Submit form">Submit</button>
</form>