Screen readers are important because they make the Internet an inclusive place. A screen reader is software that reads the contents of a webpage aloud to a user, and are most helpful for those who are visually impaired/blind, have a cognitive disability, or are illiterate. Screen readers are responsible for identifying data on a webpage, interpreting that data, and then communicating the data to the user. This can be output through the voice of the computer or through a braille terminal (pictured below).
To reiterate, screen readers play an incredibly important role to those who utilize them, as they serve as a gateway to the Internet for those who cannot access it on their own. Completing everyday tasks such as emailing, paying online bills, or booking a plane ticket might not be possible without the aid of a screen reader.
Because of their importance, it is imperative that Software Engineers remain educated and mindful of screen readers as they build and shape the Internet. I hope that with this post I can help to remind the developer community of the responsibilities we share to make the Internet an inclusive and accessible environment for everyone. Kindly note that I am not covering all the ways HTML code affects a screen reader and this article is intended only as an introduction to the topic.
5 Ways Your HTML Code Affects A Screen Reader:
Alternate Text for Images
Screen readers can’t “read” images. Instead they read the alternate text provided through the HTML tag. This alternate text should give an accurate and clear description of the image’s contents. If there is no alternate text provided, the screen reader will read “graphic”. Not very user-friendly is it? Be sure to include a meaningful description of each image you include in a webpage.
Language
HTML allows you to specify the language your page is written in. This allows for seamless translation when your page is accessed in another country, or by a user with different language settings. If your page includes snippets of text from other languages, you’ll need to add another language tag surrounding the foreign snippet. This way, as a screen reader parses through your page it can read and translate the text into the appropriate language.
Semantic Structure
Screen readers will announce the text included in tags such as title or h1. Therefore, it is important to be strategic and mindful about what you are identifying as headers. Be sure that each of your headers throughout the page are valid and justify being read with emphasis. It is important to note that header tags should always be used - never tweak the size of the font or bold in place of a header tag. A screen reader looks for concrete HTML indicators to announce something as a heading so make sure to provide so.
The same applies for text within the body of the paragraph. While the strong (strong) and emphasis (em) tag will be picked up by the screen reader, the bold (bold) and italicize (i) tags will not be communicated to the user because they only have visual implications.
Links
Links are announced and read aloud for their entirety. This means that links with long text - more than a phrase or word - will often confuse the user and could result in them skipping the link all together. Additionally, links that are too short could prove difficult for a user to click on. Someone with a physical disability might use a screen reader as an aid, but use their mouse on their own. If the link is a single character, they might have trouble aiming the mouse perfectly over the link to click. Keep this in mind when deciding on the text that serves as a link.
Page Structure
When a human views a web page for the first time, they’re able to visually assess the page: general layout, color scheme, context, and route of navigation. A screen reader doesn’t have this luxury. Instead, each section of a page is read step-by-step in order top to bottom. Therefore, it is important that the layout of your page makes sense. Ask yourself - is all the content ordered in a way that would make sense if a user could only read top to bottom?
Now, take into consideration that the user can tell a screen reader to jump around to different parts of the page. Say I tell my screen reader to jump to the main context section, will the context here make sense? Is it actually the main section of the page? Additionally, are the navigation tabs across the page identified as navigation? When I ask my reader to go there will I understand the various links available to jump around the site? With these questions in mind, make sure that your page is organized in a way that makes intuitive sense to any user.
My inspiration for this post came from an article I found on Fast Company. The article tells a remarkable story about Michael Forzano, who has been working as a Software Engineer at Amazon since 2013. Michael was born with Norrie disease has been blind since birth. He relies on screen readers each day - at home and at the office. His story is incredibly inspiring and impressive. I encourage you to read and share the story with your colleagues.
I hope that we can all take a moment to reflect on the integral role Software Engineers play in a world which continues to rely more and more on the Internet each day. Because we shape a user’s experience on the web, it is critical we maintain these best practices to maintain a low barrier to entry, so that anyone may participate. By keeping screen readers in the front of our minds, we can ensure that everyone can benefit from the Internet.
Resources:
American Foundation for the Blind
WebAIM
Fast Company
Top comments (2)
I had smth like this some years ago.
I've tried to teach woman who was blind and used PC. I've taught her to use PC just with keyboard and screenreader, but couldn't teach her to work in the net. It was the problem with site structure and accessability and maybe my low level knowledge of using browsers without mouse/touchpad
really glad you're drawing attention to this, especially as we're starting with rails/web apps--awesome article molly! :)