One of the most common tools helping students with visual impairments navigate the digital world is the screen reader. These software programs convert text into formats that are easier to access, typically transforming text into speech for visually impaired users. For those with both visual and hearing impairments, a screen reader can convert text into braille on a special display.
If you’re designing content for online courses, it’s important to understand how screen readers work and how to format your materials for accessibility. Let’s dive into the basics.
How Screen Readers Work
There are many types of screen readers available today, with two of the most widely used being JAWS and NVDA. While each has its own quirks, you don’t need to design your content for a specific screen reader. Instead, by following general accessibility guidelines, your content will be compatible with any screen reader your students may use.
Many people find it surprising that screen readers don’t actually read what is displayed on the screen. Instead, screen readers work by accessing the code that tells the computer what to display on the monitor. This is why screen readers do not register images when they are not formatted for accessibility. Images are only accessible to screen readers when they include background code that tells the screen reader how to describe the image. This code is called an alt text attribute.
In the past, screen readers were more rigid, reading documents from top to bottom in a straight line. This made navigating complex documents frustrating for users. Nowadays, users have much more flexibility. They can use keyboard commands (or sometimes voice commands) to jump between headings or links. This makes it crucial to structure your content with proper headings and descriptive hyperlinks so students can skim effectively. Since users may encounter the hyperlinked text out of context, Web content accessibility guidelines require that hyperlinked text be descriptive as to its purpose on the page. This type of “skimming” is an important tool for visually impaired students and should be considered when designing content.
Tips for Designing Web Content
Here are a few simple tips to make sure your content works smoothly for students using screen readers:
Use Headings Properly
Headings help to define the structure of your content. Most people are familiar with making an outline as a way to organize information. In an outline, you can tell when there are relationships between concepts because of how topics are nested underneath one another. With Web-based content, headings organize information in the same way.
Headings are like the outline of your content—they create structure and make it easy to navigate. In tools like Word, you’ll see options for “Heading 1,” “Heading 2,” etc. Stick to using “Heading 1” only once per page or document (usually for the title), and organize subtopics under headings 2, 3, and so on. Avoid skipping heading levels (e.g., jumping from “Heading 1” to “Heading 4”), as this can confuse the screen reader’s structure.
Use Titles That Describe Purpose and Function
When titling a page or a document, you should state the purpose or function of the contents within the title. Doing so is important because screen reader users may have several different websites or documents open on their computer at one time. If each title states the purpose of the page, it’s easier to navigate to the right place. Avoid using symbols in titles, because they may make it difficult to understand the title. For example, use the title “Sociology 1200 Lecture 1” rather than “SOC101-L1.”
Use Alternative Text for Image-Based Content
Since screen readers can’t interpret images, it’s essential to provide alternative text (alt text) that describes them. Alt text should capture the same information that a sighted person would get from looking at the image. In some cases, you might want to add a description of the image directly into the content, or you can use the alt text attribute hidden in the background code.
You can add alt text attributes to documents developed with Word very easily. When you right-click on an image, select “Format Image.” The actual location of the alt text option depends on which version of Word you are using; however, regardless, it will be under the “Format Image” option.
Designate Header Rows or Columns for Tables
When information appears in a table, it is very important that screen readers are able to determine how the information in each cell relates to other cells. Always use the built-in table tools in Word or other programs, and mark your header row or column. This helps the screen reader understand what’s being displayed, so it can announce labels to users before reading the data in each cell.
Hyperlink Text That Describes the Purpose or Function of the Link
When using hyperlinks, avoid vague text like “Click Here” or “Next Page.” Imagine hearing these out of context—students won’t know what they’re clicking on. Instead, use specific, descriptive text like “View Course Syllabus” or “Read Chapter 1 Summary.” This way, students can easily decide if they want to follow the link.
Screen readers have opened up the digital world to users who have visual deficits. Before the development of screen readers, those who had low vision or no vision had to rely on others to read digital information to them. Screen readers allow independent use of digital tools. It’s essential to consider the needs of screen reader users when designing accessible online course content.
