Joe Clark: Media access

Updated 2003.12.17

Accessibility & Web design

On 2003.12.06 in Dallas, I presented at the American Academy of Optometry’s annual convention in a session entitled “Low Vision and Accessibility of the World Wide Web.”

Statistics

How many people with disabilities are online?

U.S. Internet users

Figures with greater scientific credibility are hard to find, but they exist.

The Survey on Income and Program Participation (SIPP, 1999, carried out by the U.S. Department of Commerce, Economics and Statistics Administration, National Telecommunications and Information Administration) found the following basic statistics on disability groups:

The number of people with certain disabilities and “access” to the Internet was also surveyed.

By contrast, 56.7% of nondisabled people have Internet access.

The SIPP study did give an age breakdown: 9.3% of disabled users over 65 years had Internet access compared to 17.3% of nondisabled. For the 50–64 age range, the figures are 24% disabled and 42.5% nondisabled. “Internet usage” is still not the same thing as Web usage, and the data are not broken down by nature of disability.

A University of California, San Francisco study from the year 2000 [PDFHTML] uses a broader definition of disability (“work” disability, which, for this topic, does not break down specific disability categories, like blindness or deafness). In that study, “[o]nly one-tenth (10%) of people with disabilities connect to the Internet, compared to almost four-tenths (38%) of those without disabilities.... Of the 21 million Americans with work disabilities... only two million ever use the Internet.”

This same study also finds very low usage rates of adaptive technology other than white canes: “A very small number of people (3% of blind persons and 0.1% of those with low vision) specifically [mention using adapted] computer equipment.” It is likely that many low-vision people do not need adaptive technology, but these numbers are still surprisingly low.


Standards

The World Wide Web Consortium’s Web Accessibility Initiative (WAI) publishes the Web Content Accessibility Guidelines (WCAG, annoyingly pronounced “wikagg”), the only international standards available for Web accessibility.

These Version 1.0 guidelines are old and out of date, but the new Version 2.0 is nowhere near ready, so we’re stuck with 1.0. (You can contribute to WCAG 2.0, and we certainly need you.

Sizing and colour

If you are a low-vision person, you probably want some combination of the following:

  1. big fonts
  2. high contrast
  3. colours of your choosing

You can get what you want most of the time, but it will often be difficult.

Understanding Web design

Back in the old days before we understood what Web standards were, Web developers used whatever HTML they wanted in their pages. HTML – hypertext markup language – is the underlying code that gives structure to a Web page. HTML lets you mark up or designate structural elements like headings, paragraphs, lists, images, and the like.

But in earlier days, developers would add code that indicated how the structure should presented, and mix it right in with the original HTML. Structure and presentation were all intermingled. Worse, even though there are right and wrong ways to use HTML (there is an actual grammar involved), nearly everybody used the wrong way. Or actually, ever developer came up with his or her particular wrong way.

This made it difficult for browsers even to display the Web page. It also made it essentially impossible for a low-vision person to customize the way pages were displayed.

However, technology has improved, as, more importantly, has its acceptance by developers. The new concept of standards compliance involves:

  1. Using HTML correctly. (We call that valid HTML, and it’s difficult to explain. Have a look at “Understanding HTML Validation.”)
  2. Control the appearance with cascading stylesheets (CSS). HTML gives the structural information, while stylesheets are separate files that tell the browser how to display the information.

With presentation decoupled from structure, it becomes possible for a low-vision person to adapt a Web page to his or her preferences.

It’s possible due to the cascade principle. On the Web, we’re dealing with a battle among the developer’s intentions, the browser’s capabilities, and the reader’s preferences.

The style or presentation information cascades from designer to browser to reader. And the last link on the chain has final say. In principle, what the reader wants the reader gets.

Browser settings

In nearly all modern graphical browsers, you can set your preferred font, size, and colour (the latter usually only for links). Some browsers let you set a minimum font size, which is rather useful.

Separately, all modern browsers let you increase font size as you’re viewing a page. However, Internet Explorer on Windows gets the CSS font sizing wrong, and makes it impossible to change font size if the designer used a certain unit (pixels, px). The maximum zoom size is also rather small.

Unless you the low-vision user have an ironclad reason to use IE on Windows – your adaptive technology works only with that browser, for example – you should not use it. Apart from the resizing bug, Explorer is famously insecure and has significant bugs in CSS.

Alternatives are readily available.

User stylesheets

And if browser settings alone are insufficient, you the reader can set up your own “user stylesheet.”

This is not for the faint of heart; virtually nobody does it; and the effects can be unintended. For example, if you declare that all the fonts you ever want to see have to be 36 pixels high, even uninteresting or unimportant type on a page, like navigation bars, will blow up that big.

Moreover, not only do you have to know how to write a valid (if tiny) CSS file, you have to dig around in your browser’s preferences just to set it up. While this is a free-of-charge option, it is not practical for typical low-vision users. (And that’s why I’m not giving instructions or screenshots here.)

By the way, if you’ve heard that it’s dead simple to make IE on Windows produce really big fonts because all you need to do is add a user stylesheet – well, that’s true as far as it goes. But adding a user stylesheet is a very large hammer to use with a relatively small nail. And the valid methods of writing a CSS file are more complex than people think.

Stylesheet-switching

So far, I’ve talked about 2/3 of the cascade – the browser and the reader. What can the designer do?

Since HTML (the structure) and CSS (the presentation) are separate, it follows that you can use multiple CSS files with the same HTML. (That’s what a user stylesheet is, for example.) It also follows that the designer can set up multiple stylesheets for any particular Web site.

Thus, a designer can set a default stylesheet for his or her preferred appearance – small type, low contrast, lots of text on the page, and so on – but also provide alternatives for people who don’t like, or can’t use, the default.

Some browsers let you select an alternate stylesheet directly. (In Mozilla, choose Use Style from the View menu.) But most of the time, the Web designer has to give you a stylesheet-switcher right on the page.

They’re pretty easy to make, and a lot of standards-compliant Web designers use them. A quick list (skip):

  1. waffle: under the iron
  2. Sjoerd Visscher’s weblog – w3future.com
  3. Handicapzero.org
  4. mac-stock.com
  5. W3C :: remix
  6. World Wide Web Consortium
  7. w3c World Wide Web Consortium :: Standardizing the Web
  8. glish.com
  9. Openweb.eu.org – Accueil
  10. Alp Uçkan’s Website
  11. Opinions of the Wolf: News
  12. Sasa Kulic – Web Designer and Developer: Lately
  13. Consultor Jurídico – Capa
  14. zeit.ca: a website for the internet age!
  15. stylesheet switch
  16. Stylesheet switcher
  17. meyerweb.com
  18. css Zen Garden: The Beauty in CSS Design
  19. Adrian Roselli’s Gallery
  20. The Groves
  21. liorean
  22. customize cookiecrook
  23. Adactio
  24. nukenfootzen – change the style
  25. Style Selection
  26. Kanata Kareer Group – Public Site
  27. Tutorials and articles
    1. styleswitch.js
    2. Adrian Roselli – Style Switcher in ASP
    3. Alternative Style: Working with Alternate Style Sheets
    4. A Backward Compatible Style Sheet Switcher
    5. Theme Switcher tutorial
    6. Scripts

Stylesheet-switchers may be a good method of accommodating low vision. The Web designer can include ready-made templates or combinations that are known to be helpful to large swaths of the visually-impaired population. A few sites that do so:

  1. University of Southampton – Change Page Fonts and Colours
  2. Rick Bull’s Site – Control Panel
  3. DIN: Choose your preferred display option

Now, there are a few problems with this approach, none of them insurmountable:

  1. The page or method to select an alternate stylesheet itself has to be accessible.
  2. There has been no user testing of the typical alternate stylesheets (that I know of, anyway).
  3. Stylesheet-switchers are still too uncommon.

But, at the Web-designer level, adding stylesheet-switching is the most responsible method of accommodating low-vision users.

Colour deficiency

What if you have hereditary or acquired colourblindness, like protanopia, deuteranopia, or tritanopia? It’s relatively easy for a Web designer to avoid using confusable colours (like red and green) in a confusable way. I wrote a whole book chapter on the topic, in fact.

Now, if you’re a designer who wants to use colour palettes but who is concerned with being absolutely sure that everybody can see the actual colours, there actually is an option available – what I call the Brewer Palette, named after Cindy Brewer of Penn State. It’s a set of colour pairs and gradations that nearly everyone can see and that nearly everybody calls by the same names.

But let’s go one step further: What if you the reader run across a site whose text is too small and whose colours are too low-contrast for you to read? In that case, you need to bump up the text size in your browser (i.e., not IE) and write in to the Web site asking them to add a stylesheet-switcher. Interestingly, the very same people most apt to make this mistake (designers with high graphical standards) are increasingly the ones who believe most fervently in standards compliance and would be willing to add stylesheet-switchers.


Resources

You might find my glossary of accessibility terms useful.


You were here: joeclark.orgMedia accessAmerican Academy of Optometry presentation → Speaking notes