Designing Websites for Everyone

Creative Services Lead

Designing Websites for Everyone

Why website accessibility matters

The (sometimes) wonderful World Wide Web has become a standard tool in most of our day-to-day lives. But for those people living with a disability (more than 53 million people in the U.S. alone), navigating the web can be a frustrating, daunting task. With this huge network of educational, governmental and commercial resources available at (most of) our fingertips, wouldn’t it be great if all websites were designed with EVERYONE in mind?

Inclusive Design Benefits a Broad Range of Users

By incorporating some basic accessibility standards into your website design, not only will you open up your site to a wider audience, but you’ll also earn the respect and repeat business from those who can navigate your site without struggling, as well as improve your Google rankings. Sounds good, right?

Let’s begin by understanding that accessibility is not limited to those with visual or hearing disabilities or those with mobility impairments who are unable to use a mouse, but also includes the learning disabled, those without the ability to speak the native language (English in this case) or those who might be younger than the average visitor. It can even include low bandwidth users, those with ‘screen glare’ issues, low literacy levels, and even noisy surroundings.

Inclusive Design should not assume anything. The purpose of your website should be clear, meaningful and straightforward. The design should have the flexibility for a diverse range of users to have options of how they will access the information with equally valuable results.

Below are a few tips that will improve the user experience for those with disabilities and encourage return visits to your website:

Consistency is Key

A best practice for the user experience includes consistency, which is even more important when helping a visitor with a disability navigate your website. Features that are repeated on your website should remain consistent: the main navigation menu should always be in the same place, use the same link style and color, and be mindful of shape uniformity for buttons. A consistent presentation of your design elements will help those people with visual impairments or learning disabilities find the features more easily.

Simplify It

Don’t be ambiguous. Your website should add value with features of minimal complexity. Use as little design as possible in order to accomplish an effortless user experience.

Adjust for Contrast

Background images can be nice for those with perfect vision, but for someone with low vision or color blindness it can make reading the information difficult, if not impossible. Contrast is key when selecting your background, text and link colors. Once you’ve decided on a color palette, test your color contrast using a helpful tool such as the one available from Jonathan Snook. You should also test the contrast by changing your resolution settings in varying degrees (16-bit and 24-bit) so you can see what your site will look like for those using older monitors.

Some sites even take contrast a step further by providing a High Contrast Mode, which once activated will change the contrast of the site and remove ‘decorative’ elements. Making this tool available is extremely useful for those with visual impairments to more easily read the information. A great example of this is the University of Mary Washington’s website.

Be Clear

Simplicity also includes the way the information is written; make sure your intended purpose is clear. Users with cognitive or learning disabilities will benefit from the use of a logical heading structure and well-written content. Organize the content into well-defined chunks of information and use headings, lists and even various stylistic font elements (italics, bold, color…) to highlight important content. Avoid the use of ALL CAPS which makes it more difficult to read. When appropriate, including icons or graphics with text which can also help with content comprehension.

De-clutter your Design

Give your visitors room to maneuver. The use of 'white space' helps the user focus their attention on the important features, such as separating the main navigation from the body, the body text from the side elements and the footer, and the main content from extra ’supplementary' items.  

Describe It

To benefit users with vision impairments, graphic elements should always include text alternatives.

Describe Links: Visitors who use screen readers to navigate a website can adjust their tools to read only the links on a page. Therefore, when you include a link you should anticipate it being used out of context. A simple link entitled ‘click here’ tells the user nothing about where that link will take them. But a link entitled ‘more information about the author’ describes the destination of that link.

Describe Pictures: Most of us know to include ALT text for an image or logo to provide the basic information for those using a screen reader. But if the image provides extensive information (such as a chart or graph), adding a description is very important for those who cannot see it. If the description is especially long, one possibility is to link to another page with the description.

Describe Multimedia: The hearing impaired will benefit from the addition of a caption, audio description, and transcription for audio and/or videos (with audio). The National Center for Accessible Media (NCAM) provides a free tool enabling the addition of captioning your streaming content.

Make a Note

Once you’ve incorporated the basic accessibility standards into your website, you should include a note informing your visitors that you are striving to make your website universally accessible and be open to feedback. Providing a way for them to make suggestions for improvement is a great way to continue to learn about your users and how you can improve your site, allowing everyone a pleasant and meaningful user experience.

Additional Resources:
Building Accessibility into a Website from the Start | Blog Post 
5 Simple Things You Can Do To Make Your Site More Accessible | Blog Post 
Describing Images For Improved Web Accessibility | Blog Post 

comments powered by Disqus