Accessible Design Principles, Part I
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: Headings, Alt-text, Tables, Oh My!
Use Real Text
When creating content, it's important that you avoid using images of text. Scanned PDFs are photographs of text. Screenshots of colorful posters created in Publisher will not include real text. While the text may appear visually on the screen/document, it cannot be accessed or altered by users who may need to use assistive technology. If you must use an image of text (like a college logo), make sure the text is included in the alt text (covered later in this lesson).
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.
Headings
Headings are the labels given to each section title of your doc/webpage; they give your document structure. Often, people use a bold or larger font to indicate section titles (which allows sighted users to scan the document for the section they need). Assistive technology, however, does not allow the user to navigate based on whether the text is bold or larger. By using headings, a person using assistive tech can jump from section to section rather than read through all of the text to find what they need.
Without headings, a document is essentially one long stream of text that forces the user to navigate through from the start, rather than jump to what they need (image if you could only navigate a webpage by using the right and left arrow keys).
| Visual Formatting | User Experience |
|---|---|
| Sections are visually distinct due to spaces, bold text, but headings are not used. | Visual formatting is stripped away leaving one long stream of text. |
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.
Learn More:
Alt Text for Images
Alt text (alternative text) is a textual description of an 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
Links to an external site..
For decorative images that serve no purpose other than to you want a screen reader to ignore, you will want to mark the image as decorative instead of adding alt text.
Tables
Tables should only be used to organize data, never for layout. When using a table, you want to be sure to provide a caption and to define the top row and/or first column as headers. This ensures that the data in the table is connected to the labels in the row/column. We'll cover this in detail in later lessons.
Often time people use tables when they should be using columns. Tables are read left to right, top to bottom. This makes them very difficult to navigate if the table is used as more of a layout tool. Grade scales often fall victim to this practice:
| A+ | 95 - 100% | C - | 80% |
| A | 92 - 94% | D+ | 77 - 79% |
| A- | 90 - 93% | D | 74 - 76% |
Audio of table: A+ 95 - 100%, C-, 80%, A, 92 - 94%, D+, 77 - 79%, A-, 90 - 93%, D, 74 - 76%...
If trying to navigate by row, the user would likely assume the grade scale stops at C since the remaining values are housed within rows that begin with higher letter grades.
There are many other formatting tools that can be used to control/improve the layout of a page/document that we will discuss on the next page.
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 wasting time when trying to manually format content.
Watch: Tips for Creating Accessible Content
MS Office: Ease of Use (3 mins)
This video provides a great overview of some very simple ways you can ensure content created in MS Office is easy to read for everyone.
General Tips - Ease of Use
Links to an external site.
Accessibility: Getting Started (5 mins)
On the web, accessibility is typically defined as making web content usable for people with disabilities. This is the definition we'll focus on, however, there are broader considerations to be made.
Explore: Guidelines & Advice for Multiple Applications
- Headings Links to an external site. from AccessibleU, Univ of Minnesota - A very good discussion about the importance of headings in documents and webpages. While it references Moodle (a different LMS than what we use), the rest of the information is relevant.
- 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.