Sideproject

Building things on the internet

Best practices for designing websites for everyone

Web accessibility (known in other fields as inclusive design or universal design) is the degree to which a website is available to as many people as possible. Accessibility is most often used to describe how people with disabilities can access the web. Via Why Bother with Accessibility?

This strikes a chord with me because it is something that I know I have a lot to learn about. Beyond using alt tags on images, there aren't a lot of things I do on a daily basis that make the websites I build more accessible. I needed to search out some others things I should be doing. Jenn Schiffer wrote a great article this week about how to be less selfish and build a better web for everyone:

It's 2014 and we continue to build a Web for what we consider to be the group most worthy of access: able-bodied, good-sight-and-hearing-having people, in a class that can afford high-bandwidth and memory for large asset loading sites.

It sounds obvious, but the human being part of this is the most important one and its often overlooked. Much like how buildings have wheelchair ramps, specific counter heights, and enough floor clearance, websites should be accessible to those with vision, hearing, cognitive and motor skill impairments.

Worst-case scenario (i.e. doing nothing)

A lot of the time, especially on projects where you don't specifically have to comply with accessibility laws, this stuff is gets ignored. Here's whats happening when you are not going out of your way to make your website accessible to everybody:

  • You're alienating hundreds of millions of people from using your website. According to the World Health Organization, 285 million people have vision impairments.
  • Without any cues to allow those using screen readers to consume information, its not just not optimized for accessibility, its legitimately a poor experience. Can you imagine building a website knowing full well some of your users are going to visit and exit frustrated because its impossible to navigate? Bugs may pop up here and there, but being completely inaccessible is a nightmare.

Using screen readers

New TED website view with screen reader

A screen reader is an assistive technology used by visually impaired users, or users with other disabilities (, who need the screen described to them, typically with synthesized text-to-speech. via Chrome on User Experience

All computers come with screen readers installed (except for a few exceptions with Linux). For instance, on Macs, pressing Command (⌘) F5, will launch VoiceOver, which is built into the Mac OS. On Windows, you can launch Narrator by pressing the Windows key and Enter. They read all the text on the screen, list all headers and links on a page (because that's how users scan pages) and read all of the available metadata.

Google created a tool, ChromeVox that allows developers to use screen readers to test what they build. It audibly speaks the content of the page, plays audio cues for page load progress and objects on the page, and provides a way to navigate all web content by using the keyboard.

Do accessibility tests

The most basic things you can do is go through your entire website using only the keyboard. Run it through ChromeVox yourself, or connect with others, developers or those who use screen readers to test each other’s websites and applications. Anytime you can't navigate through a page, add descriptive content to give more context to all users.

Using an evaluation tool

I used WAVE (Web Accessibility Evaluation Tool) to see what common things I was missing.

Sideproject results from web accessibility evaluation tool

Using the tool, I was able to see pain points right away and specific ways to fix them. You get a map of errors and alerts that the tool flags along with "what it means", "why it matters" and "how to fix it" right off the bat.

Small things you can do

  • Add a document language, i.e. <html lang="en"> to the <head> of your pages.
  • Improve color contrast on the page. For instance, I was using a light-colored orange link that added very little to the design and wasn't easy to distinguish from the white background color. You can test your own designs with this Color Contrast Checker and even adjust your color right in that tool.
  • Use descriptive alt tags. Like I mentioned at the beginning, this is probably the most well-known action item on the list. However, it's also important to make sure the text actually gives a benefit to the reader. So, don't duplicate what's in a caption below an image. IF there's any text in an image, make sure that is represented in the alt tag.
  • Use WAI-ARIA landmarks, or role, i.e. <main id="content" role="main"> to designate global nav features. These markers bridge the gap between where you are on the page and what the section's purpose is:

Watch "How ARIA landmark roles help screen reader users" on YouTube: http://youtu.be/IhWMou12_Vk

Legal mumbo jumbo

Section 508 requires federal websites to be accessible for people with disabilites. Since 2001, all content that is created with federal money fits that bill. Health and Human Services puts out a website requirements checklist that actually gives a pretty decent indication of some best practices:

  • Provide a link to the homepage from every page on the website.
  • Provide an easily findable way for users to contact you.
  • Includes a search function to help the public easily locate information.
  • Provide a user-friendly message for a 404 error page.
  • Use meaningful language for links rather than “click here.”
  • Indicate the file type and size for downloadable files.
  • Acknowledge with an automated response whenever a user submits either a completed form.
  • Clearly and consistently distinguish required data entry fields from optional data entry fields.
  • Set up an analytics program to gather information about your users’ behavior, review data, and make site improvements.

More importantly than it being the law (and a lot of this stuff seems outdated, like making sure there aren't any "under construction" pages), actually caring about this stuff is important if you care about the web. All users are looking for information. The web and its usability are a basic human right.

Win a copy of The Accessibility Handbook

The Accessibility Handbook cover

I'm giving away three copies of The Accessibility Handbook by Katie Cunningham to my readers. To win, just leave a comment on this post. I'll be putting all of the names in a hat and drawing the winners at the end of the week (on 3/7). I'm purchasing these myself and will be sending the eBook so, the winner can be from anywhere in the world.

Chicago Polar Plunge

On a semi-related note, I'll be doing the Chicago Polar Plunge on March 2nd for the Special Olympics. Any and all contributions are very much appreciated and go to an awesome cause.

UPDATE: Success! I raised $175 for the Special Olympics, such a great (and chilly) experience:

More resources

Accessibility is usability for users who have additional needs. — Katie Cunningham

Want to stay in the loop on what's happening at Sideproject.io? Sign up for the mailing list.

* indicates required