Quick Tips and Best Practices
When creating any digital content, always keep these main tips in mind from the start to ensure your content meets accessibility regulations. For more in-depth information, complete the required training modules and visit U-M’s Digital Accessibility website.
When selecting text and background, choose a dark text on light background, or light text on dark background. Neutral colors, including dark grays and off-whites, are good choices and can be less harsh than white on black.
Avoid text and background that are both strong colors, such as a bright blue and bright yellow. These color combinations usually have low contrast between them because neither is very dark or light.
Use WebAIM Color Contrast Checker to see if the color contrast you are using is accessible. UM-Ann Arbor lists more advanced tools and resources.
All headings have a level, 1 through 6.
Heading level 1 (h1) is used for the main title on a page or document. Most webpages or documents should only have one h1. An exception would be a longer document, where each chapter title can be an h1.
Heading Hierarchy
Heading levels 2 through 6 (h2 - h6) are used for sections and subsections, to create hierarchical structure in the page or document. Heading levels are nested sequentially and should not “skip” levels. For example, a page should not use h2 and h4 without using h3.
Visual Styles
The visual style of headings should reflect their relative level so users can visually determine the relationship between headings and sections.
However, don’t just make text big or bold and consider it a heading! Make sure to use styles or code to assign heading levels.
Similarly, don’t use headings just to make text bigger. A pull-out quote should not be a heading.
Every image needs to have alt-text. Good alt text is accurate, short, contextual, and not repetitive.
- Accurate
- Correctly describes the content or purpose of the image
- Short
- Not longer than it needs to be
- A few words to a few sentences, usually limited to 150 characters
- Contextual
- Communicates the purpose of the image in context
- When writing alt text ask yourself, Why is this here? Not just, What does this show?
- Not repetitive
- Does not begin with “image of,” because assistive technology already identifies the image as an image
- Can describe format or genre, such as “photograph of students lounging near Diag,” “pencil drawing of students at a table studying”
- Does not repeat description provided in the caption or surrounding text
- Does not begin with “image of,” because assistive technology already identifies the image as an image
More complex images, such as graphs, cartoons, chemical elements, etc., require more detailed descriptions. Please see the Diagram Center Image Description Guidelines for assistance.
Accessible link text is short, descriptive, understandable, and unique:
- Short: Just a few words, no more than 5 if possible
- Descriptive: Describes where it goes or what it does, so a user knows what will happen in advance
- Understandable: Text that is readable for humans, not a long URL string
- Unique: Not the same as other link text on the same page or document, unless it goes to the same place
Avoid phrases that are meaningless out of context such as “more,” “click here,” or “this article.” These links are confusing to people who are visually scanning content, or browsing content by links only with assistive technologies including screen readers.
Example
- Correct:
- To learn more about digital accessibility, visit the UM-Dearborn Digital Accessibility website.
- Incorrect:
- To Visit the UM-Dearborn Digital Accessibility website, click here.
- You can find some great accessibility resources on the UM-Dearborn Digital Accessibility website.
- To visit the UM-Dearborn’s Digital Accessibility website, go to umdearborn.edu/digital-accessibility.
Only use tables to present tabular data, not to create a visual layout. Use CSS or styling options to handle layout.
Make your tables simple in design (avoid multiple levels of headings or complicated merged cells if possible). Use several simple tables, rather than one complicated table.
Make sure table structure is provided with tags in the code. These tags communicate the table structure to users navigating with assistive technology. This includes:
- Row and column headers are identified as headers
- Headers indicate if they apply to a row or a column
- Table has a caption that explains the purpose of the table
Videos require quality captions to provide equitable access for people who rely on captions. Quality captions are:
- Accurate: Captions should correctly represent audio information without errors in wording, spelling, or punctuation.
- Consistent: Understandable and predictable captions, with consistent language and visual presentation, are easier to use.
- Complete: Captions must include all the meaningful information in the audio, from the beginning to end. They should not summarize, censor, or change the original content, unless necessary to make them readable (for example, to make the text fit on the screen). This includes:
- Speaker identifications
- Non-speech information (such as laughter, applause, music, and more)
- Usable: Captions must be readable for the people who need them. This means that captions are:
- displayed with enough time to be read completely
- in sync with the audio
- not blocked by (and not blocking) the visual content, including text on screen
UM-Dearborn’s Video Policy has more details about the captioning process and resources.