Overview

This page will cover the basics of accessible design. These lessons apply to multiple formats (docs, webpages, PPT, etc.), so keep them in mind as you move forward.

You have a choice as to how to engage with the material in this lesson. Remember, the key concepts are always addressed in the text. If you need more info or learn by watching, the videos and resources are great supplements.

Read About It
Watch a Demo / Video
Explore Resources on the Web

Read: Real Text, Headings, Alt-text, Color, Oh My!

Use Programs Correctly

Inaccessible content is often the result of people not knowing how to use tools to format their content. If you are manually creating section titles that are visually distinct, adding in footnotes without using the footnote tool, creating columns by using the tab key rather than the column tool, then you are creating inaccessible content. Microsoft Office (and many other programs), when used correctly, will create accessible materials - and, will help you avoid the wasted when trying to manually format content.

Real Text

What is real text and why does it matter?

When creating content, it's important that you avoid using images of text. Images of text cannot be (easily) modified or read by assistive technologies like text to speech or screen readers. If you have text housed within an image (like a screenshot or a banner with text that's converted to a jpg or png file), then the text is essentially unreadable by assistive technology.

Real text is searchable. This allows users to use search functions like Ctrl + F to locate specific terms and find what they need quickly. Additionally, searchable text means that search engines can scan the document/page and determine if the content is relevant to the terms the user typed in. This can help ensure your document/page is easier to find for those using search terms to find it.

Real text can be modified by assistive technology. This is important for users who may need to increase the size of the font or contrast in order to see better. This can also help folks who are dyslexic and may want to change the font type to one that's easier for them to read. People often fear making documents editable without realizing that allowing people to make modifications may help ensure that they receive the valuable information contained within the document.

How do you know if you're working with real text?

To check if the text is "real" or not, try to select the text with your cursor. If you're unable to highlight/select it then it is not real text, and therefore not accessible for all users.

Sample document showing a few lines of highlighted text to show that it can be selected to indicate that it is real text

How do make scanned PDFs accessible, or at least readable?

Scanned PDFs are essentially photographs of text. To make them readable and searchable, you need to use an OCR (Optical Character Recognition) tool to convert the document to text if you do not have the original source document. If the quality of the scan is poor, the conversion may not be very accurate. Adobe Acrobat is one program that will allow you to OCR a PDF. (A link to the how-to guide is provided in the Explore section.)

If the conversion is not accurate you may need to learn more about using Adobe Acrobat to make additional edits and modifications to the text or read order. In the worst case scenario, you may need to retype the document.

What about my logo or banner?

In cases where you have very little text contained within an image you can use alt text to convey the information. We'll talk more about alt text shortly.

Headings

If you only have time to do one thing to make your content accessible, use headings! Headings are the labels given to each section of your doc/webpage; they give your document structure. Often, people use a bold or larger font to indicate section titles. A screen reader, however, does not differentiate between text that is bold or larger. By using headings, a person using a screen reader can jump from section to section rather than read through all of the text to find what they need.

Headings are used in a hierarchical manner. Anything formatted as Heading 3 should be a sub-section to what has been labeled as Heading 2. Headings are nested under other headings; you should never jump from Heading 1 to Heading 4 without using Headings 2 and 3.

Example: This page. The page title is coded for Heading 1 (Canvas does that automatically). The Overview box, Read..., Watch..., etc. banners are all coded as Heading 2. My section titles (Headings, Alt Text, etc.) are Heading 3.

Note: This will save you time. If you want to change the look of your doc, you can simply change the "style" and the font, color, size, etc. will automatically change for each heading based on your settings.

Example Word doc with headings noted

Alt Text for Images

The next thing to do, for anything you create with images, is to add alt text. Alt text (alternative text) is a textual description of the image. The description should be specific to the context in which the image is being displayed - think about what information is being conveyed in the picture that the student needs to know. For more info on writing good alt text, visit the WebAIM website on Alt Text.

For decorative images that you want a screen reader to ignore, you will want to add null alt text. NOTE: This is done differently depending on whether or not you are using an Office product or adding an image on the web and usually just involves putting a blank space or empty quotations in the alt text field - signifying for the screen reader to jump over the image.

Complex Images

When it comes to complex graphics and charts, some of the guidance depends on the type of image presented.

In general, you should practice the following:

Identify the instructional merit of an image. What is the main point?
Keep the explanation of an image brief. How would you describe its purpose in a sentence?
Focus on the data or information, and not the actual appearance of the image.
Articulate the point of the image clearly. Would your explanation help the learner to understand the point of the image?
Ensure that your explanation is usable by all. How would you explain the image, if you need to do so to someone over the phone? This helps a sighted person perhaps better understand the experience of a non-sighted individual listening to alt text.
It is often more accessible to provide a well-formatted data table rather than narrative alt text in cases where you're using a pie chart and/or bar chart. Use captions on tables for identification.
For graphics that illustrate processes (e.g. flow charts), these can often be presented in a nested list format instead of or in addition to the image.
If the information conveyed in the image/graphic is already represented in the text, then a brief alt text description is all that's needed. For example, the alt text could read "flow chart representing the process of the scientific method".

For complex images such as diagrams, graphs, maps, mathematical expressions, etc., the resource, Image Description Guidelines by the created by the DIAGRAM Content Working Group, a Benetech Global Literacy initiative, provides guidelines developed initially in 2004 and updated in 2014.

Another great resource for complex images is The Accessible Image Sample Book, is a free online resource that shows examples of many options for creating accessible versions of digital images.

Document Language

Screen readers are often able to read multiple languages. To ensure your document is read correctly, be sure to set the appropriate language in the document, or HTML settings. Review Identifying Language of a Document and its Parts for info on how to do this in HTML, Canvas, and PDF. In Word, you can change the document language under the Tools ribbon (the default is typically US English).

Lists

When you create lists, use the bulleted or numbered list formatting tool. This will allow a screen reader to identify the number of items in a list.

screen shot of MS word formatting menu with arrow pointing to bulleted and numbered lists

Font Type & Size

Try to use a simple font in a good size- no smaller than 11pt for printed materials.

Avoid fancy or cursive fonts as these can be difficult to read.

Avoid using too many fonts and typing long phrases or sentences in ALL CAPS.

Use of Color

Do not use color alone to convey meaning. If someone is colorblind, blind, or has low vision, the emphasis you're trying to create by using color may be lost. Symbols or marks should be used as an additional cue, supported by clear instructions. Also, if there is not enough contrast between the background and foreground, content may be difficult to read.

Color contrast is measured as a ratio of brightness to darkness, the brightness of a color against the darkness of the color it appears on top of. Current web accessibility guidelines (WCAG 2.1 Contrast) specify different contrast ratios depending on the size and weight of the font text:

3:1 for normal text less than 14 points
4.5:1 for 14-point bold or 18-point non-bold text (large text)

If you’re not sure whether your background and foreground colors have adequate contrast, you can compare the two colors using a color accessibility checker. An easy way to check color contrast is by using a checker you can install that check web content and local files such as the Colour Contrast Analyser by the Paciello Group. It is available for Win PCs and MacOS.

Table 1 shows some good and bad examples of color contrast and color combinations using black, orange, green, white and UW purple. Some color combinations are bad because of contrast and/or possible color combinations that may affect someone with color blindness or low vision.

Table 1 - Color Combination Examples
Bad Examples	Good Examples
Red on black is bad	Yellow on black is good
Blue on orange is bad	Black on orange is ok
Red on green is bad	White on green is good
Grey on purple is bad	Aqua on purple is ok
UW Gold on white is bad	Dark grey or black on white is very good
Light or medium grey on UW purple is bad	White on UW purple is very good

To learn more about color accessibility, go to the WebAIM Contrast and Color Accessibility resource.

Descriptive Hyperlinks

When you are providing a link to something, do not just paste in the URL. Imagine listening to a screen reader read that off. Talk about cognitive overload!

Also, avoid using "Here" or "Click here" as that does not give the user a description of where they will be taken. Screen readers first announce that there is a link, then read the visible link information.

Instead, use descriptive hyperlinks. Listen for yourself how these links are announced by screen readers:

Non-Descriptive Text in Link

Donald Tapscott, in his paper ''Growing Up Digital," http://www.ncsu.edu/meridian/jan98/feat_6/digital.html says these students...

Descriptive Text in Link

Donald Tapscott, in his paper ''Growing Up Digital," says these students....

Demos: Courtesy of University of Central Florida, Nancy Swenson and John Raible

Tables

Only use tables if you absolutely have to. Do not use tables to make your page look pretty/organized - use them to organize data. When creating a table, be sure to indicate the heading row - this helps a screen reader to read the data in a meaningful way and not as a string of numbers or words. We'll go over the how-to in the following lesson.

Use of Space

Often, people will use the tab key or space bar to indent items. Additionally, many people will add extra blank lines between sections of a document or page in order to distinguish between sections. For a student with a screen reader, they may believe they've reached the end of a document if they encounter multiple blanks spaces. Try to limit the use of blank spaces and use formatting tools to create spaces before or after your line breaks or section headings.

screenshot of MS Word line spacing dropdown menu

Watch: Tips for Accessible Content in Any Format

Importance of Creating Accessible Documents (11:36)

This video produced by the DO-IT Center at the University of Washington, Seattle campus, talks about the importance of creating accessible documents so they can be used by everyone, including people with disabilities.

Explore: Guidelines for Multiple Applications

Convert Scanned PDFs with Adobe Acrobat - a short how-to guide for converting scanned documents to real text using OCR.
WebAIM - Alternative Text - This is a fabulous site for best practices when writing alt text.
Book Recommendation (links to Amazon): Making Online Teaching Accessible: Inclusive Course Design for Students with Disabilities - This book is useful for anyone, not just online instructors. The lessons and instructions are clear and easy to follow. Feel free to swing by my cube on the 3rd floor to take a peek at it.
Demonstration of Colour Contrast Analyser v.3 - This video from a Sr. Media Developer/Sr. Instructional Designer at Cleveland State University, provides an in-depth tutorial that demonstrates the use of this tool as well as some additional contextual information on recommended color contrast values and formats to meet Web Content Accessibility Guidelines, browser Developer Tools, creating a Style Guide document, and other areas of importance related to accessible color contrast.