What Is a Screen Reader? How Do They Work?

A screen reader is a technology that we use every day on our mobile devices, some of us are familiar with it, but the rest don’t know the exact term used to define it. 

Let’s go through the basics, working, usage, and more related information about a screen reader. 

What Is A Screen Reader?

A screen reader is a type of assistive technology that provides text and image content as braille or speech output. Such technologies are essential for the visually impaired, illiterate users, and people with learning disabilities. 

Screen readers perform closely with the computer’s Operating System (OS) to render the details about menus, icons, files, folders, and dialogue boxes. 

Screen readers are software that conveys what people with normal eye vision see on a device screen to the users through non-visual means, such as sound icons, text-to-speech, or braille devices. 

How Does A Screen Reader Relay Information To The User?

This software can provide information to the users in two ways:

1. Speech

A screen reader translates on-screen information into speech using a Text-To-Speech (TTS) engine that you can hear through speakers or earphones. A TTS arrives bundled with the screen reader, or it can be a hardware device that comes connected to a computer. 

Earlier, screen readers used to make the use of hardware TTS devices when soundcards didn’t come included in computers. But, today, as soundcards are generally found on all computers, many prefer a software TTS. 

2. Braille

Besides speech response, screen readers also relay information in Braille. In an external hardware device, a refreshable Braille display is essential for this. It includes one or more cells, each of which takes the shape of a braille character, a sequence of dots that looks like domino dots (a rectangular tile in which a line divides its face into two square ends, and every ending is marked with various spots or is blank also). With the change in the computer screen’s information, the Braille characters also change on display, offering refreshable information from the computer. Baille output is usually used along with speech output.

How Does A Screen Reader Work?

The screen readers use various sorts of keyboard commands to conduct distinct tasks. These tasks may be reading a part, or an entire document, web page navigation, opening, and closing files, or listening to and editing music. 

A computer user with visual impairments will use screen reader commands, and OS commands to complete various tasks a computer can perform. 

Every screen reader demands the usage of different command series. So, many people choose a screen-reader and stick to it as it’s pretty easier than learning various new keyboard commands. 

How Do Screen Reader Users Navigate A Page?

Screen readers also permit users to:

• Navigate through data tables, 
• Get a links list organized alphabetically, 
• Search for keywords within the page, 
• Go from cell to cell, conveying to the users about the row or column headers 

The screen reader users navigate within a page in various ways, like:

• Jump from heading to heading,
• Use the ‘Tab’ key to navigate to form controls and links.

Screen reader users may follow any method to navigate and adhere to it.

There are two types of navigation:

• Site-wide Navigation
• Page Navigation

The navigation menus showcase the web site’s basic structure in site-wide navigation. The developers usually follow some best practices for navigation menus that include ‘Designing fly-out menus’ for keyboard and screen reader users. 

On the contrary, in-page navigation, structure and organize the page according to the headings to help intellectually disabled users and screen reader users. 

A study says, most screen reader users consider headings as one of their ways to find information on a page. 

Besides, again in the page navigation, the landmarks offer a valuable way to organize information. Also, landmarks offer additional skip navigation to the screen reader users to skip or bypass repetitive web page content. Usually, such links are provided for sighted users.

How Are Screen Readers Used?

A technology that reads the content loud that we see on screen is a screen reader. Users can customize it by changing the language of the speech or reducing speed. Screen readers help navigate apps and websites via the speech output. You can use screen readers with a Braille display as well. 

Besides, you need to learn some touch gestures or shortcut keys while starting with screen readers. 

Almost all computers and smartphones have a built-in screen reader. 

Let’s talk about how to use desktop and mobile screen readers. 

1. Desktop Screen Readers

Users usually navigate on a desktop using their keyboard. Either they jump between various components, such as forms, headings, landmarks, or links, or step from object to object. 

A screen reader user survey shows that most desktop screen reader users navigate between the headings when jumping on to a new page. For example, in JAWS, one of the widely used desktop screen readers, you can do that by pressing the h-key. 

2. Mobile Screen Readers

However, most screen reader users may avoid connecting a keyboard to their mobile devices. Instead, they use their fingers to move on the screen following any of the below ways:

• Touch navigation: By dragging fingers across the screen, screen reader users read what’s under their fingers. 
• Swipe navigation: By swiping left and right, the users move between items. It’s similar to using the tab key on a computer keyboard. 

Well, people switch between the navigation modes. One can navigate the entire page by swiping as it targets every item and on every smallest click. But, it takes a little more time compared to the touch mode. 

Which Operating Systems Do Screen Readers Work With?

Our main priority should be to make our website and app easily accessible to everyone, even people with sight disorders. You can achieve the accessibility target by using tools that help access web content efficiently. 

You need to know how different accessibility tools work. It may demand some training, but it would be worth it. 

Let’s learn how different screen readers perform in other operating systems. 

1. Apple iPhone iOS

On iOS, VoiceOver is a screen reader that arrives along with it, and it helps visually impaired people and people with learning disorders. You can toggle on and off the VoiceOver when you need it and can use it to read content in Barnes & Noble Nook, Amazon Kindle, and iBooks apps. 

How to Turn On VoiceOver?

• Go to the Setting menu.
• Move down to General Setting
• Find Accessibility Section
• Turn on VoiceOver and other options you need.
• Down the screen, enable Accessibility Shortcut (it allows triple-tap the Home button, which will shoot a pop-up with a bit of menu holding On & Off options of VoiceOver quickly, avoiding going to the Setting menu repeatedly). 

To start, we will first triple-tap the home button to enable VoiceOver. 

We will use gestures to navigate in VoiceOver:

• Move around the page: You can swipe to the right or left. 
• Scroll down the web page: You can perform a three-finger wipe up and down, and it will move the whole page at a time without animating it. 
• Click on something: Using a bit twisting gesture, you can navigate by link or heading as if you are turning a knob.

2. Android

We use a TalkBack screen reader for Android mobile, and it comes pre-installed with the Android-like VoiceOver that comes with iOS. Let’s understand the basics of navigation with TalkBack. 

How to Turn On TalkBack?

• Go to the Setting menu.
• Scroll down to Accessibility, where you will see varied options.
• First, turn on the Accessibility shortcut and ensure the Shortcut service is set to TalkBack (when you hold both the volume buttons down, your screen reader will turn on, isn’t it so easy). Speaker will say, TalkBack ON.
• To make TalkBack stop talking, just tap the screen again that it’s reading aloud, and it will make TalkBack chill out.

It is a gesture-based tool that works as below:

• Explore by touch: Touch the stuff, and the screen reader will just read it for you.
• Navigation: Swipe to the right to move ahead and swipe to the left to move back. 
• To Scroll: Use two fingers to perform scrolling.
• To Click on something: Swipe down to an anchor, post the screen reader to catch up the focus on the item, double click, or double-tap the screen to click it. 

3. MacBook MacOS

On the Mac, we have got an in-built screen reader, namely VoiceOver. 

How to Turn On VoiceOver?

• Go to System preferences.
• Go to the Accessibility setting.
• Click the VoiceOver tab, and activate it by checking the check box available, Enable VoiceOver. Your laptop would start talking.

Gestures we will use:

• To navigate: Ctrl+Alt+Right Arrow and move around the screen.
• Jump through major headings: Ctrl+Alt+Command-H.
• Click on Things: Ctrl+Alt+Spacebar

4. NVDA for Microsoft Windows

A free screen reader for Windows is NVDA (non-visual desktop access). 

How to Download NVDA?

• Go to the official site of NVDA. 
• Click on the download button; it’s a free and open-source project. 
• Follow its installation steps as the screen demands.

Gestures we will use:

• Navigate through headings: Tap the H key to move forward through the headings. 
• Move backward through heading: Shift-H.
• Navigate through the line: Up and Down arrow button to move up and down through paragraphs of text.
• To jump to the next available form: Hit the F key.
• To change to Form mode: Caps lock + Space 

5. Linux

On Linux systems, you can use Gnopernicus and Speakup screen readers. These are best for visually impaired users who want to access the Gnome 2 desktop. 

Both the Linux screen readers follow the open-source tradition so that you can download them freely. 

How To Make Screen Reader-Friendly Interfaces

Crafting screen reader accessible interfaces demand correct coding. Although, you also need to make it usable, intuitive, and easy to navigate. Many people usually forget about such ‘softer’ factors. But targeting the technical aspects will not make your interface accessible to the screen reader users by default. 

So, let’s reveal some usability tips!

1. Make touch targets large

People who navigate a mobile device need large touch targets, and if you design them too small, users may miss them. 

2. Limit the number of links in the site banner

You should limit the links usually in menus, social media share functions, and headers as screen reader users get stuck to them before interacting with the page’s main content. This way, you can improve the user experience of everyone, including the screen reader users. 

3. Include skip links

We know we talked about limiting the links in the website banner, but it would be better to include a skip link. Such links will allow the users to skip insignificant parts of a web page and jump on to the essential ones.

Also, make the skip links first focusable elements, which means they can be hidden visually but should be shown in the highlights. It means it shows such elements when users tab them. 

4. Keep paragraphs short

Short paragraphs ease the screen reader users to reread something on a page by going back. With a screen reader, the users read one section at a time. So, it would be pretty challenging to review big ones. 

5. Use a lot of headings and subheadings

Considering skim reading (a reading mode where you target the text’s main ideas and skip the details, data, and other elaboration), you need to divide content into various headings and subheadings. Screen reader users usually jump between the headings as it’s considered the primary way of lengthy page navigation, and it would not be effective when there are just a few headings. 

Moreover, good use of headings and subheadings, and short paragraphs assist many users with reading disorders like dyslexia.

Obviously, these are not much; various other things come to the surface when it’s about screen readers and usability. 

6. Code headings correctly

As screen reader users jump from one heading to another, the headings need to be coded as h-elements focusing on the HTML specifications, like <h1>, <h2>, etc. 

You need to ensure that you have the correct heading structure; we usually encounter mistakes with such. 

7. Give images alt-texts

While attending to an image, the screen reader will read the image’s alt-text. It should be the image’s description that developers or editors add. But, most miss adding keywords to the alt-text or writing alt-texts with the hope of increasing their SEO which leads to an accessibility issue. 

8. Careful with modals

Often, a modal window (In the app’s UI design, a modal window crafts a mode that keeps the main window visible while disabling it, which means it is a child window that appears in front of the main window) misses up the focus. The screen reader user gets trapped at its back and fails to find it. This way, those components stay untouched by the users. So, you need to try better ways to build accessible modals. 

9. CAPTCHA’s

Captcha arrives with an accessibility issue as visual captcha can’t contain alt-text as it may not meet its purpose. Not only the screen readers, bots, and even programs can also read alt-text easily that shouldn’t access such websites. The role of captcha is to put aside such bots from the sites. Therefore, the captcha can’t contain alt-text, so screen readers can’t read the captcha. 

Similarly, you can’t include an audio Captcha as it can’t have an associated text file revealing its objective. So doing this again would facilitate bots to read that target easily and fails to meet the purpose of using Captcha. Furthermore, it makes it tricky from an accessibility perspective. 

10. Follow coding standards

You should follow coding standards and use standard components to make your interface accessible. 

For example, while making a checkbox, you need to use the input element with the type checkbox following the HTML standard. 

11. Learn to test with a screen reader  

Before releasing your website, you will make it undergo a testing phase. You need to apply the same notion to screen readers, and you should learn the fundamentals of using a screen reader. Also, test your product with a screen reader before making it live. 

Why Screen Readers Are Important For Mobile Apps & Touchscreen Devices?

People with low vision have a feature of listening to text on their touchscreen that facilitates screen readers to read aloud and interact with the screen elements via multi-finger gestures. 

Screen readers are software that recognizes the screen elements and read-aloud information to the user via braille or text-to-speech output devices. People having visual impairment use the screen readers to identify images, text, headlines, page regions, navigation elements, etc. Additionally, such software exhibits information in absolutely sequential order to which users listen patiently to get the page’s description and catch up with what sounds attractive to them. 

However, the users can’t directly choose the required element as they first need to attend to the aspects that were caught before. However, the users can place their fingers on the middle of the screen to allow the voice reader to skip the elements preceding the promising ones. This way, they can save the time that one needs to listen to the whole page. 

Also, if the users miss something essential and want to glance back, they can flick their fingers across the screen until they hear what is being missed. 

Some common gestures of VoiceOver:

• Flick two fingers from the top of the screen towards the end of the page to listen to what’s written on the page from top to down.
• Drag one finger all over the screen to understand the interface 
• A single tap makes the focus come on a link or button, and a double tab activates it.
• 3-finger vertical flick allows the screen to go up and down by scrolling.
• 3-finger horizontal flick is like a regular swipe. 

What Applications Do Screen Readers Support?

Screen readers hold the caliber to support a wide range of pretty common apps on their native platform. The Linux screen readers back a broad range of apps, including Open Office or VI for word processing, Firefox, Evolution for email, and other common Linux apps. 

Voice Over for the Mac comes integrated with an operating system, so it supports all common Mac apps.

The Windows screen readers support common Microsoft apps, like Internet Explorer, Office, and Messenger, also other support for other apps, including Winamp, Soundforge, Eudora, Acrobat Reader, and Firefox. 

Window-Eyes and Jaws, the Window-based screed readers, provide supporting apps that are not by default supported. They both offer a mapping or scripting language that you can use to craft a bridge between an app and the screen reader. Then it becomes possible for tech-savvy users to develop scripts for themselves and next widen the range of apps with which their picked screen reader will work. 

How Do Screen Readers Deal With Different Languages?

A screen reader will hold a primary language that perfectly matches the OS language. Also, they can deal with different languages within the documents. 

For example, if a paragraph is written in French on a web page, a screen reader will change the pitch, accent, and speaking speed to the processed speech output to mimic the spoken French style. 

Most screen readers usually support common languages, including American English, Spanish, German, French, and Italian. And other languages are supported by different screen readers. 

How Do Screen Readers Deal With Graphics?

Screen readers are so programmed that they can recognize standard graphics on the OS and common apps they work with. When a screen reader attends a graphic, after the recognition it delivers a pre-programmed text piece as a revert to the user, either as a braille or speech output. 

The problem emerges when the screen reader meets an image that it fails to identify. With some screen readers, users add a label to the image themselves. However, it’s assumed that an image’s description is found elsewhere to continue ahead.

When it’s the case of web pages, the text description added to an image is delivered to the screen reader user in the format they choose, who then assumes that the website developer has provided such a description. 

How Do Screen Readers Work With Web Pages?

When the web pages are developed using well-structured code, screen readers find it easy to interact easily. Well-structured web pages need to incorporate headings, paragraphs, lists, and quotations, along with the tables that embrace information relevant to the content, images that hold links, and an alternative text description that holds clear link text. All such things should be accomplished using the computer language in which the web page is written. 

Such elements are essential in the computer language code because a screen reader will read the page’s code and avail specific key commands. For instance, when screen readers recognize a table on a web page, they will look for the row and column headings, and if they find them, they relay this information to the user. 

Additionally, a sequence of key commands is offered that makes the table navigate vertically or horizontally. Some screen readers also relay quick navigation keys for exploring the web page. 

How Do Screen Readers Deal With Documents?

With common apps, like word processors, email clients, PDFs, and web browsers, connecting with the text in distinct ways is possible. Key commands permit very precise navigation through such a document. 

A “say all” command will read the whole document from the point where the cursor is lying on the screen to the bottom of the document or until another critical command stops it. 

A screen reader can move one letter, paragraph, word, or sentence through a document. The advanced version of screen readers can skim through a whole document, reading just the first few words from every paragraph or page. 

Screen readers also hold the caliber to detect information relevant to the text formatting. On invoking specific vital commands, the font style, size, and color can be showcased to the user. 

An OS crafted for visual feedback is tricky to use with an app that uses Braille or speech. But, a screen reader conducts most of the tasks, if not all. 

How Can We Help You?

We are a team of experts and have years of experience meeting accessibility challenges or offering an accessibility evaluation of mobile apps or sites. Feel free to connect with us; we will be more than happy to serve you with your custom needs.

Conclusion

So, after going through the post, you might have understood how it’s essential for a designer, developer, and usability professional to ease visually impaired people with details about the page through speech. 

You can make your website and app easily accessible to normal users and visually disable dpeople. It will enhance the user experience and make users repeatedly come to your site.