Provide Structure with Headings
From grade school through college, we learned the importance of outlining our written work. Just as these outlines help us organize our thoughts when we're writing, formal headings help the people reading our work understand the logical order and structure of the content. Plus, headings offer a way for assistive technologies to navigate our content, too.
The Do's
- Do use formal heading options, like "Styles" in Microsoft Word or Google Docs.
- Do structure content to flow in a logical, hierarchical reading order.
- Do write clear, concise headings that quickly introduce the content that will follow.
The Don'ts
- Don't skip heading levels when diving into details (e.g., don't jump from Heading 1 to Heading 4).
- Don't manually format text to mimic a heading; use the formal heading features instead.
- Don't misuse heading styles as a shortcut to format non-heading text (i.e., don't apply a heading to a paragraph just to make the text more visible).
Microsoft Word
In Microsoft Word, you will use the "Styles" feature. Word offers up to nine levels of heading styles (Heading 1-9).
Google Docs
Google Docs also offers "Styles." You have up to six levels of heading styles (Heading 1-6). The six levels in Google Docs align with the six levels available on the web.
Web Editors
In rich text editors, like the Courses LMS (Sakai) rich text editor, you have up to six levels of heading styles (Heading 1-6) often available in drop-down menu, such as "Paragraph Format," "Heading," or similar menu. The six levels of heading in rich text editors align with the six heading tags in HTML code (H1-H6).
Additional Resources
Improve Readability with Fonts and Text Sizes
Fonts can be a lot of fun. They offer a way to express our creativity or personality on the page. However, our goals of making our content more engaging can be thwarted when the text size is too small or the font itself is too busy or difficult to read. To help our sighted readers, please pay attention to the font and font size of your text.
Choosing Fonts
In general, choose sans serif fonts when possible, like Source Sans, Arial, or Helvetica. Limit serif fonts to larger headings, if necessary. Examples of serif fonts include Lora, Times New Roman, or Garamond. Avoid or limit the use of script fonts, such as handwritten styles, cartoonish styles, or over-stylized designs. These script or display fonts, while intriguing, can be challenging to read.
Choosing Font Sizes
We're not all blessed with 20/20 vision, unfortunately. To make your text content readable, be sure to use an appropriate font size. Although there isn't currently a minimum font size specification, the general practice is to avoid sizes below 12-point, with a preference for 12-16 points (or 16-22 pixels) for standard text. Headings should be larger, such as 18-point or more (24+ pixels), with sizes varying by heading level to show the level of importance. You may review Pepperdine's Website Typography for examples.
The Do's
- Do choose clean-looking fonts, preferably sans serif.
- Do set text to reasonable reading sizes.
- Do set headings larger than the body text and proportionate to the hierarchy or level of information.
The Don'ts
- Don't clutter a page with too many fonts (try to limit yourself to two typefaces if possible).
- Don't choose busy, complex, or hard-to-read fonts.
- Don't set heading sizes too close to body text sizes.
Additional Resources
Provide Alternative (ALT) Text Descriptions for Images
Inserting images on a webpage, syllabus, or other document can draw attention and engage sighted viewers. However, without adding descriptions of your images, you are leaving the audience members who rely on screen readers or have visual impairments without a way to understand the context and purpose of the image. Serve all of your audience members by providing alternative text descriptions (ALT text) for your images or visual content.
In general, avoid using images to convey critical, textual information. For example, don't place important event details in an image. Instead, use an image to enhance the content but place the text details on the page or document directly. A good rule of thumb is if you are considering placing more than a few words in an image, please rethink your approach. While a good image should "show, not tell," we must help our students or peers who can't view the picture or media. If you must use images that contain information or data, whether as an illustrative example or for design aesthetics, always provide alternative (ALT) text to describe at least the purpose or intent of the image, if not the precise content of the image itself.
The Do's
- Do enter alternative or ALT text descriptions for your images, graphs, or charts.
- Do keep ALT text brief and descriptive.
- Do emphasize the purpose of the image in the context presented.
The Don'ts
- Don't use phrases like "image of" or "picture of" as screen readers will announce the object as an image.
- Don't use abbreviations, shorthand, or "insider knowledge" which may be unfamiliar to or confuse your audience.
- Don't repeat the same information already present on the page
- Don't use images to convey text content or data.
Did You Know?
- Approximately 6 million Americans have vision loss, and 1 million have blindness (CDC)
- Visual impairment includes more than blindness. Many users can benefit from image descriptions or may use screen readers and assistive technologies.
- Class content must be accessible to all users, not just students. Think about co-instructors, teaching assistants, and support personnel, too.
- Image "ALT" descriptions will also appear on the page if an image link is dead or temporarily unavailable.
Additional Resources
Color and its Impact on Comprehension
Color, like imagery, can have a powerful impact on those who can see or process it. It loses its power when it can't be seen or understood, however.
Don't Rely on Color to Convey Meaning
In society, we often use color to convey meanings, such as green can mean "go" or "good," and red can mean "stop" or "incorrect." However, what if someone cannot see the color that you intend, cannot distinguish between select colors, or cannot see at all? Estimates suggest that 1 in 12 men (8%) or 1 in 200 women (0.5%) are colorblind. It is also estimated that 1 in 200 people globally are blind (0.5%) and 1 in 33 people globally (3%) have moderate to severe vision impairment. Data suggests that 55% of visually impaired people are women. If you rely heavily on color alone to convey meaning, then there's a good chance that someone in your class will not receive your intended message.
To address this issue, combine the use of color with labels or icons to communicate your intent clearly.
Example Rubric Table with Assessment Colors, Labels, and Icons
| Criterion |
Assessment |
| Spelling and Grammar |
Good |
| Structure |
Needs Improvement |
| Sources |
Poor |
For charts and graphs, consider whether alternating patterns (e.g., stripes, dots, etc.) in conjunction with colors can help distinguish each element (instead of relying on colors alone).
Provide Adequate Color Contrast
It is critical to be sure that the colors of the text and the background provide adequate color contrast to be seen clearly. Color contrast measures the brightness difference in the colors as a ratio. The closer the ratio (e.g. 2:1), the closer the colors are in brightness, hue, or color. An example of a 2:1 contrast is white text on a light gray background, offering very low or poor contrast. On the other side, the greater the ratio (e.g. 21:1), the greater the difference in the colors (good or high contrast). Black text on a white background has a 21:1 contrast ratio which is a high or good contrast ratio.
WCAG 2.1 Success Criterion 1.4.3 Level AA requires a minimum contrast of 4.5:1 for normal text and 3:1 for large text. Large text in this context would be 18 points or larger. This is the bare minimum, and the standards may change over time. Therefore, we recommend that you strive for WCAG 2.1 Success Criterion 1.4.3 Level AAA for the enhanced color contrast of 7:1 for normal text and 4.5:1 for large text.
Please be careful when using Official Pepperdine Colors. For example, do not place text with the official Pepperdine Blue on a background of the official Pepperdine Orange. The two dark colors will fail color contrast checks in most cases. Reference the IMC Web Styling page for more web color options.
The Do's
- Combine colors with labels and/or icons or patterns to express intent or convey meaning
- Use good color contrast (e.g., dark text on a light background or light text on a dark background)
- Verify good color contrast with a contrast checker
The Don'ts
- Don't rely on or assume that colors will convey meaning by themselves
- Don't place dark text on a dark background or light text on a light background
Additional Resources
Data Sources
Meaningful Links
When you create content, you will likely link (aka hyperlink) to websites, documents, images, videos, or other resources. When you create links, don't just copy and paste the direct web address or URL on the page, in the document, or in an email message. Instead, use a formal "Insert Link" feature of the software, web editor, or email application. Within an "Add or Insert Link" tool, you will provide the web address and give the link a meaningful title, preferably the title of the resource or destination of the link. The link name should clearly explain what the content is and/or where it may take the learner.
The Do's
- Use the formal process to add or insert a link
- Give the link a short, meaningful name or title that explains what the link will contain or where it will take the person
- Provide alternative text and titles on links placed on images
The Don'ts
- Don't place links on generic text labels like "click here," "learn more," "this website," or other non-descriptive or ambiguous terms
- Avoid placing links on an entire sentence; don't place links on multiple sentences or paragraphs
- Avoid copying/pasting raw web addresses on a page or in a message (brand or short links can be exceptions)
- Don't rely on the context of the sentence or paragraph to explain the purpose or destination of the link
- Don't repeat the same link label multiple times on the same page (especially if the links go to different destinations, e.g. "Register Now" or "Learn More")
Additional Resources
Make Your Data Accessible
Lists
Lists can help people process information in a quick, easy format. Lists involve a collection of related items, whether ordered (numbered in a specific sequence) or unordered (bulleted). Examples of an ordered list can include the cooking steps of a recipe or the series of turns in driving instructions. Examples of an unordered list can be a shopping list or important items to pack for a summer vacation.
When creating lists in your documents, class sites, or other applications, always use the formal list features in the software. These tools will often feature a button or menu item to create or insert a numbered list or bulleted list. By using these formal features, you will help users of assistive technologies know that the content involves a structured list (e.g., "List with 10 items"). Assistive technologies will also help them keep track of their progress by introducing each item (e.g., "List Item 3 of 10").
The Do's (Lists)
- Preface lists with clear headings or introductions to provide context
- Use the formal list features in word processors, web editors, and email applications (i.e., bullet lists or numbered lists)
- Be consistent in tense, formatting, punctuation, and/or structure
- Consider using lists in lieu of complex data tables
The Don'ts (Lists)
- Don't use manual formatting or manual numbering/bullets to mimic a formal list
- Don't use list features for non-lists, such as using a list feature just to indent a paragraph
Tables
Tables can help people process complex sets of data in a logical manner.
The Do's (Tables)
- Specify the headers and scope of each header in your table design
- Use table captions to provide a title for the data table
- Simplify data table structure as much as possible
- Avoid empty headers and cells
The Don'ts (Tables)
- Don't use tables to lay out your content (use tables for data only)
- Don't use manual formatting to mimic formal data table headers
Additional Resources
