Screen reader

Can you use a screen reader to access the page content?

Why it’s important

  • Eric has low vision due to glaucoma and regularly uses a screen reader for assistance.
  • Morgan is blind and uses a screen reader to navigate the web.

Next steps

  1. Add invisible Content for screen reader users(this link opens an external website). For example low vision users may need to be aware when a modal has opened.
  2. Use a screen reader to make sure you can land on controls and that they’re announcing elements correctly.
  3. Determine whether the HTML document has a language attribute so that the screen reader will read it with the correct accent.
    e.g. <html lang="en">
  4. If forms are present, make sure the screen reader reads labels and instructions.
  5. Check that all headings are marked correctly so the screen reader can identify them.
  6. Make sure all links are descriptive. For example the link text "Read more" provides no context where the user will go if they click it. Give a more descriptive title of what's on the other side of the link, e.g. Read more about accessibility.
  7. Check that any links leading to an external site have an element only visible to the screen reader. For example the following code will tell the user the link leads to another website:
    <span class="sr-only">(this link opens an external website)</span>

Last modified: