Skip to main content

Training This is a not a real service, this is for training purposes only. You can give your feedback on this resource by email

Back to calendar

Day 10: Screen reader accessibility

Screen readers are essential assistive technologies for people who are blind, partially sighted, or have cognitive disabilities. They are also often used to listen to documents rather than read them, particularly if the content is long. They convert on-screen content into speech or Braille, allowing users to navigate websites and applications easilly.

Why screen reader accessibility matters

Screen reader users rely on websites that are well-structured and designed with accessibility in mind. Without proper support, users may face barriers navigating or understanding digital content, which can exclude them from accessing important information or services.

Types of screen readers

There are several types of screen readers which can be used for both desktop/laptop and mobile devices. Some, particularly for mobile devices are already built in and free to use and others are paid for software. These include:

Desktop screen readers

Mobile screen readers screen readers

Top tips for screen reader accessibility

Screen readers, and other types of assistive technology only work effectively when websites and services are created in an accessible way and using accessible code and structure. Here are practical steps to improve accessibility for screen reader users:

  • use semantic HTML, stick to standard HTML elements such as nav, main, and header. Properly structure your headings with h1, h2, and so on, in a logical order.
  • add meaningful alt text, use descriptive alt text for images to convey their purpose or content. For example, alt="A user logging into their account on a mobile phone." For decorative images, use alt="".
  • label buttons and links clearly, avoid ambiguous labels like "Click here" or "Learn more." Instead, use descriptive phrases such as "Read about our accessibility improvements."
  • provide skip links, include a "Skip to content" link at the top of your page to allow users to bypass repetitive navigation and go directly to the main content.
  • Ensure keyboard operability, check that all interactive elements, such as buttons and forms, are usable with a keyboard alone.

Example: clear alt text

If your website includes an image of Santa about to enjoy some milk and cookies, an appropriate alt text would be: 

    Santa's hands lifting a cookie and a glass of milk from a table 
     alt="Santa's hands lifting a cookie and a glass of milk from a table"

Testing your website

You should regularly test your website with screen readers to you understand how your content is announced and ensures that navigation flows logically. Many screen reader users navigate websites using a keyboard rather than a mouse, when testing with mobile devices you can also connect external keyboards to help you test. When testing you should check:

  • you can access all information on the page, site or application
  • read every element and header
  • navigate through every link using the tab key on your keyboard, if links open in a new window or tab, check this is annouced by the screen reader
  • check every landmark, such as the footer, navigation and main sections
  • check use of Accessible Rich Internet Applications (ARIA) and check if it works and has been used appropriately
  • check you can complete all editable fields, like text input fields, checkboxes and radio buttons
  • check that you can access all buttons and activate them
  • make sure that error messages, warnings, changes in context or submissions are annouced appropriately

Understanding Assistive Technology: Desktop Screen Readers

Watch the video from Level Access on understanding desktop screen readers

Watch the video from Level Access on understanding mobile screen readers