Designing an Accessible Site Without Losing Your MindPosted on 18
In this guest article Chad Swaney* walks us through some techniques and guidelines on how to make your website more accessible. It is a good change to see something more technical here on Just Creative Design so enjoy.
One of the biggest mistakes I see from web designers is making accessibility more complicated than it actually is. Most designers think of creating accessible content as something that will take weeks of exaggerated tagging, designing tab-browsing and hot keys for every minute function of a site, and writing over-descriptive metadata, so most people just give up and don’t even bother. However, by using some simple techniques and following some basic guidelines, you can make your website accessible to a wide audience of users without spending too much time and energy.
I define web accessibility as:
Making web content available to a wide audience regardless of physical abilities, web clients, and personal preferences.
To simplify our tasks as accessible web designers, there a few specific categories that can be helpful as we evaluate some of the different types of users:
- Visually Impaired: Those with low or no vision. These users may use screenreading software or may use the browser’s functionality to increase text size and contrast.
- Hearing Impaired: Those with low or no hearing. These users will need to be able to see a textual representation of any audio that is part of the site.
- Physically Impaired: Those who lack the physical dexterity to use a mouse or a traditional keyboard. These users may use a variety of interface devices, many of which parallel the functionality of the traditional [TAB] key.
- Alternative Web Client Users: Those who may be using a mobile device, tablet PC, specialty browser (such as a retail point-of-sale device), or gaming console. The dimensions and orientation of the browsing window on these devices may be unconventional
- Technologically Limited: Those who may have low bandwidth or low network reliability, such as users in remote locations or in developing countries. These users may turn off the presentation layer to have better access to content.
To design an accessible site, one of the most important things you can do is to separate content from presentation. Remember, people are visiting your site for the content. By separating the presentation from the content, you are giving your users the ability to use whatever client is appropriate to access your content, whether it is a screenreader, mobile device, or tablet PC.
The content layer is the heart of designing an accessible web site. The content layer, which consists of everything between the
<body> tags should only contain information that you want to directly communicate to the audience, such as text and images. Other than setting out the order in which the information is displayed, the content layer should not include any information about what the page should look like—that information belongs in the presentation layer.
Structure. The content layer should be structured according to the meaning of the html tags that you use. If you are already familiar with semantic code, this should be easy. If you’re not, you should check out Roger Johansson’s article on semantic HTML.
- The title of the page should be contained in an
<h1>tag, indicating that it is the highest-level heading on the page.
- The site’s navigation should be contained in a
<ul>tag, as it is an unordered list of items.
- Whenever possible, avoid using an
<iframe>. Inline frames tend to confuse screenreading software and wreak havoc when trying to navigate a page with the [TAB] key.
- No formatting
<table>tags should be used.
<table>tags should only be used to identify tabular data, such as a financial balance sheet.
- Don’t go crazy with
<div>tags. Unfortunately, as people have stopped using
<table>tags, they seem to just be replacing them with
<div>s. When a
<div>does not represent a new content grouping, it is not being used correctly.
Images. Principles of semantic design tell us that non-content images, such as the infamous
spacer.gif, should not be included. Images should be metatagged using
<alt> to indicate their purpose to a user who cannot view images; unfortunately, some hyperconscientious designers will add
<alt> tags that are so detailed that they become useless, such as:
<alt="a small group of people including a blonde woman with short hair, a man with dark hair, a woman with long dark hair, and a man with brown, long hair all on a light blue background">
Remember that the information you include in an
<alt> tag will likely be read out loud by a screenreader, so a concise description, such as
<alt="Team Photo"> is best.
Fixed Dimensions. Users may have an unusually-sized screen, or may choose to increase the text size in their browser. When you establish fixed heights for elements, it is likely that your design will break when your user tries to increase the text size. Avoid fixed dimensions whenever possible.
Color and Contrast. Make sure that your color selections allow text to stand out from the background so that people with low vision can read your content easily.
Once you have worked on the accessibility of your content and presentation layers, it’s time to take a look at how your site might be presented to your customers who are looking it through any number of non-traditional means. The best quick accessibility check I have seen is the MIT Web accessibility guidelines 5 minute quick check for accessibility. It includes the following steps:
- Turn off images in your browser (make sure image place holders are turned on)
- Tab through the page, try navigating without a mouse
- Try to change the standard font colors and styles in your browser
- Try to increase the font size by using the browser (view > text size > increase)
- Turn off support for stylesheets
If your site still makes sense after taking these steps, then you have an accessible site that can reach a very wide audience of users, and hopefully you will still have enough time left over to enjoy an icy cold beverage and read the Gaming section of Digg.
Here are some of the resources referenced in this article, and others that have great information about accessible web design:
- The W3C Web Accessibility Initiative
- Plain Old Semantic HTML from 456 Berea Street
- Graceful Degradation & Progressive Enhancement
- MIT Web Accessibility Guidelines
- IBM Web Accessibility Checklist
- Legal information about the U.S. accessibility case NFB v. Target
*About the author: Chad Swaney specialises in aesthetically pleasing, accessible, standards-compliant design that generates measurable performance improvement for learners. His specific areas of research and interest include: usability, accessibility, cognitive load theory, and learner-generated content.
- Free Hand-Picked Resources for Designers and Developers – September Edition (3)
- Top Responsive Design Tools + Win Templates! (19)
- Future of Web Design & Future of Web Apps Conferences (3)
- The Typographer’s Dream Bundle – 33 Pro Fonts for 99% Off (1)
- Tips for Crafting the Perfect Social Media Post (2)