SKIP TO MAIN

Screen Readers

Screen readers are an important check to make on every web page / application. Even if your not testing for content, a screen reader should be on as it can expose other issues.

How to check / what to listen for.

  • Does it make sense?

    When a screen reader is going over the page, does what you hear and the order in which you hear it make sense? Sometimes CSS can change things in a way where what you see, isn't always the same as what you hear. Sometimes text that is all uppercase can be read out as an acronym.

  • Can links stand on their own?

    Screen readers can 'view' the page by links only, so hearing 'read more' wont help the person find what they need in a quick fashion. Link text should be more specific as to where they are going (same can be said for buttons as well).

  • Are state updates announced?

    Items like radio inputs or check boxes, should indicate checked / unchecked changes. Things like an accordion should track expanded / collapsed state (this is done via aria-expanded).

  • Is updated content announced?

    If dynamic content is added to the page, the person using a screen reader should be aware of the new content. Toast messaging, open modals, etc should all be announced to let the person know what has changed.

Desktop Screen Readers

For desktops, turning on the OS reader is not enough. Most people who need to use screen readers will typically use ones listed below.

Device Screen Readers

Tablets and mobile devices have their own screen readers.

  • Android / Google - TalkBack

    TalkBack is the Google screen reader included on Android devices. TalkBack gives you eyes-free control of your device.

    read more about TalkBack

  • iOS - VoiceOver

    VoiceOver is the screen reader built into iOS devices and can be controlled with gestures.

    read more about VoiceOver