A screen reader is one of the assistive technology which is widely used by the blind users and folks with special need such as sight issues, illiterate, or have a learning disability. Screen readers convert the text into the voice and speak it aloud for the users. Users of screen readers use their preferred screen reader with their fav operating system and browser. They are very comfortable with the screen reader's shortcut commands to use the web.

If you are a web developer or tester and want to experience how a screen reader works then all you need to do is turn off your monitor or decrease the brightness to 0 and enable the screen reader. Now, just follow what the screen reader is saying and try to access the webpage accordingly.

Again, the way non-screen readers and screen readers users access and experience the web content is very different.

Screen reader tests are considered the "litmus tests" in the development of accessible user interfaces.

How many screen readers we have?

There are many screen readers available. However, there are only a few which are popular among the users of screen readers. Screen readers could be paid or free.

Few popular screen readers are JAWS, Voice Over, talkback, NVDA, ORCA, ChromeVox.

Does screen readers used by blind folks only?

Screenreaders are not just for blind users. It is also for the folks who are having vision-related problems, any special need, or anyone who needs it.

Screen reader Browsers, OS, and software:

We can divide the screen readers into two: Mobile and desktop. Mobile screen readers are easy to use as compare to the desktop.

1. Windows | Edge | Narrator
2. Mac | Safari | VoiceOver
3. Windows | Chrome, Firefox, Microsoft Edge | NVDA & JAWS
4. Mac | Chrome, Firefox | VoiceOver
5. Android | TalkBack
6. iOS | VoiceOver

How to use a screen reader?

You need to test on all the screen readers (as per the table given above the combination of a Screen reader, OS, and browsers).

I would prefer to watch the video by Rob on how to use a screen reader (Link will take you to YouTube)

As a developer what to know?

1. If you are using a screen-reader for the first time it could be overwhelming for you but with time you will be used to of screen reader.

2. Always use the screen reader with the compatible OS and Browser. Every screen reader user has their preferred operating system, browsers, and screen reader. Hence, it is important to understand which combination works - screen reader, os, and browser.

3. Every screen reader user uses shortcut keys to access the webpage. Make sure that you are testing your application with those shortcuts/hotkeys.

Eg: the H key is used for getting all the headings of the page. This helps the user to scan the webpage just by headings. In addition to that, we need to make sure that we have used the headings correctly and it conveys the messages.

4. Screen reader testing cannot be automated at all.

5. The experience of the screen reader is very different from sighted users.

6. It is important to test dynamic content and complex data with screen readers. Observe, if the screen reader is announcing the 'dynamic content' appearing on the page or not? For complex data such as a table, graphs, etc. is Screen Readers can provide the same information as for non-sighted folks? or any dynamic data such as notification of errors after submitting the forms is getting announced by the screen reader or not?

7. Screen reader pauses for the comma, full stops, semi-colons, question marks, paragraph endings, exclamation marks. These are important to know when you are testing.

Best Practise while developing the website

1. Headings: Screen readers scan the webpage by headings. Once the screen-reader gets enable, the user can press H (hotkey as per the OS) to scan the webpage rather than letting the screen-reader read the whole webpage. Users can jump to landmarks based on the heading. Hence, as a developer, it is important to have correct heading orders and landmarks.

2. Have the skip navigation link: Pages with long navigations will keep repeating the navigation with every new page load. This would be a very annoying experience for screen reader users. Hence, it is important to have the "Skip Navigation Link".

3. Security: As a developer, it is important to take care of the security. Whenever you have a password field use the correct type=" password". When the correct type is skipped, the screen reader will read aloud the password entered. The user could be in a public place hence it is a threat to security.

4. Page Titles: Page titles are very important for screen reader users. For them, page titles are the guiding light whenever they from one page to another. Screen readers read aloud the page titles. Hence, it is important to have proper page titles. In SPA, we can use the Helmet to change the titles.

5. Information of the action: Screen reader will announce the links (tags) - "it is a link". It is good to practice to guide the screen reader if the link is going to open a new window or goes to the 3rd party website. As well as, if the link is downloadable then important is to mention this too in addition to the type of document that will download.

6. Abbreviations: Screen readers behave differently with the abbreviations. Eg: AIR (instead of A I R it might read air as a word ) or many times the word can be read as abbreviations.

7. Lang: Use the lang attribute where ever you are using non-English words. This will help SR to understand and adapt to the language. Such as if you have Spanish words and the lang is not set to Spanish then the screen reader won't able to recognize it is a Spanish word.

8. Images and alt-tags: Screen reader is all about text and not about images and animations. Hence, alt tags are very important for the screen reader. If you are using filler or presentational images then you should have a blank alt tag. Otherwise, the screen reader will announce the file name. As well as, having a clear and proper alt tag is important.

9. Style: CSS styling would be ignored by Screen readers. Hence, line-through, bold, italic, sub, sup will be ignored by the screen readers. It is important to have the screen reader supported way of these styles if they are important for the user.

Eg: it is very common for e-commerce sites to use line-through to show the old price and then new discounted prices. If line-through is done by the 'CSS' then the screen reader won't understand the strike-out price and end up announcing two prices and which will confuse the user.

Summary

Make your web application applicable for 'everyone' is indeed important and investing your time and effort in making sure you are shipping the well-designed, developed, and tested application not just for non-disabled folks but also for disabling folks should be non-negotiable.

Questions? You can reach me at twitter

Happy learning!!