Designing an Accessible Site Without Losing Your Mind

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.

Content Layer

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.

Team PhotoImages. 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.

Presentation Layer

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.

Dynamic Content. There are a lot of great JavaScript-powered, AJAX-style, dynamic techniques that can be used to make your site have a visually appealing, and functionally-useful presentation. When including these elements, always keep an eye on what happens when a user who does not have Javascript enabled tries to access the content or function. For some great techniques in this area, I highly recommend Tommy Olsson’s article on Graceful Degradation & Progressive Enhancement.

Usability Testing

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:

  1. Turn off images in your browser (make sure image place holders are turned on)
  2. Turn off support for JavaScript
  3. Tab through the page, try navigating without a mouse
  4. Try to change the standard font colors and styles in your browser
  5. Try to increase the font size by using the browser (view > text size > increase)
  6. Turn off support for stylesheets


Comments are closed.