Accessible Design Principles
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: 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.
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.
Alt Text for Images
The next thing to do, for anything you create with images, is to add alt text. Alt text short for alternative text is a textual description of the image.
Screen readers and other assistive technology cannot interpret images. A few that try, use Artificial Intelligence (AI), but it is still not good enough to offer an accurate description. Alt text should describe the specific meaning of the image in the context in which it is being displayed - think about what information is being conveyed in the picture that the user needs to know. For more info on writing good alt text, visit the WebAIM website on Alt Text
Links to an external site..
For decorative images that you want a screen reader to ignore, you need to mark them as decorative by checking a box (Microsoft 365, Canvas, etc.), add null alt text by entering two double quotes ("") for alt text in HTML, or write the work 'decorative' in the field for Google Docs, Slides, and Sheets.
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 Links to an external site. by the created by the DIAGRAM Content Working Group Links to an external site., a Benetech Global Literacy Links to an external site. initiative, provides guidelines.
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 Links to an external site. 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.
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 Links to an external site.) 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 Links to an external site. 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.
| 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 Links to an external site. 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 Links to an external site. 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,
Links to an external site. Nancy Swenson and John Raible
Tables
Use tables for data. Try not to use tables to make your page look pretty/organized. When creating a table, be sure to indicate the heading row and/or column –so a screen reader can read the data in a meaningful way, add a caption, and avoid complex tables as much as possible –those which include merged cells.
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.
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 Links to an external site., 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 Links to an external site.- a short how-to guide for converting scanned documents to real text using OCR.
- WebAIM - Alternative Text Links to an external site. - 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 Links to an external site.- 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 Links to an external site. - 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 Links to an external site., browser Developer Tools, creating a Style Guide document, and other areas of importance related to accessible color contrast.