Skip to main content
Pepperdine | Community

Faculty Resources for Digital Accessibility

Universal Design for Digital Accessibility addresses multiple needs such as visual, physical, auditory, and cognitive needs. We invite you to learn more below.  

Overview

While this page is intended for the faculty and academic support staff of Pepperdine University, we welcome everyone to learn about making information more accessible.

What is Digital Accessibility?

Digital accessibility happens when a person can easily navigate and understand the content of a website, application, electronic document, or media file. Put another way, something is digitally accessible when people can access and use digital content and tools through various devices like computers, mobiles, or assistive technologies.

Why is Accessibility Important?

As an academic institution, we have moral and legal obligations to make our content accessible to our community members. Not only is it federal law, but morally, it's the right thing to do. Accessibility also aligns directly with our University's mission to strengthen lives for purpose, service, and leadership.

Who Benefits from Accessibility?

Everyone! Digital accessibility helps a wide range of individuals, including those who may have hearing, movement, sight, or cognitive needs. Beyond that, accessible content makes information and resources more universally available for all people.

Who is Responsible?

We are all responsible. As the professor of a class, all of the content that you create for, require of, or share with students must be accessible. Refer to Pepperdine University's accessibility policy.


 

Core Elements of Creating Accessible Content

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

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

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 (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 of Pepperdine University Colors and Contrast Check Outcomes
Color Name Hex Value RGB Value Color on White Bkg White on Color Bkg Black on Color Bkg
Pepperdine Blue #00205c rgb(128,161,182) Pass Pass Fail
Pepperdine Orange #c25700 rgb(194,87,0) Pass (1) Pass (1) Pass (2)
Pepperdine Mid Blue #003988 rgb(0,57,136) Pass Pass Fail
Pepperdine Ocean Blue #005289 rgb(0,82,137) Pass Pass Fail
Pepperdine Alt Blue #0078b0 rgb(0,120,176) Pass Pass Fail
Pepperdine Sky Blue #55BCEB rgb(85,188,235) Fail Fail Pass
Fog #c2dbe8 rgb(194,219,232) Fail Fail Pass
Stone #80a1b6 rgb(128,161,182) Fail Fail Pass (1)
Mountain #5c6f7b rgb(92,111,123) Pass (1) Pass (1) Fail
Dark Gray #6f6f6f rgb(111,111,111) Pass (2) Pass (1) Fail
Dark Gray 1 #575b5d rgb(87,91,93) Pass (1) Pass (1) Fail
Dark Gray 2 #434244 rgb(67,66,68) Pass Pass Fail
Pepperdine Black #162732 rgb(22,39,50) Pass Pass Fail
Pepperdine Text Black #231f20 rgb(35,31,32) Pass Pass Fail
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

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

Instructor Resources

Document icon for a syllabus.

Is your syllabus accessible?

Are you using headings, tables, and images properly in your course syllabus document? Learn how to create or check your Word or PDF syllabus for accessibility.

Film strip icon for video file.

Are your videos accessible?

Do you have captions and a transcript of your videos? Do the outside videos you select meet accessibility requirements? 

Website logo for LMS class site.

Are your class sites accessible?

Learn how to use the built-in accessibility checker within the rich text editor of your Courses LMS class site to fix common HTML or image issues.

Microsoft Word document icon.

Are your Microsoft Office docs accessible?

Learn the fundamentals of making your Microsoft Office Word, PowerPoint, and Excel documents accessible.

PDF document icon.

Are your PDF files accessible?

Check your PDFs for accessibility issues with the Adobe Acrobat Pro accessibility checker.

Google logo.

Are your Google Docs accessible?

Learn how to make your Google Workspace documents (Docs, Slides, or Sheets) accessible.

 

Additional Training