This article discusses written documents in any format, still images, tables, graphs, Canvas pages, and other materials. For information on video captioning, please see our tutorials on captioning with YouTube and captioning with Panopto. For information on the specifics of making accessible PDFs, visit our article about accessible PDFs and our instructions for using SensusAccess. For guidance on accessible Word documents, visit this resource from the University of Washington.
Understanding Accessibility for Documents
There are many reasons you may need to ensure your documents are accessible. For example:
- accommodating people with visual impairments like blindness, low vision, colorblindness, or low contrast sensitivity, or light-triggered conditions like migraines,
- including people who have dyslexia or another disability that makes reading text difficult,
- simply allowing users to access information in multiple ways.
In many cases, making documents accessible is a matter of using certain formatting settings or providing extra information that may not be immediately apparent to users with typical visual abilities and/or neurotypical people.
Jump to a specific topic:
Essential Formatting for Accessibility
Here we cover the basic must-haves for accessible documents.
Contrast
For text, high contrast is a key factor in accessibility. This is usually an easy choice: use black text on a white background, or white text on a black background (“dark modes” may also help people who suffer from eyestrain, migraines, etc). Do not use light or medium-toned text on a pale background or dark text on a dark background, different shades of the same color, etc. Use methods other than different colors of text or background/highlighting to emphasize particular passages (like bold or underline). In addition to contrast issues that colored text may cause, remember that people with colorblindness may not perceive the distinction between passages of color-coded text.
In addition to text color, be attentive to backgrounds and themes in slides, fliers, and infographics. Backgrounds with color gradients (common in Powerpoint and Google Slides) may result in text that has sufficient contrast in one part of the slide and insufficient contrast in another.
Fonts
Research has shown that some fonts are easier to read than others, particularly for individuals with dyslexia (see the Bureau of Internet Accessibility’s article on font accessibility for more information). Often this has to do with the presence (or absence) of certain character features like serifs that make letters look very similar. Sans-serif fonts are generally considered more accessible. If you adopt a more accessible font from the beginning, you may avoid having to make special accommodations later.
More accessible fonts include:
- Verdana
- Arial
- Helvetica
- Calibri
- Tahoma
Less accessible fonts include:
- any decorative or script font
- “light” font variants
- “narrow” font variants
Some people with dyslexia prefer Comic Sans, a handwritten-printing-style font that is often considered unprofessional. Comic Sans has very distinct letter shapes that some people find easier to read. However, this is not universal. It may be helpful to provide some materials like assignment descriptions in a format where individual students can switch the font if they want, like a Word document.
Do not use font sizes smaller than 12-point in a written document; use larger fonts in slides. Try to avoid excessive use of italics, which may appear lighter and more complex, and thus harder to read.
Headings
Almost all written documents use some kind of visual cue–like a larger or distinctive font, bold, underline, or italics–to set off headings. The function of headings is to enhance organization and navigation, enabling the reader/user to find certain information more quickly. However, for people who use screen-readers, simple text-emphasizing alterations like making certain text bold, underlined, or a larger font size are not apparent. A screen-reader will not distinguish them, giving the user no option but to listen through the entire text in order.
The solution is headings, which provide the document with a structure screen-readers can understand, and typically also generate visual distinctions like increased size. For example, this page uses headings and sub-headings to create the larger, bold section breaks, rather than manually adjusting the text size and weight. That means a screen-reader would tell the user that the various sections exist, allowing them to skip to what they need.
Headings come in different levels. Heading 1 (in HTML, <h1>) is the largest and boldest. They continue through Heading 6, decreasing in level of emphasis. The major headings within your document (other than the title, which is usually the only Heading 1) should use Heading 2, with Heading 3 (and if necessary, Heading 4) for subsections.
In most word processing software, the choice to format some text as a heading is readily apparent. In Google Docs, you will see it in the bar of icons above your document (it will appear as a drop-down menu reading “Paragraph” when you’re writing normal text). In Word, heading options appear in the Home ribbon and in the Styles pane, accessible from the Home ribbon. In Canvas pages, discussions, assignments, etc, the headings menu is similar in appearance to Google Docs. Simply highlight the text you want to turn into a heading, and change it to the heading level you need.
Using headings is quick and makes a huge difference in accessibility!
Alternative Text for Images
Alternative text, or alt-text, is text that replaces an image for a screen-reader user. It is not the same as a caption. The purpose of alt-text is to describe the content of the image, not explain it. For example:
Good basic alt-text for this image might be:
“College campus with brick buildings and a lawn overlooking a lake.”
To interpret the image, it’s not absolutely necessary to know that this is Champlain College. You could include that information in a caption. In some contexts, though, a slightly different description might be useful, especially if captions are not used. Admissions marketing materials might want to emphasize that this is Champlain and also highlight the lake as a local attraction:
“Lawn on the Champlain campus with Lake Champlain in the background.”
Screen-readers do not always accommodate long alt-text, so you need to be as concise as possible (no longer than a 140-character tweet, if at all possible). This can be challenging because alt-text may sometimes need to be more complex if the point of the image is to tell a story. For example, let’s take the root image of the famous “Distracted Boyfriend” meme:
Alt-text for this image could be:
“A man and woman holding hands walk down a street. The man turns to admire a woman walking the other way. The woman with him makes a dismayed face.”
You’ll notice that even though this text is more detailed, it only describes what is absolutely relevant to understanding the picture. In a different context, the alt-text might highlight specific information about the image. If you were writing about the Distracted Boyfriend meme, you would only describe the image once; if describing other variations with overlaid text, you might simply say “Distracted Boyfriend meme with text reading [all displayed text].”
It is tricky to know how much detail is the right amount to include, because what you do not include is also interpretation. In short, when writing alt-text, you should strive to briefly present the most relevant information without over-interpreting, but you should recognize that some interpretation is inevitable and make sure that it is appropriate to the way the image is being used in context.
Infographics and flowcharts are very difficult to describe with alt-text. Always provide any information conveyed in a complex infographic or flowchart, especially if it is an image file, in an alternate text-based form.
Special Considerations for Tables and Graphs
Graphs
Tables and graphs constitute a special issue for accessibility. Graphs can be described with alt-text like images, but frequently they contain so much data the alt-text would be too long. Therefore, it is best to contextualize the graph for everyone with a short summary of the takeaways from the graph in the main text, not the alt-text, and use the alt-text just to describe what the graph covers (e.g. “bar graph showing the upward trend in the percentage of female students at Champlain College over time”). Learn more from this article on image and graph description.
Tables
Tables create confusion for screen-readers about what order to read the contents in, and it may also be more difficult to understand a table via screen-reader even if it’s read correctly.
For documents you create, when possible, try to avoid tables. Many faculty use tables to organize grading breakdowns and course schedules in their syllabi; finding another way to provide this information promotes better accessibility.
In some cases, tables cannot be avoided–for example, data tables in an article. The screen-reader legibility of a table depends on how it is “tagged” (that is, the invisible organizational structure provided for screen-readers). Please see our article on accessible PDFs for more information about tagging for accessibility.
Special Considerations for the Web (including Canvas)
All of the above also applies to documents created on the web, including web pages and anything created in Canvas (assignments, discussions, quizzes, pages, etc). Some additional points:
- Avoid table layouts for web pages whenever possible; they interfere with the flow of a page for screen-readers
- Headings are especially important
- Choose multimedia that is accessible, such as captioned videos and audio with transcripts
- Make sure that link text clearly indicates where the link goes (i.e., avoid “click here”; learn more from Yale University’s guide to accessible linking)
Tools are available for checking the accessibility of any web page and any item in Canvas. For web pages, use WAVE, the Web Accessibility Evaluation Tool. In Canvas, use the Accessibility Checker in the editing view of any item. In the new Rich Content Editor, you will find it to the lower right of the content box, represented by a small icon of a person in a circle. More tools for checking your entire Canvas course at once may debut soon.
About The Author
