3 Unit: 3: Text and Tables
After working on this unit, you are expected to be able to:
- Describe how someone using a screen reader navigates text content
- Create an accessible text document
- Define responsive design
- Describe the different ways text can be inaccessible
- Use an accessibility checker
Organizing content so it has a logical flow just makes sense. Using chapters, headings and sub-headings to organize a resource allows students to clearly see how the main concepts are related. In addition, headings are one of the main ways that students using a screen reader navigate through a chapter.
Who are you doing this for?
Everyone benefits from having content that’s clearly organized.
Well-organized content supports students who:
- Have a learning disability, like Natalie
- Are blind or have low vision, like Jacob
Image description: A young, white non-binary person wearing a shoulder bag.
Image attribution: “Natalie” by the University of Prince Edward Island is under a CC BY 4.0 Licence.
Image description: A white man sits at a desk in front of a computer.
He wears sunglass and headphones, and his fingers are on a refreshable Braille display.
Image attribution: Jacob: “WFE003: Jacob” by Rosenfeld Media
Why is this important?
Headings help to identify the hierarchical structure of a document (e.g., sections, sub-sections). They provide a visual cue that helps sighted readers quickly navigate through sections of a document, skimming until they find the section they are looking for. Similarly, headings create logical divisions in the content and allow a non-sighted user to navigate a page or document easily using a screen reader.
When it comes to using visual references to indicate the hierarchy and structure of a document, you might be accustomed to changing the font style, enlarging the text size or highlighting the text with bold, underline or italicize to create the impression of a heading. This approach presents problems when creating material with accessibility in mind because screen readers won’t identify the text as a heading.
Instead, the screen reader will just “read” through the text of a heading as if it were regular content, missing your intended cues about structure and organization.
What do you need to do?
All text editors and word processing tools allow you to add headings. In Microsoft Word, headings can be accessed from the “Styles” menu. In Google Docs, heading options are available from a drop-down menu. Rich text editors in learning management systems also often allow you to use headings.
When using headings, remember that they are used to convey meaning. As such, heading levels matter. The title of a document should start with a Heading 1. The main sections of a document should be Heading 2 and subsections Heading 3, etc. You should not skip heading levels or use headings to style text.
You can do to make digital text more accessible by paying attention to the font size and style.
Who are you doing this for?
Being intentional about font size and style supports students who:
- Have low vision and need to be able to enlarge texts
- Have a learning disability that affects their reading ability
What do you need to do?
There are three things to think about when considering font:
- The default font sizes should not be too small.
- Students should be able to zoom in on the content to 200%.
- Font choice should maximize readability.
Font Size
The accessibility requirements for font size vary widely based on individual accessibility needs, preferences, devices, and context. For example, someone may need a different size of font when they are reading on their phone, versus when they are reading on a desktop computer or attending a lecture that uses slides. And some people will need a very large font size to be able to read text comfortably (WebAIM, 2013a).
As such, accessibility guidelines recommend designing content to allow people to change the font size to fit their needs (W3C, 2018e). This may mean sharing copies of lecture slides to allow students to zoom in on content during a presentation. It may also mean designing educational materials so they are responsive, which allows each student to customize the display of content to fit their needs.
However, as a place to start, we recommend using a minimum of the 12-point font for regular text and a minimum of the 24-point font for presentation slides (Coolidge et al., 2018; BCcampus, n.d.).
Zoom to 200%
Large text size may not be large enough for students with low vision or who are experiencing eye fatigue. As such, students should be able to zoom in on the content to 200% without assistive technology and without needing to scroll left and right (W3C, 2018e). Web browsers, eReaders, PDF readers, and more allow readers to zoom in on the content.
Zooming works best when content is responsive and reflowable. This means that the text on the page automatically adjusts when the size or type of the font or the spacing changes. Reflowing is what you see when you change the font size of the text in a document. In contrast, content in PDFs does not reflow. As such, try to provide learning materials in formats that students can customize. These formats might include text documents, HTML-based webpages, or eBook files.
Font Style
Font style can have a huge impact on readability. The more fancy or intricate the font, the harder it is to read. As such, here are some general guidelines:
- Stick to simple, common fonts that are familiar.
- Limit the number of different fonts in one document.
- Avoid putting large amounts of text in caps or italics.
- Left-align text, don’t justify.
For print resources, the general recommendation is to use a simple, serif font. Serif fonts are a group of fonts that have a serif (a small line or stroke) at the ends of letters and often have varying thicknesses (WebAIM, 2013a). Examples include:
- Times New Roman
- Georgia
- Cambria
For on-screen reading, there is not a clear answer about whether serif or sans-serif fonts are better. Sans-serif fonts are a group of fonts that do not have serifs at the end of letters and are a standard width throughout the letter (WebAIM, 2013a). Examples of sans-serif fonts include:
- Calibri
- Arial
However, one recommendation is to use a font where all of the letters are unique and harder to mix up (WebAIM, 2013a). For example, in Arial, the capital I’s and lowercase l’s look identical, while in Veranda, the capital I’s have serifs and are a little shorter.
- Veranda: Illusion
- Arial: Illusion
Watch this video on customizable text:
Watch Video: https://youtu.be/rbiI65Jcz5s
Video attribution: “Web Accessibility Perspectives – Customizable Text” by W3C Web Accessibility
Initiative (WAI) is under a CC BY 3.0 Licence.
In this section, we review how to add accessible links to content. Links include links to websites, internal links within a document or webpage, and links to downloadable files.
A link (also called a hyperlink) is found in a file, document or web page that redirects the student to additional information found in another online location using a URL. Links are typically activated by clicking on a highlighted word or phrase, but images can also be used to create links as well.
Who are you doing this for?
Links make it easy to navigate around the web and can direct students to specific resources to explore. However, students can access and open links in different ways, and descriptive link text can help a student know what to expect from opening a link.
This work support students who:
- Have a type of colour vision deficiency
- Are blind or have low vision, like Jacob
- Prefer print copies, like Kelly
Image description: A young Black woman sits at a computer wearing a headset, listening.
Image attribution: “Kelly” by the University of Prince Edward Island is under a CC BY 4.0 Licence.
Image description: A white man sits at a desk in front of a computer. He wears sunglass and headphones, and his fingers are on a refreshable Braille display.
Image attribution: Jacob: “WFE003: Jacob” by Rosenfeld Media is under a CC BY 2.0 Licence
What do you need to do?
To make links you share with students accessible, there are a few things to keep in mind. These include using descriptive link text, underline links, providing the file type in the link text when linking to files, like Word documents or PDFs, communicating if a link will open in a new window or tab, and providing the web address for students who may print the resource. Let’s explore each of these topics in more detail.
Use Descriptive Link Text
You need to ensure that all links have text that describes the topic or purpose of the link. This is important because students using screen readers can have their screen reader compile and read out all of the links on a page. As such, the link text must describe the destination of the link when taken out of context (W3C, 2018f). While link text such as “click here” or “read more” will make sense when you are reading a sentence, they mean nothing when read on their own.
Here are three examples of link text to the same site:
|
While the first two examples make sense in the context of the sentence, the link text of neither link describes the destination of the link. While the second example that uses the URL as the link text is better than the first example, it still does not make the destination of the link clear. In addition, it would force people using screen readers to listen to their screen reader read out the URL. While this is a short URL, that can get very annoying with long URLs. The third example is the most accessible because it provides the title of the web page that the link will take you to if you click it.
Underline Links
The presence of a link is often indicated by the use of colour. We will be discussing colour in more detail in Unit 4, but it is important to discuss colour as it applies to links. For example, blue is often used to identify the presence of a link. However, colour should not be the only indication. People who have a type of colour deficiency (often called colour blindness) or people using a monochrome display may not be able to differentiate black text from the blue text. As such, the text should also be underlined.
Link to Files
If you want to link to something that isn’t a web page—such as a Word document, Excel file, or PDF—you should include this information in the link text (WebAIM, 2013). This is important because it informs the student what will happen when they click on the link, thus preventing confusion. In addition, a student may decide not to click on a link if they know it’s a certain file type. This typically happens when a student doesn’t have the software needed to open the file or when they know the file type is inaccessible to them.
| Example: Inclusive and Accessible Tips for Designing a Course Online (PDF) |
New Tabs/Windows
When creating links, the default setting tends to be that links will not open in a new window or tab. This is generally the preferred behaviour as that is what people tend to expect from links. As such, clicking a link and having it open in a new window or tab can be disorienting. This is especially true for people who have difficulty perceiving visual content.
However, if you would like a link to open in a new window or tab, you should provide a textual reference.
| Example: Here is a course titled Understanding Open Educational Resources (new tab). |
Keep in mind that link behaviour (and people’s expectations) may vary depending on what platform you are authoring in. If linking from a Word document or PDF, the default and expected behaviour are that the link will open a browser window. However, that may not be the case when linking from a website or the LMS.
Print Copies
The final consideration that applies to links is how students who print a resource will access the websites linked to it. This might not always be applicable, but if you have a resource that students may print, then you need to provide the URLs for those links so those students can still look up the websites. There is no “right” way to do this, but two possibilities include providing the URL in a footnote or provide a list of URLs at the end of the resource that they can refer to.
In this section, we provide guidelines and recommendations for formatting tables. In this context, tables refer to data tables, which include row and/or column header information to organize and categorize information and show relationships between content. (Tables that do not have headers are called layout tables, which are just used for displaying information.)
Are your tables simple or complex?
A simple table includes a maximum of one header column and/or one header row. A complex table includes more than one header column and/or header row and may include merged or split cells.
[insert image comparing simple vs. complex tables]
You should make every effort to keep data tables as simple in structure as possible. The more complex the design of a data table, the more work it will take students to comprehend and navigate the information. However, you can use merged or split table cells if it supports comprehension and if the authoring platform you use supports the necessary formatting (Eggert & Abou-Zahra, 2019). For this course, we will focus on making simple tables accessible.
Who are you doing this for?
This work supports students who:
- Have a cognitive disability
- Are blind or have low vision, like Jacob
Image description: A white man sits at a desk in front of a computer. He wears sunglass and headphones, and his fingers are on a refreshable Braille display.
Image attribution: Jacob: “WFE003: Jacob” by Rosenfeld Media is under a CC BY 2.0 Licence
What do you need to do?
An accessible simple table includes the following:
- A table caption.
- A maximum of one row of column headers and/or one column of row headers, with the appropriate scope assigned.
- No merged or split cells.
- Adequate cell padding.
In Section 3.1, we discussed the importance of using proper headings to communicate the structure and hierarchy of content. The same is true of tables, which need a defined structure to be accessible.
Bolding text to show the presence of a caption and column headers will not work for students using screen readers. Instead, you must add a caption and row and column headers to indicate how the data relate to each other.
A proper caption allows a student using a screen reader to navigate directly to the table and have the caption read out. If the caption is just bolded text put above the table, the screen reader does not know that it is connected to the table.
Row and column headers with the appropriate scope assigned tell a screen reader what the structure of the table is and how everything relates. Without row and column headers, a screen reader would read the table cell by cell, left to right, row by row, with no indication of what column or row a particular cell is in. As such, providing headers in a table helps give context to the data in each cell for students who are blind or have low vision.
You also have to consider the formatting of the table. Tables that have adequate cell padding are easier to read than those that are squished together.
| Example 1: An Accessible Table
The table below is simple. Reviewed against the preceding requirements list, this table:
|
Table 1 Spring Blossoms
For a student accessing the table through a screen reader, the first row of data following the column headers will be presented along the lines of:
- Row 2, Colour family, column 1, Pink
- Bulbs, column 2, Tulips
- Shrubs, column 3, Flowering currant
- Trees, column 4, Ornamental plum
By marking the cells in the first row of this table as header cells with the scope assigned to “column” allows a screen reader to interpret the structure of a table and how cells relate to each other. This, in turn, ensures that someone using a screen reader can navigate through a table and understand what column/row a given cell is in. If a table doesn’t have headers, the screen reader will recite cell information starting in the upper left corner and continuing left to right, top to bottom.
How to mark cells and rows as headers
How to properly set up a table will vary depending on what platform you are authoring in. If you cannot figure it out, look up the support documents for that platform.
If you are familiar with HTML and the platform you are using allows for editing the HTML, you can edit the table markup manually. To make a cell a header cell, change the markup for that cell from <td></td> to <th></th>. Then, specify the scope for the header cell. If the cell is a column header, add a scope=“col” attribute. If the cell is a row header, add a scope=“row” attribute.
How to create a table caption
Again, how to properly add a table caption will vary depending on what platform you are authoring in. If you cannot figure it out, look up the support documentation for that platform.
In HTML, you can add a table caption by finding the <table> element that marks the beginning of the table. Immediately after that element, add caption tags with the title caption between it. See the following example of the markup for the Summer Blossoms table.
| Example 2: HTML table markup
<table><caption>Table 1 Spring Blossoms</caption> <thead> <tr> <th scope=”col”>Colour Family</th> <th scope=”col”>Bulbs</th> <th scope=”col”>Shrubs</th> <th scope=”col”>Trees</th> </tr> </thead> <tbody> <tr> <th scope=”row”>Pink</th> <td>Tulips</td> <td>Flowering currant</td> <td>Ornamental plum</td> </tr> …… </tbody> </table> |
The type of language you use in your teaching and the educational resources you share with your students can have a big impact on their comprehension and success. This applies to the words you use, how you organize information and the length of sentences and paragraphs.
As much as possible, you should try to use plain language. The goal of using plain language is to ensure communication (whether it’s written or verbal) is understandable by everyone.
Who are you doing this for?
Writing and speaking in plain language is one of those things that support the success of all students. However, plain language particularly supports students who:
- Have a cognitive disability
- English is not their first language, like Yuki
- Have a learning disability, like Natalie
- Are deaf, like Steven
Image description: A young East Asian woman with a shoulder bag and books under one arm. Image attribution: Yuki by Andrew Fryer is under a CC BY 4.0 Licence.
Image description: A young white man sits at a table. He has a phone propped up in front of him while he communicates in sign language.
Image attribution:“WFE005: Steven” by Rosenfeld Media is under a CC BY 2.0 Licence.
What do you need to do?
Using plain language is a process. It’s a skill that takes practice, rather than something that can be accomplished by following a set of steps. However, here are a few guidelines to keep in mind:
Consider your audience
First, think about your students. What are they expected to know at this point? You might use different terminology with an introductory class than you would an upper-level seminar. You also must consider the range of students in your class. Many may not have English as a first language and have a harder time following lectures or may be unfamiliar with culturally specific examples or figures of speech. In addition, if you teach a class with both major and non-major students, the non-majors may not have the same background to the topic that major students have.
Use common and concrete words where possible
Whenever possible, if a word has a simpler or more common alternative, use it. For example, “use” can replace “utilize.” If you need to introduce a complex idea or topic, provide a clear definition and an example so students can understand the idea. This also applies to academic or subject-specific jargon. It should be avoided or clearly defined.
Use the active voice and an informal tone
Many resources on plain language recommend using active voice and an informal tone (Center for Plain Language, n.d.; PLAIN, n.d.). In active voice, the subject acts upon the verb. For example, “I drank the tea.” In contrast to active voice there is passive voice. With passive voice, it is unclear who or what is doing the action. For example, “The tea was drunk.”
Keep sentences and paragraphs short
Short sentences and paragraphs that address one idea or topic are easier to read and understand.
Highlight the important points
Providing a list of learning objectives or key takeaways for a lecture, reading or assignment can help students determine what is important.
In Unit 3, we explored different considerations for making text content accessible. This included the importance of headings for providing structure to documents, how to select and style font, how to create links and tables, and strategies for making language more accessible. These considerations benefit all students, no just students with disabilities, as they help make educational resources easier to read and navigate.
Here is an accessibility checklist that can be used to manage the accessibility of text content, going forward:
Headings
- Content is organized under headings and subheadings
- Headings and subheadings are used sequentially to convey relationship between topics
- There are no skipped heading levels
Text
- Font size is 12 point or higher for body text
- Text can be zoomed to 200% without needing to scroll right and left.
- Font style prioritizes readability
Links
- The link text describes the destination of the link even when it is out of context of the rest of the surrounding text (it does not use generic text, such as “click here” or “read more”)
- Links do not open in new windows or tabs unless a textual reference is included in the link text (e.g., [New Tab])
- Links to files include a textual reference in the link text (e.g., [PDF])
Tables
- Tables include a caption
- Tables include row and column headers
- Row and column headers have the correct scope assigned
- Tables have adequate cell padding
Language
- Content does not rely on culturally-specific figures of speech or examples
- Sentences and paragraphs are short
- Word choice fits the audience and complex or unfamiliar terms and concepts are defined
1. What can students who use screen readers use to navigate digital documents or websites?
a) A mouse
b) Bold text
c) Headings
d) Italicized text
2. What is a sans-serif font?
a) A font that has no styling applied.
b) A font that does not have a small line or stroke at the end of letters.
c) A font that does have a small line or stroke at the end of letters.
d) A font that was designed for print.
3. Why is using accurate link text important?
a) Students who use screen readers will know the destination of the link when it is read out of the content of the rest of the sentence.
b) Students who use screen readers will not have to listen to the URL of the link.
c) Students know exactly where a link will take them before they click it.
d) All of the above.
4. What is an example of responsive digital design?
a) A user is able to zoom in 200% without needing to scroll right or left.
b) A website that adjusts its display whether it is being viewed on a mobile device or a computer.
c) Design that allows the user to personalize the colour of the text and background.
d) All of the above.
5. True or false: Links should always open into new tabs.
a) True
b) False
6. Which of the following is not true of data tables?
a) Data tables show relationships between cells.
b) Data tables need column and/or row headers.
c) Data tables can be used for layout.
d) Simple data tables have only one column and/or row header.
7. What students benefit from plain language?
a) Students whose first language is not
b) Students with a cognitive
c) Students who are
d) All
