Faculty Resources for Digital Accessibility

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. Although Word allows up to nine levels of heading styles (Heading 1-9), please limit yourself to the first six (6). If the document will be converted or copied to a web page or LMS, web services only allow up to six levels of heading (H1-H6). 

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

• Microsoft Word: Apply Styles
• Google Docs: Add a title, heading, or table of contents
• Courses LMS: Rich Text Editor and Accessibility
• WebAIM: Headings
• W3Schools: HTML H1-H6 Tags

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

Unfortunately, we're not all blessed with 20/20 vision. 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.
• Avoid using all uppercase (ALL CAPS).

Additional Resources

• WebAIM: Typefaces and Fonts
• British Dyslexia Foundation: Dyslexia-friendly style guide
• Siteimprove's "How to choose a font for accessibility"
• Google Material Design: Type Classification
• Harvard University: Design for Readability

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.

Additional Resources

• WebAIM: Alternative Text
• Harvard University Accessibility: Write good Alt Text to describe images
• W3C Web Accessibility Initiative: Images Tutorial

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.

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 (24 pixels) 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.

For documents, courses, and websites, please only reference the IMC Web Styling (Web Colors). Do not reference the Official Pepperdine Colors. The "Official Colors" are intended for special designs, not for web accessibility. 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.

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

Pepperdine Color Reference Table

The following table is based on the IMC Web Styling (Web Colors) page. The "Hex Value" is commonly used in web design. The "RGB Value" is commonly used in Microsoft Office; "RGB" stands for "Red, Green, Blue" and the sequence of numbers represents the specific color. "Bkg" stands for "Background."

Table Legend/Notes

In the table above, select results have a parenthetical number. Refer to the information below for each number.

1. Large, bold fonts are recommended.
2. Use discouraged. Technically passes contrast check, but can be challenging to read.

Additional Resources

• Seaver CTE: Color Deficiency Preparedness
• WebAIM: Use of Color (for Meaning)
• WebAIM: Color Contrast (Minimum)
• WebAIM: Color Contrast (Enhanced)
• WebAIM: Color Contrast Checker

Data Sources

• Ackland P, Resnikoff S, Bourne R. World blindness and visual impairment: despite many successes, the problem is growing. Community Eye Health. 2017;30(100):71-73. PMID: 29483748; PMCID: PMC5820628. Available from: https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5820628/.
• MedlinePlus [Internet]. Bethesda (MD): National Library of Medicine (US); [updated 2015 Jan 01]. Color vision deficiency; [updated 2015 Jan 01; cited 2023 May 15]; [about 4 p.]. Available from: https://medlineplus.gov/genetics/condition/color-vision-deficiency/.

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

• WebAIM: Link Text
• Yale Usability and Web Accessibility: Links

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

• University of Colorado, Boulder: Content Accessibility Fundamentals - Lists
• WebAIM: Semantic Structure - Regions, Headings, and Lists
• W3C: Data Tables Tutorial
• WebAIM: Data Tables