Nick Roberts

Full Stack Web Developer


Nick Roberts

Web Accessibility: An Introduction to Screen Readers

A screen reader is a software package installed onto a computer. They are often installed as part of the Accessibility features of the computer’s Operating System (OS), although third-party packages are available online. Screen readers are designed to make it easier for users to interact with devices they would otherwise be unable to use.

A computer’s Operating System, and associated software have all Accessibility features built in, however websites are loaded in a Web browser, which the OS is unable to access. It is therefore the job of the Web Designer / Web Developer to ensure that the websites they build are accessible by screen readers, so that all users have access to the same content of the website.

Types of Screen Readers

Typically, screen readers use a Text-To-Speech engine built in to the OS to read the content on the screen to the user in an audible format using headphones or speakers. Users navigate using the tab key, and various other function keys on the computer’s keyboard. When typing on a keyboard, the keys pressed are also spoken to the user, so they know which key they have pressed.

There are however, more specialist screen readers available, called Refreshable Braille Displays, which convert the text on the screen into Braille, allowing deaf-blind users to still have access to the same information displayed on the computer. These Refreshable Braille Displays involve a hardware device connected to the computer with at least one row of ‘cells’ which create the Braille characters. These devices also have a series of buttons which are used to navigate around the screen.

Screen Readers and Web Browsers

Screen readers require well-structured HTML code to be able to work effectively. They do more than just read the text of a website. Screen readers also read the HTML of the page, relaying the alt attribute content of images to the user, providing a descriptive, meaningful alternative to the visual image. Other HTML tags are used by screen readers to emphasise certain words, as well as having an impact on the SEO of the website.

Links on pages should also contain descriptive text about what the link is, informing the user what the page the link goes to will involve. If the link text was ‘Contact Us’, the user would know that the page would contain details of how to contact the company, likewise, if the text was ‘About Us’, the page would contain information about the company or website.

The links on a page should never contain the words ‘click here’, as this has too much focus on mouse mechanics, and not all users are using a mouse. The word ‘here’ has too much focus on location on the screen, and visitors using screen readers have no ‘location’ for the link to navigate to. Screen readers are also capable of just focussing on the links on the page, listing all the links the user could follow, rather than reading all of the content. If the majority of link text was ‘click here’, users would not know where the links were taking them, and the screen reader would read out a continuous stream of ‘click here… click here… click here… click here’. title attributes can also be used on links, providing further details about the link that would not be shown as part of the text on the page. These title attributes are available to other users with the use of tooltips on the screen.

The content of a website must also be carefully written. If the text is written in capital letters, a Text-To-Speech screen reader will read the text as individual letters, so text written as ‘GET IN TOUCH’ will be read out as each individual letter (‘G-E-T … I-N … T-O-U-C-H’). Text must therefore be written in lowercase and styled to be capitals.