Accessibility guides

Studying together in the park

The University of Missouri “strives to assure that no qualified person with a disability shall, solely by reason of the disability, be denied access to, participation in, or the benefits of any program or activity operated by UM.” This explicitly includes online programs and activities.

A title card image that reads Why digital accessibility matters in yellow and white letters
Video Url

Accessibility is for everyone. Although there are legal mandates requiring us to make educational materials accessible (e.g., the Americans with Disabilities Act and Section 508 of the Rehabilitation Act), accessibility is essentially just good design.

Accessibility Checklist

This quick Accessibility Checklist is meant to help faculty increase the accessibility of their course materials through using centrally supported learning technologies in a practical way.

The checklist provides basic steps for faculty to improve the learning experience for students with disabilities in particular, and all students in general.

Accessibility
Guides

These accessibility guides have been developed by Missouri Online to assist instructors who are creating accessible content in their courses. These guides are not all-encompassing, but are rather intended as resources for the most common accessibility issues for each of the following areas.

Important:

For tool-specific accessibility options, please visit Teaching Tools for more information.

 

Color contrast

Why should I be concerned about color contrast?

Contrast and color use are vital to accessibility. Students, including those with visual disabilities, must be able to perceive content on the page. Accessible color contrast helps students to easily focus on the content rather than the distraction of color. It also allows those without a color printer to print off documents and still understand important areas. This content can be easily moved from different document file types and computers without losing highlighted portions.

Best practices

Contrast Ratio: The measured perceived difference of two colors. The minimum contrast ratio suggested is 4.5:1, which means, the contrast of words on the page (smaller than 18-point font) should have a ratio of at least 4.5:1. Large text is easier to read (text that is 18 point and larger, or 14 point and larger if it is bold), so the minimal contrast ratio is 3:1.

Color alone should not indicate important content or instructions. You can use color to reinforce information, as long as color is not the only way this status is presented (for example, using red shaded cells in a table indicating late assignments, alongside a column with the text “missing” as a submission status).

Excel

Why should I make my Excel documents accessible?

Designing Excel spreadsheets with accessibility in mind helps blind and visually impaired users access the data more easily.

Best practices

Include alt text with visuals by utilizing the Accessibility Checker.

Ensure hyperlink text is descriptive by using the full title of the page it links to instead of “Click Here” or the URL link.

Give Sheet tabs unique names so screen readers can navigate through and make it easier to understand the contents of the workbook.

Use simple table structure with header information to prevent screen readers from getting lost in a table, with nested, split or merged cells.

Images

Why should I make my images accessible?

Creating alternative text for images on websites and documents is beneficial for a variety of student populations, not just the visually impaired.

This text can be read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities. It also provides semantic meaning and descriptions of images, which can be read by search engines or be used to later determine the content of the image from page context alone.

Characteristics of accessible images / graphics

Picture Images: The alt text should be a description conveying the essential information presented by the image.

Icons have alt text that designates them as decorative. Should supplement text, and should be simple and easy to understand.

Illustrations (images with text) are sometimes presented within an image. If the image is not a logo, it is best to avoid text in images. However, if images of text are used, the text alternative should contain the same words as in the image. Complex images such as graphs and diagrams should provide a full-text equivalent of the data or information provided in the image as the text alternative.

Math

How can I make sure my math content is accessible?

Equation intensive content in online courses is challenging because some tools that create the content cannot be read by screen readers. Using these tools and tips will help ensure accessibility of your course material.

Best practices

Avoid creating images of graphs, equations and tables. If an image must be used, it should have alt text AND a description box explaining what the image consists of. It should be communicated in a standard language such as MathSpeak, which aims to integrate mathematical and scientific content into structures for print-disabled readers.

Avoid creating multiple links to accessible documents. All accessible materials should be in line with the content for ease of use. If that’s not possible, there should be accessible pages created (in Canvas) that correlate to the lesson.

LaTeX or MathType can export in Math Markup Language (MathML), which is accessible to screen readers. Once equation content is created using LaTeX or MathType (either in documents such as lecture notes and assignments) or on PowerPoint slides, the follow-up is to also produce/output the equation content into MathML format to be archived with the course production materials.

PDFs

Why should I make my PDFs accessible?

Accessibility features make it easy for people with disabilities to access content using assistive devices (screen magnifiers and readers, speech recognition software, text-to-speech software, alternative input devices, and Braille displays). An accessible PDF benefits all users by making content readable and more easily navigated.

Characteristics of an accessible PDF

Searchable text: Assistive technology software relies on text that can be searched and edited. Scanned, graphical representations of text must be converted to searchable text using optical character recognition (OCR).

Labeled form fields with tab order: Interactive PDF forms should have a preset tab order that allows users to tab logically from one field to the next. Fields should contain accessible labels and be designed to prevent errors.

Navigational aids: Bookmarks linked to document headings allow users to jump to different sections without having to read the entire document. All links should be accessible through both mouse and keyboard.

Proper document structure tags: Document structure tags define the reading order of a document and help screen readers present content to users in a logical way. They also make it easier to resize and reflow a document for different-sized viewports. Document structure tags include headings, paragraphs, sections, tables, lists and other page elements.

Alt text and tooltips: Alt text and tooltips help provide meaningful descriptions of non-text elements such as images and multimedia.

Proper use of color: Color alone should not be relied on to convey meaning, and color combinations should have sufficient contrast.

Document accessibility should begin in the native document format — i.e., Word, InDesign, or another application — before the document is exported as a PDF.

 

The following can be done in native document applications to support accessibility:

  • Adding alt text for images
  • Defining structural headings, lists and tables
  • Setting document properties like titles

Platforms, browsers, hardware & Canvas

Why should I be concerned about platforms or hardware?

Not every student will have access to the same tools and instruments. Accessibility should also be thought about in terms of income and inequality. Courses should be built so that students can receive an equal course experience no matter what device they are using to access it.

Increasingly, students are moving to mobile devices as they become more affordable. But mobile access is not equal and can vary greatly depending on factors like income, location and availability.

Best practices

Think about the potential audience. How will they access this information? Will they have access to high-speed Wi-Fi? This could determine the amount of graphics, videos, or other interactivity used in the course.

Laptops / Desktops vs. Mobile Devices: Courses that are built for laptops/desktops aren’t always made with mobile users in mind. Avoid using non-responsive tools and designs.

Make sure your design is mobile responsive. And avoid anything that cannot quickly and effectively load on a smartphone.

Avoid linking to anything that requires special software to view — it could be costly or might not run on a smartphone.

Canvas vs. Canvas App: The user experience varies greatly depending on how the user is accessing it. If a course is made to be experienced with a browser (accessing Canvas), or if a course is made to be used with the Canvas App, it’s best to provide that information to students.

Not all browsers are the same. Currently, Safari browsers will not load embedded images or graphics within Canvas courses unless the user changes their privacy settings. Google Chrome is the most popular browser, but it’s not the only one. It’s best to communicate to students which browser is best to access their course.

PowerPoint

Why should I make my PowerPoints accessible?

Making your PowerPoint slideshows, presentations and handouts accessible helps all users interact with and learn from the content you’ve created. Because PowerPoint has a high visual component, it is important to provide alternative ways of accessing slide content for users who may have visual, auditory, motor or cognitive disabilities.

Best practices

Choose a theme/template with good contrast and a simple background. Not all PowerPoint templates are created equal; some have low contrast and busy or patterned backgrounds. When you search for a template by selecting File > New, type “accessible” in the Search field to search for templates that are tagged as accessible by the creator. Microsoft has also tagged some templates as accessible (Accessible PowerPoint Template Sampler).

Stick to slide layouts. Take advantage of placeholder areas when adding titles, lists, images and tables. Descriptive titles on each slide help screen readers navigate the presentation. By default, screen readers read the title first followed by other content defined in the slide layout. To view the reading order and rearrange items, go to Home > Arrange > Selection Pane (the reading order is bottom to top).

Provide alt text for images. To add alt text, right-click on an image and select Edit Alt text. For images that are decorative, leave the field blank and check Mark as decorative.

Identify row and column headers in tables. The Table Tools feature in PowerPoint allows you to specify a Header Row, a First Column, a Last Column, etc. While not all screen readers are able to identify table headings, this step will ensure that any headers are identified when saving to PDF.

Write descriptive link text. Raw URLs might not make sense to screen readers. Provide more descriptive link text so that users know where the link will take them.

Avoid too-small text. Text size can be an issue when using a projector, so make sure your text is large enough to read from a distance.

Keep transitions and animations simple. Complex or automated transitions can be distracting.

Provide alternate ways to access audio/video. For embedded videos, provide closed captioning; for audio, provide a transcript.

Run the accessibility checker. PowerPoint provides a built-in accessibility checker that will identify common issues.

Video & audio

Why should I make audio and video files accessible?

Transcripts, captions and audio descriptions make multimedia such as video and audio accessible to people with vision and hearing impairments and learning disabilities, and to native speakers of different languages.

Best practices

Closed captions: A text-based description of a video’s dialogue including speaker identification and other relevant audio information, (music, sound effects, etc.) that appears usually at the bottom of the screen, and is synchronized with the media.

Automatic Speech Recognition (ASR) are automatic machine generated captions that require human editing to ensure accessibility.

Audio description, caption and transcript accessibility requires time. It is best to hire a professional captioning service to meet ADA requirements.

Transcripts: Written or printed version of material originally presented in another medium. Transcripts allow users to search for specific information or keywords contained in the media.

It is suggested to include a transcript if you have visual elements in your video, for example images or graphs, that need to be explained if there is no voice narration explaining them.

Planning for accessibility: Scripting all spoken content in advance will ensure images are properly described and make the captioning process easier.

Web fonts & writing for the web

Why should I adjust my writing for the web?

Fonts, spacing and organization can have positive or negative effects on the person reading the page.

Accessible fonts

Elaborate fonts may be difficult to read if the characters are not well defined in shape and size. Sans-serif fonts are fonts without small lines at the end of characters. Serif fonts have little decorative lines that some people might find difficult to read. Serif fonts can also create problems in scanned prints as pixelation can distort and cause blurring.

  • Arial (most widely used sans-serif font)
  • Verdana (sans-serif)
  • Calibri (sans-serif)
  • Tahoma (sans-serif)
  • Helvetica (sans-serif)
  • Century Gothic (sans-serif)
  • Times New Roman (most widely used serif font)
  • Georgia (serif)

Web typography

Font family: Use a small number of different font types, only one or two per page.

Font sizes: Recommended minimum font size is 12 point. Use bold to add emphasis rather than UPPERCASE or italics (but sparingly).

Headings: Use headings to make the relationship between content more apparent, and to make the page easier to scan and understand.

Indent style: Separating paragraphs from one to another helps with legibility. Use either a space between paragraphs, or an indentation. It is not necessary to use both.

Text alignment: Alignment of text affects how users will read. Most text, especially long lines of text, should be left aligned because it allows readers to easily jump to the next line. Center alignment is best suited for short lengths of text, or special content like titles and headings. Right alignment is not usually recommended. Justified text creates subtle spacing between words so that each line is the same width. This is not recommended unless in certain situations.

White space: Empty space around the elements of a page including the text and images. This prevents a page from becoming cluttered and difficult to read, and allows the page’s information to come across in a clear and efficient manner.

Word

Why should I make my Word documents accessible?

Blind and visually impaired users rely on screen readers to translate text into recognizable speech and Braille. Following accessibility best practices for your Word docs will ensure that your content has a proper structure to assist screen readers—and will also help ensure that any PDFs created from your Word docs are accessible.

Best practices

Use Heading styles. Headings allow screen readers to navigate Word docs by viewing a listing of all headings on a page and jumping to different heading levels. Headings also help users scan to get a feel for a document’s structure and content. Heading hierarchies should always be followed (e.g., a Level 3 head should not contain Level 2 subheads). While it is common to create a visual hierarchy of “pseudo headings” by styling regular text to be larger and bolder, these pseudo headings do not provide the document structure needed by screen readers.

Identify column headers in tables. Properly labeling headers in a table allows screen readers to make associations between data in the table and their related headers. Unfortunately, support for table headers is limited in Word. You can add properties to identify column headers (the first row in a table) but not row headers (headers in the first column in a table).

Provide alt text for images. Alt text can be added to photos, illustrations, shapes, charts and SmartArt in Word docs. Use either the Description field in the Alt Text field or provide information about the content or function of the image in the surrounding text.

Follow best practices for links. Use descriptive text for links, not raw URLs. Keep link text to a minimum, and avoid ambiguous phrases such as “Click here.”

Use list types correctly. Do not use the Tab key to create manual indents. Use ordered lists (1, 2, 3, etc.) for numbered items or those in a sequence, and unordered lists (bullets) for items that are not numbered or part of a sequence.

Run the accessibility checker. Word provides a built-in accessibility checker that will identify common issues.

Americans with Disabilities Act of 1990 (ADA)

You might already know that the Americans with Disabilities Act of 1990 (ADA) requires federal, state and local government agencies to provide equal access to accommodations and facilities. In the physical world, these accommodations include wheelchair ramps, handrails, parking spaces close to building entrances, and so forth.

The ADA also applies to the online world; moreover, Section 508 of the Rehabilitation Act of 1973 specifies that federal agencies must make all electronic information accessible to people with disabilities.

Most studies find that about one fifth (20%) or over 53 million of the population has some kind of disability (CDC Disability and Health Promotion, 2013). Major categories of disabilities types include:

  • Visual impairment (blindness, low vision, color blindness)
  • Deafness and hearing loss (deafness and hard of hearing)
  • Motor impairment (inability to use a mouse, slow response time, limited fine motor control)
  • Cognitive disabilities (learning disabilities, autism, ADHD, Down syndrome, traumatic brain injury, dementia)