Designing an Accessible Site Without Losing Your Mind

Designing an Accessible Site Without Losing Your Mind

Just Creative is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission at no extra cost to you. As an Amazon Associate we earn from qualifying purchases. Learn more

Scream

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.

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.

sponsored message


  • 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.

sponsored message


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

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.

Other Resources

Here are some of the resources referenced in this article, and others that have great information about accessible web design:

*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.

32 thoughts on “Designing an Accessible Site Without Losing Your Mind”

  1. Thanks for the feedback. @Niyaz I totally agree about Flash content. While Flash plays an important role in video/multimedia presentation on a page, it should never be used as part of the navigation, for example.

  2. Chad,
    Great article on accessibility.
    I would like to add two more points:
    (1) Avoid using flash content as much as possible
    (2) Use only image formats supported by most of the devices.

  3. Pingback: Diseñar un sitio web accesible fácilmente — Tablosign
  4. Some great points tips & solutions, nice one!

    liams last blog post..Creative Domain Names: Some Clever Alternative Methods

  5. Chad,

    Great article. Alt tags, in particular, are very underused, for such an easy improvement.

    Accessibility on the web is about simple, clean design, which means taking the steps you suggest will make a site more user-friendly for anyone, not just for folks with an impairment.

    Jacob,

    This article is a great addition to JCD. Good call!

    Regards,

    Kelly

    Kellys last blog post..Dreaming BIG when you still feel small

  6. Pingback: Designing an Accessible Site Without Losing Your Mind | WhiteSandsDigital.com
  7. @David You are right. Jacob and I talked about the slight irony in that he has a couple things he could potentially correct on JCD….I think he is planning to when he is back from holiday

  8. Pingback: El diseño accesible no es tan complicado | Isopixel
  9. @ponie325 Good to hear you are using tags. Just remember that the user’s screenreader is likely to say every word out loud, so make sure your tags are concise.

  10. Great advice! Very clearly communicated.

    It was such a revelation for me when I was redesigning my site and saw the XHTML rendered without CSS. It still looked perfectly understandable because the divs, paragraphs, headings and lists all had good separation in their default styles. Yay for semantic markup!

  11. Pingback: links for 2008-08-03 [delicious.com] | SmileHappy
  12. For controlling checkpoint #4, I’d recommend switching to “high contrast” in Your OS (this option is available at least in Windows, no idea about the rest). This is especially effective when You want to control that Your background-property is set where Your color-property is, otherwise You will notice it fast.

    This is probably picked up by a validator, but testing Your webpage this way gives You a very real feeling of being disabled with only messing with one setting.

  13. I particularly like your comment about tables not being used for formatting and you are correct that too many just replace them with many, many div elements.

  14. Pingback: Web Accessibility » Non-Institutional Perspective: Accessible Web Design
  15. Jacob,

    I have been curious about the branding process for a long time and you might be able to answer some of my questions. In branding process, the order of things should be 1) have a plan to create a brand 2) design a logo 3)design the website and other ways to communicate with the audience. Is this order correct? or how else could it be? If the order is correct, is it sequential or simultaneous?

  16. 301 Moved Permanently Hiya! I just want to give an enormous thumbs up for the nice info you could have right here on this post. I shall be coming back to your blog for more soon. Regards, Outdoor Furniture Manufacturers

  17. I apologize, the website I have listed is only temporary and practice.
    Loved the article! It really isn’t that difficult, you are right. I appreciate your putting things in simple terms with great suggestions. I am working on a website about accessibility and web design and would love to link to this article. Permission possible? Laura

  18. Pingback: Consejos de Diseño Web | Marketing Digital
  19. Pingback: How accessible is the Internet?
  20. That’s just funny. I’ve heard that the alt attribute description should be short for avoiding Google’s penalties, but then I observed your description and come to my mind the idea that it’s for blind people, it should not be short and also serves for SEO purposes…

    My mistake (shame on me). Anyway… Thanks for the tips!

Comments are closed.

[Cyber Monday Deals LIVE!]
[Cyber Monday Deals LIVE!]