5 website accessibility principles every graphic designer should know
Did you know that one billion people in the world experience some form of disability? It’s time that graphic designers start creating designs for people with all levels of abilities in mind. Failure to do so could cut out a considerable portion of your brand’s target audience and lead to penalties in many jurisdictions. Plus, creating accessible designs is just the right thing to do.
Below, we cover the top five website accessibility principles that every graphic designer should know.
1. Color
The use of color in graphic design helps convey content and distinguish visual elements. Color is a huge piece of your brand identity, but you have to be careful with color choices when creating accessible content.
Using color as the only way to differentiate links or other vital information puts many users at a disadvantage. You’ll want to use additional visual clues such as underlining, boldening, or italicizing words with clickable links or warnings.
The contrast of colors you use plays a huge role in your graphic design’s readability. To meet the highest levels of requirements under the Web Content Accessibility Guidelines (WCAG), you need a contrast ratio of 7 to 1 for standard text and 4.5 to 1 for large text. You can use Web Aim’s contrast checker to ensure your background and foreground colors comply with WCAG standards.
2. Text blocks
When blocks of text include more than one sentence, it’s important to be mindful of the visual presentation. Blocks of text should be no more than 80 characters wide, not be fully justified, and not require horizontal scrolling when the text is doubled in size. The line spacing also needs to be at least half the height of the text, and the paragraph spacing should be at least one and a half times the line spacing.
3. Imagery and alt-text
Images and non-text web content require an alternative attribute. This text is read in place of imagery by screen readers, and is displayed on your web pages when images either don’t load or the user chooses not to view them. You can add the descriptive information in the alternative text section when uploading an image.
Follow these guidelines for creating alt attributes for your images, graphs, animations, and infographics.
- Don’t use phrases such as “graphic of,” “picture of,” or “image of” when using alt text to describe an image.
- Display the same function and content in the alt text as seen in the imagery. Do not add information to the alt text that is not available in the imagery.
- Don’t repeat information that is already in the text of the webpage.
4. Moving, blinking, and scrolling content
Some designs can trigger seizures in photosensitive people if they have certain light and color patterns. For example, flashing lights between the frequency of five to 30 flashes per second (hertz) can act as triggers, as can stripes of contrasting colors. These designs can also cause nausea, headaches, and dizziness in people who don’t have epilepsy.
Besides staying away from these types of colors and patterns, you can make your design more accessible by providing users with an option to stop, pause, or hide content that automatically updates. Manual controls also allow those with cognitive issues to read and understand the information before it automatically updates.
5. Forms and screen readers
Blind and visually impaired users commonly employ a screen reader to access websites, and these screen readers use keyboard strokes and shortcuts to move through web pages. Forms can often confuse a screen reader, and cause the information to be misconstrued by the end-user when trying to navigate and fill out the information on a web page.
Because of this, forms should have the ability to be tabbed through and be tested on different browsers and screen readers for accessibility. Labeling each section and allowing for autocomplete on forms using keyboard strokes is equally essential.
Accessibility in graphic design and beyond
In an anonymous survey, one in five of Wave employees reported having an invisible disability. As a business, we’re committed to accessibility in graphic design and beyond, and we’re proud to have made our workplace even more diverse and inclusive for our employees. Wavers speak 26 languages beyond English, and we’ve added more female employees to the company and in senior roles.
