What is a screen reader?
A screen reader is a software app on your computer that reads out the text on the web page into spoken words. Blind people listen to the words to understand what’s on the web page.
The most popular once are JAWS, Non-Visual Desktop Access also called NVDA for short, Orca, Dolphin, and VoiceOver.
How does a screen reader work?
Once you setup the screen reader on your computer, every time you open a web page, the screen reader automatically starts reading out.
It first reads the title of the web page(what is displayed on your browser tab). Then it goes on to read the content of the web page from left to right, starting with the logo, tagline, the navigation elements-menu/search (or whatever is in the main navigation). It then moves on to read the main content.
Once you finish reading a page and move on to the next page on the site, you don’t want to listen again to the title, logo, tagline, etc. Using keyboard shortcuts, you can skip to the main content.
You also have the option to navigate through the headings, links, landmarks, etc on the page
What are the key considerations to make your web content screen reader accessible?
- Add text or text equivalent for all the content on the web page. Eg: Alt tags for images.
- Test to make sure all the functionality on the web page is available using the keyboard. Even though blind people can physically use a mouse, they can’t see where the mouse pointer is.
- Make sure your markup follows a good content structure and semantics with headings, tables, lists, etc so the user can jump directly to various sections.
- Provide an option to skip to the main content on the web page directly.
- All custom controls on your web page(eg: expand-collapse menu) must have labels, roles, and values (either using HTML or ARIA ). This way the screen reader can recognize what these custom controls are. When you set ARIA names, roles, states, and properties to the custom controls, the screen reader can provide additional information about the custom control to the user. Also make sure the values of the custom controls change appropriately (eg: aria-expanded=”false” changes to aria-expanded=”true” after the menu button is opened).
- After every action is completed on the web page, the user should get immediate notification via the screen reader. Eg: contact form submission/failure, slider change, a new page is loaded, menu is opened or closed, etc.
- If videos have visual content that conveys additional information about the video, understand that the blind user cannot see the visual content, they can only hear the dialogs. Add audio narratives to describe the visual content out loud.
- A screen reader on a mobile device cannot do the swipe feature. All swipe features also require a click action so they are screen reader accessible.