Accessibility
Designing for accessibility
As leaders in our industry, we set an example as good digital stewards. We encourage everyone to apply principles of accessible design whenever possible by ensuring that all designs meets WCAG AA minimum standards prior to web publication.
New page designs should undergo an accessibility scan using an approved scanning tool prior to hand-off. Please see our resources below for some examples.
Color
Do
Ensure sufficient color contrast between text (or other elements) and the background.
Check your color contrast using the WebAIM Contrast Checker.
Don't
Use color alone to convey information.
Use large amounts of extremely bright colors, which can be overwhelming for some users.
Organization
- Design in accordance with content hierarchy.
- Use proximity and white space to make content relationships easily understandable.
- Set up your file in a linear fashion (top to bottom and left to right).
Tagging
- Use header tags to designate H1 – H6, body text, ordered/unordered lists, and artifact/null.
Links
Do
Use descriptive links.
Ensure the transition between a link’s source and destination is intuitive (e.g., the name of a link should match the title of the destination page or document).
If a link opens a different program than the web browser, include a note of the program that will be opened.
Don't
Use nondescript link text such as “learn more” or “click here.”
Use link text that does not match the title of the destination.
Alt text
Do
Use alt text for images, graphs, illustrations, and other visuals.
Separately number and caption figures and tables in long documents.
Don't
Start alt text with “image of … ” or similar phrases.
Add alt text redundant to information already present in the main text or captions.
Types of images and alt text
There are four main types of images: informational, complex, functional, and decorative. Each of these requires a different type of alt text. For a more information, read the W3C Images Tutorial.
| Image type | Description | Alt text |
| Informative | Images that accompany written content | Standard alt text (up to 120 characters) describes the visual content. |
| Complex | Images that require more than standard alt text (120 characters) to be sufficiently described | Complex images need two alt texts:
|
| Functional | Images that are part of interactions, i.e., the Fannie Mae icon linking to the Fannie Mae homepage | Standard alt text (up to 120 characters) describes the interaction. |
| Decorative | Images that do not add to the understanding of the content. | Alt text should not be used. |
Reading order
- When possible, set reading order so that documents are navigable using the keyboard for users who are unable to use a mouse.
Video and animation
Do
Caption videos. When possible, provide a video transcript as well.
Provide alt text for informative animations.
Make sure primary audio messaging is clearer and louder than background audio (if there is any present).
Don't
Use animations (such as strobing), which can trigger motion sensitivities.
Make sudden, dramatic volume changes.
Resources
For more information on accessible design, visit: