August 26, 2009

How to make your website more accessible

  • Buffer
  • Buffer

Enhancing website accessibility from JD Lasica on Vimeo.

JD LasicaA few weeks back, at SOBCon busniess school for bloggers in Chicago, I met Glenda Watson Hyatt, a remarkable trainer and conference speaker who gave a presentation on how to make websites and blogs more accessible to the disabled. Glenda, who has cerebral palsy, deals with computer accessibility issues on a daily basis. I wrote about her advice on Socialbrite: 7 tips for communicating with people with disabilities.

After Glenda’s talk and one by Lorelle VanFossen, author of “Blogging Tips” — Lorelle has occasional memory lapses because of traumatic brain injury — I captured some of their advice regarding how to make sure your website or blog accessible to disabled people.

Lorelle says that fully 60 percent of all sites on the Web are not accessible to the disabled — so pay attention, yours may be one. They discuss specific steps website operators and bloggers can take to make their sites and blogs accessible, including adding simple things like alt tags, captions and underlined links.

Tips to make your site more accessible to disabled users

• Include “alt” tags (alternative descriptions) and title tags in all images and videos.

• Make your links look like links. Use colors that distinguish them from regular text and use an underline to set them apart.

• Make your body text legible. The 0.8em default on some blog platforms is just too small for millions of readers out there. Usability should be your paramount concern — not all your readers are under 30!

• Also, make sure your stylesheet permits variable font sizes. If you’re using a fixed font, older browsers don’t let users adjust text size. (In Firefox and IE, you can hit command + or – to increase or decrease the size of the text on screen.)

• Give your photos captions, so the vision-impaired can know what they’re looking at.

• Provide a paragraph of summary for your videos and audio podcasts — or, if possible, a transcript. Because search engines can’t see or hear but can only “read” text, your posts will do better in search results, too. And don’t forget to add relevant links to your post.

• Don’t use “click here” as a link. Instead, offer context about what it’s about and link the relevant words.

We made sure to launch Socialbrite with these features in mind, but if you see some shortcomings on our site, let us know!

Lorelle told of one deaf friend whose children are also deaf. “Her kids are growing up in a world filled with video, and they can’t participate.”

About one in four people on the Web is disabled in some way, Lorelle says. And yet 60 percent of all sites fail basic accessibility tests. She and Glenda will be working with @Beanfair on an “Integration Camp” to break down the able-disabled mythology.

“Let’s quit the labels, let’s quit the judging, and find the value in the human being,” she says beautifully.

The video’s lighting and sound are not optimal, but I knew there was something special about capturing Glenda and Lorelle on video together. It’s 15 minutes long.

Watch, embed or download the original video from Vimeo



7 tips for communicating with people with disabilities (Socialbrite)

How POUR is Your Blog? Tips for Increasing Your Blog Accessibility (free ebook from Glenda Watson Hyatt)

Doitmyselfblog (Glenda Watson Hyatt) (Lorelle VanFossen)

Sue Center is a communication environment designed specifically for people who cannot use a keyboard or mouse

Reblog this post [with Zemanta]

JD Lasica, founder and former editor of Socialbrite, is co-founder of Cruiseable. Contact JD or follow him on Twitter or Google Plus.

Print Friendly, PDF & Email

Creative Commons Attribution 3.0 UnportedThis work is licensed under a Creative Commons Attribution 3.0 Unported.

8 thoughts on “How to make your website more accessible

  1. Pingback: Mashable & our favorite posts of the year | Socialbrite

  2. Pingback: 7 tips for communicating with people with disabilities | Socialbrite

  3. 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!
    Dog Boots