Grow your CSS skills. Land your dream job.

Accessibility Basics: How Does Your Page Look To A Screen Reader?

Published by Chris Coyier

Good web designers spend a lot of time making their pages accessible. One way to think about accessibility is to think about the extreme case scenario of having every single thing deactivated on your site except plain old HTML. I'm talking no images, no CSS, no Flash, no Javascript. If you turn all these things off, does your page still make sense? Sure, it won't be pretty. But is there a title still at the top? Is the navigation still there?

This is why you will hear the term "screen reader" being used when talking about accessibility, because that's what you get with a screen reader. None of the fancy, all of the content. From Wikipedia:

A screen reader is a software application that attempts to identify and interpret what is being displayed on the screen. This interpretation is then represented to the user with text-to-speech, sound icons, or a braille output. Screen readers are a form of assistive technology (AT) potentially useful to people who are blind, visually impaired, or learning disabled, often in combination with other AT such as screen magnifiers.

Try disabling everything on your own site and see what you get. If you use Firefox, the web developer toolbar can help with that. What do you get? Here is what CSS-Tricks.com looks like:

cssandimagesoff.png

Not half bad, I don't think. The page has a title, simple site navigation, and then gets right to the content. A lot of the other site navigation, like "recent posts", is way down at the bottom and I don't have a problem with that. I think if people with screen readers visit this site, they deserve to hit some content as soon as possible.

Again citing Wikipedia, 2.6% of the world's population is visually impaired. If we are willing to make changes and accommodate the 2% of people visiting our site through IE 5.0, we should be willing to help out the 2.6% visiting through a screen reader.

Think those percentages are too small to care about? Then know this: good accessibility equals good search engine optimization. Think about those darling little Google bots just like screen readers. They can't look at your images, they don't care about your fancy CSS tricks, they certainly can't see inside your flash content. They read your HTML just like a screen reader does.

Of course I'm not saying that we should all abandon our awesome CSS designs in favor of simpler text-only designs. Quite the contrary, actually. CSS helps us keep our HTML clean and ultimately, screen reader friendly.

Later this week: What about the 4-10% of the population who suffers from some form of color blindness?

Comments

  1. Volkan Görgülü
    Permalink to comment#

    I am looking forward to “What about the 4-10% of the population who suffers from some form of color blindness?”

  2. Many people usually just don’t think about such a situations, but in fact if absolutely all your visitors are important to you – this article helps to make even the rare clients feel themselves comfortable.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".