Accessibility
Accessibility is not optional. As a public institution, the University of Michigan must comply with the accessibility standards set by WCAG 2.0 (Web Content Accessibility Guidelines). But making content accessible is also an essential part of our culture at U-M, and our commitment to diversity, equity, and inclusion.
Accessible Design Is for Everyone
“Accessibility” is the inclusive practice of presenting information in a way that people with disabilities can engage equitably. That’s a large slice of the population: According to Census Bureau data, nearly 30 percent of people in the United States and about one in six worldwide have a disability.
Ensuring accessibility is not just a matter of legal compliance—accessible design improves people’s quality of life.
When designing for any of our channels, we must consider the potential accessibility issues users will have:
- Visual
- Example: Color Blindness
- Motor/Mobility
- Example: Wheelchair-User Concerns
- Auditory
- Example: Hearing Difficulties
- Seizures
- Example: Especially Photosensitive Epilepsy
- Learning
- Example: Dyslexia
How It Affects Our Work
Many of the changes to the U-M brand guidelines introduced in 2021 are based on accessibility needs and ADA compliance. Colors and fonts are not simply aesthetic decisions; they are important to usability. In this era of new communications trends and platforms, we must be mindful of accessibility across a wide range of media.
U-M color specifications were modified to improve color contrast, especially for headlines and text. This change makes print and online materials more legible. Brand fonts were also updated. The Freight typeface family, known for readability, is now the core font.
There Are Two Important Implications
Don’t Tinker
Designers should not modify brand colors, web components, templates, etc. Both brand consistency and accessibility depend on using the materials as provided.
Clean House
Discard old logos and templates, and update presentations and publications to be consistent with brand guidelines and to meet or surpass accessibility standards.
Sections
- Introduction
- Accessibility
- Typography
- Color
- Logos
- Style Guide
Accessibility Quick Tips
Media
If the images are integral to your content, describe them using alternative text. Caption and transcribe all videos, so blind and deaf users are able to use your media.
Structure
Provide structure to the document with headings. All users will benefit from visual and logical structure, but it’s crucial for assistive tech.
Tables
Give the table structure: Provide headings for your columns; add a table caption and summary. All users will benefit from these best practices.
Legibility
Legibility refers to the degree to which letters can be recognized from specific letterforms.
Contrast
There should be a 70% difference in color value between background and text.
Links
Create your links with concise, unique, and descriptive text. Users of assistive technology rely on this to navigate documents.
Color and Contrast
Provide high color contrast between background and foreground. Make sure that color is not the only source of information or emphasis. Users with some visual impairments will not perceive the difference.
Lists
Create a list as a list, instead of lines. Avoid using tabs or indents for spacing, users of assistive technology will benefit from this logical structure.
![alt-text student with face mask and protective eyewear in a lab looking into a microscope](https://live-rack-rackham-cms.pantheonsite.io/wp-content/uploads/2021/03/alt-text.jpg)
Alt Text Example
“Student with face mask and protective eyewear in a lab looking into a microscope”
![rackham-brand-mockup-inline-images student with face mask and protective eyewear in a lab looking into a microscope](https://live-rack-rackham-cms.pantheonsite.io/wp-content/uploads/2021/03/rackham-brand-mockup-inline-images.png)
Legibility
Legibility refers to the degree to which letters can be recognized from specific letterforms.
![rackham-brand-mockup-inline-images2 student with face mask and protective eyewear in a lab looking into a microscope](https://live-rack-rackham-cms.pantheonsite.io/wp-content/uploads/2021/03/rackham-brand-mockup-inline-images2.png)
Contrast
There should be a 70% difference in color value between background and text.
Fonts
Legibility
Use a sans serif font for the main body of text whenever possible, since such fonts are more readable. Simple serif fonts can be used, but dramatic thicks and thins and exaggerated serifs are hard to read. Fonts with large x-heights are easier to read.
Use at least 12-point type for body copy when possible. If you have to use 10-point type, make sure it has a large xheight. Footnotes and photo credits should be no smaller than 8-point. Set leading at least 20–25% greater than the font size. Extra leading helps readers maintain their place and move smoothly through content. Roman fonts are preferred. Avoid italics and all caps. Be sure underlining does not connect with the bases of letters.
Avoid Hyphenation
Simplicity
Avoid using too many different fonts on one page.
Set type flush-left/ragged-right, since using justified text can decrease readability. Optimum line length is 8 to 12 words (approximately 60 characters).
Contrast
In general, use dark foreground text on a light background, and vice versa. There should be a 70% difference in color value between background and text.
Color screens behind black type should be no darker than 20%.
Design
Readability
Bright white paper can produce excessive glare. Choose a dull-finish, smooth paper heavy enough to prevent showthrough if your piece is two-sided.
Limit decorative fonts and type-on-path text elements. Make sure any words treated decoratively are repeated within the main body of text.
Try to avoid placing text blocks over photographs, illustrations or other graphics. It can be difficult to ensure enough contrast against non-solid backgrounds.
Simplicity
If folds are necessary, they should be simple and intuitive.
Keep the organization of content straightforward. Use headings to break up copy and enhance readability and comprehension. Make sure headings are descriptive of the text that follows them.
Ensure paragraphs have consistent letter spacing and word spacing. Set type flush-left/ragged-right; justified text can decrease readability. Optimum line length is 8 to 12 words (approximately 60 characters).
Avoid visual clutter and maximize white space. People with low vision and those with cognitive disabilities benefit from ample white space.
Know your audience. Write for them, not for the experts.
In General
- Keep the message short and simple.
- Use short sentences, paragraphs, and sections.
- Avoid complex words and sentences. It’s better to avoid acronyms entirely, but if that’s not possible, define and/or spell them out at least once in the content, generally at the first mention.
- Steer clear of “internal speak” and confusing jargon. Use words your audience will understand and relate to.
- Shorten and clarify complex material.
- Add white space. People with low vision and those with cognitive disabilities benefit from ample white space.