Back To Universal Design Guide Menu

Documents

[Author: Bill Fischer]

Overview

Many of the same principles that are applied to Digital Media should also be applied to printed and digitally distributed documents. Keep in mind that print media is at a disadvantage because it cannot utilize the digital accessibility tools that many impaired people have come to rely on. This guide focuses on digital documents that are made accessible online or can be distributed digitally by other means.

Attainability

Device Agnosticism

Digital documents should be equally accessible and of equal quality for a phone, tablet, or desktop computer.
To ensure consistency, a single version of the media should be able to respond or adapt to any device size.
While developing your document, check it on multiple device sizes, including:
- desktop computers
- laptops
- tablets
- smart phones
Note: over half of all page views on the internet are from mobile devices.

Software

Both Google Docs and MS Word docs can be opened and viewed on all devices when opened from Google Drive. They respond to various screen sizes by word wrapping the text and scaling the images If you are using other software or on-line storage, be sure to check readability and formatting on all of the devices listed in this section.

Fonts

Use fonts that are compatible with both Windows, MAC, iOS, and Chrome. These include:

Arial
Brush Script
Calibri
Garamond
Courier New
Georgia
Helvetica
Impact
Times New Roman
Trebuchet
Verdana

Responsiveness

Text

Use large fonts
Contrast should meet the following WCAG contrast requirements:
- 7:1 Minimum
- 16:1 maximum
- The WebAIM color contrast checker (external link) allows designers to check compliance of text, graphical object and background colors to the WCAG AA and AAA standards that have been adopted by the ADA. (free)
Integrate generous margins and line spacing
Don't use all upper case type setting. Screen readers will read that text one letter at a time. However setting text to a TT style will make the text appear all caps, even though it is not. TT style text will work well with screen readers.

Links

Link text should make sense out of context and it should be obvious where the link will take a user. Users of screen readers will often search the content of the site for links.
Don't use 'Click Here' or 'More Information' for your link text. Instead, make the text more descriptive.
- A good example: Visit our online knowledge resource: The Digital Learning Center (external link).
- A bad example: Click here to visit our on-line knowledge resource: The Digital Learning Center.

Layout

Employ a hierarchical layout using titles, headers and sub-headers. This is the primary method sight impaired and blind persons navigate websites and online documents.
Avoid using tables for layout purposes They do not wrap in a way that makes them very compatible with mobile devices without sideways scrolling.
If you do use tables, it is critical to include headers both horizontally and vertically as needed.

Images

Image pixel dimensions should be approximately the same size that they will appear in the document and be saved as jpeg with compression set between medium and high. This will ensure fast access over slower internet connections. The content should be rendered in 9 seconds or less when your document is tested on Google's mobile speed tester (external link).
Images should be high contrast to ensure sight impaired persons can understand them.
Descriptive alt tags should be included for all images in digital documents. They need to succinctly describe the image. If the image serves as a link, it should include the link destination.
- An example of a bad tag: figure 2
- An example of a good tag: cartoon of a drowning fish
- An example of a tag with a link destination: fish icon - fishing guide button
If an image contains complex information that is critical to understanding the content, a "long description" tag should be used. Wordpress has this capability built into it.
Icons should always include text with them.
Image captions (when used) should always be located directly below the image and work in tandem with (but not be redundant to) the image alt tag to describe the content and meaning of the image.
Do not use large rapidly animating images that can cause epileptic seizures (no more than 3 blinks per second... or between 2 and 25 hz). Also, avoid overlaid complimentary colors or stripes that may scintillate. Strobing guidelines from Webaim (External link).
Purely decorative images, like those sometimes used as backgrounds in page headers, do not need alt tags. Instead this can be entered into the alt tag text box: ""

Cognitive Load

Fonts, Typesetting and Dyslectic Engagement

There has been a fair number of claims that certain fonts are better for persons with dyslexia. The claims assume that the disorder is primarily centered in anomalies in the brain's ability to process imagery. However, this is oversimplified.

According to the International Dyslexia Association (external link) "Developmental dyslexia is associated with difficulty in processing the orthography (the written form) and phonology (the sound structure) of language."

Every person's dyslexia is different and typically involves much more that just visual acuity. Fonts that claim they are better for dyslexics are unproven. That being said, an easy to read font is better for everyone. But font design advice is largely based on lore as opposed to research. More work needs to be performed in this area.

Here is some research on font readability

Serifs versus San Serif font (external link). (Serifs don't do much)
What are the most readable font types and typesetting methods (external links) (They are not what you thought)

Here are two pieces of research regarding fonts for Dyslectic persons:

Case Study

A Google Doc Example

This white paper Google Doc Example (external link) integrates the following accessibility components that are favored by persons using screen readers.

Organization using titles, headings, and subheadings used in chronological order.
Generous use of numbered and bulleted lists.
Large font sizes that can be changed with common, native, accessibility controls.
Image alt tags
Generous margins
Minimal indentation to optimize mobile phone readability.

Google Sites

Report abuse