Accessibility is initiated at the design stage. To design for accessibility means to be inclusive to the needs of your users. Inclusive design ensures that digital materials address the needs of the widest possible audience, irrespective of age or ability.
Importance of Your Role
Understanding the needs of users with disabilities is the key to designing better and more accessible experiences for them. One of the biggest challenges when designing for accessibility is knowing what specific needs to design for.
Color plays a powerful role in identifying a brand, conveying emotions, feelings, and ideas yet the power of color is lost when a user can’t see them or perceive them differently. Color blindness affects roughly 1 in 200 women and 1 in 12 men.
It's also the job of the designer to understand the meaning of images and know if the image is just for decoration, conveys meaning, or contains text.
Additionally, font style plays an important role in text readability.
Key areas to consider when creating digital designs for accessibility include:
- Color and contrast
- Font size
Clients and designers occupy different design worlds, making communication challenging. The establishment of a common language between the client and the designer is vital for communicating successfully. The client and the designer must both drive the need for inclusivity.
Color and Contrast
Because a colors power or meaning can get lost you should always add a non-color identifier such as icons or text descriptions to help distinguish between colors.
- Avoid oversaturated colors and high contrasting colors, typically those on the autism spectrum.
- Meet a minimum contrast ratio of 4.5:1 of the foreground color to the background color.
Things to consider:
- If the color was removed from the design, what meaning would be lost?
- How could I provide meaning without using color?
- Does the foreground and background color of all text, icons, and focus indicators meet contrast ratio guidelines of 4.5:1?
Translate information about the image to alt text so screen reader users can be informed of the meaning of the image.
Things to consider:
- Does any image contain information that would be lost if it was not viewable?
- How could I provide the information in a non-visual way?
- Does the image have an alt text description?
Larger text, shorter line lengths, taller line heights, and increased letter spacing can help all users have a better reading experience.
- Avoid decorative or cursive font styles.
- Avoid small font sizes, italicized text, and all uppercase text.
Tools and Methods
Below is a list of resources to help with designing for accessibility: