Do accessible websites need to be boring?

The majority of the clients we work with at our design studio in Boston are Higher Education and Non-profit organizations. There has been a general movement to make content on the web more accessible for all audiences. These accessible websites do not need to be boring.For our clients, in particular, it is often critical that their websites are usable for people using assistive technologies, or what is often referred to as accessible. This means they need to be at a minimum WCAG 2.0 AA compliant. These Web Content Accessibility Guidelines (WCAG) describe that websites need to follow four guidelines and need to be:

Perceivable
Operable
Understandable
Robust

Some of these guidelines impact how the website is physically coded. Others refer directly to the design, and as a design agency, are particularly interesting to us. While the guidelines certainly create limitations, we like to see everything as an opportunity. An accessible website does not need to be boring. Here are a few ways you can ensure you can be as creative as you want to:

Color

Use of color on websites is a great tool to make sure your brand is represented appropriately and to make sure your site stands out from your competitors. Accessibility guidelines say that the color contrast ratio for text has to be at least 4.5:1 for regular text and 3:1 for large text. There are several web-based tools you can use to test whether your design passes. We like to use ContrastChecker or WebAim and are often surprised by the results. Here is an example:

‍Doesn't Pass

Passes

So you can see, for most of us the white-on-green is completely visible, but it does not pass. Thankfully, this does not mean you can't use this fun green button for our website. Increasing text font size and bolding it will make the combination fully AA compliant and allow us to creatively use this bold green color.

Images

Our designers often use all different kinds of images and visuals in website designs. Images can be very helpful to communicate a feeling, illustrate a story or a point that the content is trying to make. They can be a challenge for users who are vision impaired. This does not mean that one should not use imagery. Instead:

Make sure proper alt text is used to communicate the content of an image when relevant.
Make sure to create an empty alt tag when the image is decorative only, allowing assistive technologies to skip over them.
Do not have an image be the only source of content, but rather a supplement to the content.

With all your images, do make sure to keep your images web optimized. No more 2MB images, please!

Video

Much has been written about the trend of using video on the web. Creating an accessible website does not limit this trend. You can still make ample use of it, as in this example for the McGovern Institute for Brain Research. Here, video is used to supplement content and as a true design element, which can even be fun. When using video as content, you need to ensure text alternatives (captions or transcripts) are given. When using it as design element to delight and surprise the user, there are a few things to pay attention to:

Allow the user to control the video, by having very clear "play" and/or "pause" buttons that can be accessed via assistive technologies
Shy away from anything that might induce dizziness or vertigo, that auto-plays
Give text alternatives and allow screen readers to skip the content

Typefaces

Our design team uses different typefaces all the time to reiterate the brand for our clients as well as for design elements. We usually use a pairing of serif and sans-serif typefaces, to bring a modern or traditional feeling into the website.Next, consider the x-height of the typeface. More openness, or taller x-height, will make them more readable, especially in smaller sizes.To assist with load times, consider using variable fonts. These allow the different fonts (eg: bold, regular, different sizes) to be consolidated into one file, rather than using a different file for each, therefore helping to make the site easier to load.

Interactivity

Creating an accessible website does not limit using fun interactive elements on the site. When you are creating interactivity, right from the onset, you do however need to think about how this will translate for those users using assistive technologies. Things to keep in mind:

Using keyboard only, can users still interact with the content and get the same information?
How about screenreaders, can they get to the content?
If your interactive element is "for fun" or visual only, can users skip it?