Many think that creating an accessible site means making concessions in design or branding. Despite the challenges of developing accessible sites, you can have your cake and eat it too. Keep reading to see how to incorporate a brand's aesthetic into an accessible design.
Approaching Accessible Design
The first step in building an accessible website is understanding limitations when it comes to color, contrast, font and more. Although there are strict guidelines for some things, like text contrast ratios, many elements don't have to meet accessibility standards. For this article, we will be referencing the WCGA 2 AA accessibility standards. This is the level of compliance we recommend for almost all organizations.
What Needs To Be Accessible?
The general rule is anything required for website functionality needs to be accessible. When you consider each component on it's own you should be able to place it into one of two categories:
required for functionality, or
NOT required for functionality.
Common Design Elements Exempt From Accessibility Include:
Background elements used for decoration
Abstract photos or design element not intended to be content
While some elements are exempt from accessibility standards, your website should still be as accessible as possible. If your brand uses icons that don't have to be accessible, it's still valuable for those with impaired vision to see them.
Common Design Elements That Must Be Accessibility Include:
All navigational elements
All buttons, links, and actionable elements
All illustrations and photos important to the understanding of content
All forms and individual form elements
All section separators, headings and text content
Adapting Your Existing Branding
We recommend you bake accessibility into your brand guide and instruct designers on how to implement brand elements. If you have an older brand guide that doesn't mention accessibility, you can adapt the brand elements.
ArcStone's own brand guide features a page on accessibility and colors.
design & color considerations
It's unlikely that all your brand colors have enough contrast to be accessible in every situation. An often problematic use of brand colors is using brand-colored text over black or white. If your text and background color combination don't meet the minimum ratio of 4.5:1 you'll either need to increase the text size or change the color.
A common strategy is to place darker colors next to brand colors. Or, make sure the background is dark enough to provide enough contrast.
If your color pallet is low contrast and doesn't meet the requirements, add some bold colors and leverage brand colors as accents.
The two most important things to remember when it comes to colors and accessibility is to
limit the number of unique colors used, and
never use color alone to indicate important information, such as navigation items.
Fonts, buttons & calls to action
In general, most organizations use accessible fonts. The most common situations where fonts gets flagged are when it's in cursive, too small, or has imposter characters. Imposter characters are letters or numbers that look too alike, such as 1 looking like a lower case L.
The most important things to remember are to maintain contrast ratios, not using fonts with imposter characters, and keeping all text left justified.
I often get asked what the best colors are for buttons, links and calls to action. There isn't a "best" color. The most important aspect is that they are bold and consistent. Stick to the same colors for most clickable elements to maintain consistency. This will help users with varying eyesight understand your website's UX.
How To Handle Common Design Accessibility Issues
Although accessibility can be complex, we often see the same issues over and over again. In this section I'm going to cover the most common issues we run across and how to avoid them.
Avoiding UX Accessibility Issues
How users interact with your website, or the "user experience (UX)," is critical. Even if all elements are accessible, it can all fall apart when it comes to users actually using the site.
Common UX Design Accessibility Issues To Avoid:
Don't rely on hover states. Many users won't be using a mouse or software that can distinguish between pointer states.
Don't use color alone to determine the functionality of page elements
Don't leave out white space and section indicators. A crammed design often has accessibility issues.
Make sure to label all form fields.
Make sure all clickable elements have coding in place to identify their functionality.
Handling Image Heavy Designs
Many modern websites rely on large images and blending content with multimedia. This can be problematic when images convey the page's meaning or text is overlaid on images.
For multimedia that contain critical content, include closed captions, transcripts, or companion text. If your design includes text on top of photos, place a background under the text to maintain the contrast ratio.
Also, keep in mind that even if your text is overlaid on an image with enough contrast, accessibility tools will still flag it. These tools can't calculate the contrast unless there's a solid background under the text.
Designing For Different Viewports
Another critical step is testing your design in different viewport sizes. Different devices have a variety of viewport sizes and visual rendering features. Most modern websites are responsive and work well on mobile devices. But, each time the viewport changes, it can impact accessibility.
Make sure to account for accessibility at these different viewports sizes. One of the most popular ways for visually-impaired people to browse the web is with mobile devices from Apple and Google. These devices have excellent accessibility features, but they only work on well-designed websites.
Good Accessibility = Good Design
At first, designers may feel constricted by accessibility requirements. But, most learn to lean into the tenants of accessible design.
Accessible design is understandable, consistent, clear, and functional to the widest audience possible. These are the same qualities of any good design.