A Designer's Guide To Accessibility and 508 Compliance

The words "accessibility" and "508 compliance" are thrown around frequently these days, but as a designer it can be unclear how the practice directly pertains to your role in visual design. Sorting through all the hubbub, I would like to take the opportunity to clarify why accessibility should matter to you as a designer, and how you can champion the practice without compromising your design.

First, some rough definitions:

Accessibility:

Jonathan Snook sums up accessibility well in this great accessibility article:

"it is about making sure something — in our context, a web site or web application — that works for those who are physically disabled. Maybe they're blind or maybe they're a quadriplegic and unable to use a keyboard or mouse in the traditional sense."

508 Compliance:

Section 508 of the U.S. Code is the law that requires federal agencies and their contractors to adhere to a minimal level of accessibility. The law can be loosely interpreted and basically boils down to:

"the use of text labels or descriptors for graphics and certain format elements. (HTML code already provides an "Alt Text" tag for graphics which can serve as a verbal descriptor for graphics). This section also addresses the usability of multimedia presentations, image maps, style sheets, scripting languages, applets and plug-ins, and electronic forms."

Why These Things should Matter to you:

In January of 2008 Jeffery Zeldman wrote a post that really changed the way I thought about the web. The article talked about a disabled woman in a motorized scooter and how she had a difficult time crossing the street to seek medical treatment. While the building may have had a nice ramp at the entrance, there was only a curb on the access road leading to the building. It made me see just about everything differently.

These days, most major department stores or public venues have wheelchair access ramps. Its not only because they are required to, but it is also because it is bad business not to be open to everyone. Yet so many websites make it difficult for some to access content.

There are curbs standing between so many people and the information they need to access. Have you ever been frustrated when something on a site won't load fast enough or when navigation is unclear? Frustration leads to a bad brand experiences (See Jared Spool's great article on Branding and Usability) and bad brand experiences mean bad business.

Happy web page visitors buy more and return more often, and are more likely to appreciate your beautiful visual design. Happy web page owners have relationships with their designers, leading to better business for you. It is in the best interest of your client and you to have a more accessible website in the long run.

Myths, Misconceptions, & Confusion:

508 compliance is the same as accessibility.

No. 508 compliance is the law that law-people wrote up to try and begin to set some standards. It provides the minimum standards for what is deemed acceptable, and minimum really does not make a site fully accessible. Sure, you can make the effort to be 508 compliant, but the wording is very vague. Make the effort to be accessible, not just 508 compliant.

Accessibly means my design isn't as pretty

This is a serious misconception. There isn't anything about being accessible that necessarily makes a design look ugly. Anything that you can do with web standards and other best practices can be done accessibly, and that makes for a lot of great design potential.

Providing Alt Tags is all you really need to do

Adding descriptive alt text is the very least of what you can do to improve accessibility. There are numerous simple things you can and they don't take a PHD to implement in your design. See below for a few of these.

Some Simple Tips

• If your main navigation is more then 6 or 8 items long, skip navigation proves to be very useful for those who are using the assistance of a screenreader. What is skip navigation? It alows the user to not have to have to hear the same navigation over and over every time they navigate to other pages on the same site.
• Provide true semantic headers ( h1, h2, h3) and determine clear labels on forms to help those using screenreaders. This will help improve the user's expereince when navigating through a site.
• When marking up your content or providie additional options in a layout consider font sizing (which is built into most modern browsers now) for those who may need to see text at a larger size.
• Be mindful of color contrast for those who are colorblind or have a hard time determining different colors.

4 common mistakes designers make that are easy to fix

Immediately defaulting to Flash for a slideshow carousel

While I am not knocking flash here (because with some work it too can be accessible), but using a simple JQuery plugin in gives you the same effect as a fancy fading flash carousel and keeps your HTML body text happy and living online, inline with the rest of the content of your page. This can make it accessible for screen-readers to read it in the natural flow of the content, rather than jumping off the page and interrupting the entire process (which is what happens when you provide alternative XML content for a flash carousel). Sound like a pain? Its really not: there are numerous plugins (J Carousel, J Cylce, and more) and there are TONS of tutorials and happy open source developers on the internet just waiting for you to ask them for help. Its relatively simple to style it to look just about however you want on your site. Sometimes flash is the way to go to meet certain design goals and client goals, I am just encouraging you to consider alternative methods in your process.

Using images to display type

There is nothing wrong with making your type an image as long as you mark it up properly. This may be my BIGGEST pet peeve on the whole internet, all you have to do is use a very simple, fast phark image replacement in your CSS and look what happens: the screenreader reads your text fine, Google is happy with you, and Snoopy does the happy dance. I wrote a whole post about this earlier, feel free to read more in-depth on it. (Sidenote: Using text replacement methods are can still cause accessibility issues for users who have images turned off, know your audience and provide them the best solution considering their particular circumstances.)

Title tags for links and alt tags for images

Use a title attribute when your link text does not fully describe what the link is actualy going to. Better yet, get in the habit of making your links very descriptive, "click here" with no further information doesn't mean a whole lot to a person who is listening to the site via a screenreader.

Not considering graceful degradation.

This tip can be it's own post in itself, but think about how things will look if you are someone viewing your site on a slower connection, without flash, or on a tiny screen. You don't have to design your site to directly address all of these unfavorable scenarios but be aware that folks who may be key users possibly could be, and what their experience would be. Can they still access the content they need? Flash is unavailable on iPhones and, while that’s still a small percentage, information on a site that may be critical to a mobile user can greatly effect a brand experience. If you are doing a redesign, use Google analytics to get a good idea of who your users are, or better yet, actually talk to some of them, and really optimize the experience for the different audiences you have. Information such as screen resolution, browsers, and connection speed can all help you design an experience that works for the largest possible user base.

Many visual designers may think that accessibility and 508 compliance do not directly effect their contributions to the process, but indeed it does. All three terms can be confusing but sorting out the differences and creatively considering each can greatly enhance your users online experience. The more accessible a design is to the masses, the more people who will get to experience your visual story-telling that accompanies the content and interaction.

Have any other tips or information? This is a pretty vast topic, so vast that entire books have been written on it. I would love to hear your thoughts in the comments.

This post was written with some tips from accessibility guru and all around nice guy, John F Croston III. Check out his Presentation on accessibility on his blog.