Universal Design Guide
[Author: Bill Fischer]
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.
Print Media Categories
- Art Prints
- Digital documents should be equally accessible for a phone, tablet, or desktop computer.
- The quality of experience should be equal 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 right on your laptop or desktop using the Responsive Design Checker
- Note: over half of all page views on the internet are from mobile devices.
Both Google Docs and MS Word docs can be opened and viewed on all devices when opened from Google Drive.
If you are using other software or on-line storage, be sure to check readability and formatting from the software and drive you are using.
- Use large fonts
- Keep contrast high
- Employ easy to understand fonts
- 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.
- If the document is going to be distributed digitally, on-line as well as in print; include both a live link and the full url.
- 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 on-line knowledge resource: The Digital Learning Center (kcaddlc.org).
- A bad example: Click here to visit our on-line knowledge resource: The Digital Learning Center.
- Employ a hierarchical layout using titles, headers and sub-headers.
- Avoid using tables. They do not wrap in a way that makes them compatible with mobile devices.
- Keep text horizontally oriented.
- Employ a visual hierarchy that guides the viewer through the layout in order of informational relevance. Reference this DLC guide for examples.
- 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 on a 3g connection in 9 seconds or less when your document is tested on Google's mobile speed tester.
- Employ a visual hierarchy that guides the viewer through the image in order of informational relevance. Reference this DLC guide for examples.
- Images should be high contrast to ensure sight impaired persons can understand them. Reference the imaging guidelines in this site.
- 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
- 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. Guidelines from Webaim.
- Purely decorative images, like those sometimes used as backgrounds in page headers, do not need alt tags.
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 "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 fonts. (Serifs don't do much)
- What are the most readable font types and typesetting methods (They are not what you thought)
Here are two pieces of research regarding fonts for Dyslectic persons: