Weblogs: Web Accessibility

@Media 2005: Zoom the Web by Joe Clark

Sunday, July 03, 2005

Joe Clark's session titled Zoom for the Web, subtitled "The Problem of Giant fonts" takes a look at what we can do to make content accessible to people with visual impairments. Joe's speaker notes are available. Any mistakes in the following are all mine.

We should be making websites for all people, not just blind people. Web accessibility is not solely to do with vision.

Magnifiers and fonts

Low vision and visually impaired people are not totally blind. Low vision people don't use braille. They have enough vision to see a page. The fonts are too small for a low vision person, so they compensate by making fonts bigger. This also included using Operating system functions such as a screen magnifier.

Zoomtext and Magic (from the makers of JAWS) are third party screen magnifiers. Using technologies such as cleartype and truetype fonts, a font scales up to a certain limit and then pixelates. Some magnifiers use a box in the bottom left corner, acting like a movable magnifying glass.

Using big fonts opens us up to some problems. There will be limits on how much the fonts can resize before the design breaks. Containers can get too small to hold even one word, for instance Finnish and German languages frequently have long words. Also containers can be too short, forcing the text across the page. Sometimes the right hand side of the screen disappears off the right edge of the browser window. Users could use a horizontal scrollbar, but a usability study shows that people don't do it. In one study (by Ginny Redish and Mary Theofanos) with low-vision users, only three participants noticed an element that could only be found by using the horizontal scrollbar.

Font resizing problems in UK websites

Joe then examines UK based websites to show the typical problems with font-resizing

Hitachi.co.uk, increasing the font level by three increments and the top navigation disappears off the right hand side of the screen. The content also disappears.

John Deere after three increments in font size shows no content and an overlapping navigation bar.

Caterpillar which uses a CSS design, increasing the fonts then displays no content. The content is further down the page, so its less bad.

The Public Carriage Office's journey planner after three font increments shows only a third of the text inside a text field.

Sanyo uses an iframe, so when the text increments it disappears off the screen. Ironic that it shows an advert for a wide screen television.

Private Eye after a font increase has its left navigation (white on blue background) bleeds into the main content which has a white background. The result is that the navigation disappears because of white text on a white background.

Pixel-sized fonts and Win/IE

When we talk about the problems of font resizing we are not talking about pixels. Pixels are a relative unit of measure and we can use it in CSS. [Quotes from W3C specification] pixel sizes are "relative from the display device". The big problem with pixel-sizes is that Internet Explorer for Windows can't resize pixel-specified fonts (Internet Explorer for Macintosh resizes pixel fonts). Internet Explorer for Windows can be configured to ignore font-sizes, but there are unintended consequences.

The idea that pixel sizes are absolute is bollocks. Pixel-based font-sizes are not an accessibility problem, but it is an inherent problem with only the Windows version of Internet Explorer. [In Joe's speaker notes he asks for everyone to take a vow never to say that pixel-based fonts are inaccessible].

The solution to Internet Explorer for Windows is to move to a browser that does support the scaling of pixel fonts. Use a less brain dead browser. The next version of Window Eyes will be compatible with Firefox 1.0. JAWS already works with other browsers.

Recapping basic web design facts

Web standards is about clean structured markup with the look being suggested by CSS. The cascading part of CSS is an important part. Browsers have a built-in stylesheet (so there's no such thing as "stylesheets turned off"), and it attempts to interpret yours to suggest an interpretation. Users can then override these styles using preference settings and user stylesheets. The user has the final say, but its difficult to pursue that right. We developers can offer that.

Zoom layouts

A Zoom layout is an approach to catering for low vision. By already using valid structured code, we want nice looking functional sites. We mustn't get upset when a user remixes a site for their own preferences. The visual look of a site doesn't matter to a screen reader, users don't see the screen. For low vision users we need a new graphic design.

I'm talking about having two designs for every page. It all started with the "Big, Stark and Chunky" article on A List Apart.

Our list of requirements are:

Restyle multi-column layouts down into a single column.
Resize small fonts to big fonts.
Simplify and prioritise the navigation

Two examples of sites have already implemented the Zoom layout. Cameron Adams' The Man In Blue (Cameron is only 22 years old). His Zoom layout is a single column dark background and light coloured text. Better range of resizable fonts. No horizontal scrollbars. The visitor doesn't miss anything.

Sergio Villarreal's Overcaffeinated is a three column layout, and he's offered two zoom layouts, a positive and negative layout (Positive is dark colours on a light background, negative is light text on a dark background). He's dramatically simplified the navigation and turns the entire page into a simple single column layout.

Checklist of steps

The estimate of how big the font needs to be is about 150%. Start with 24px for starters.
Pick a font, don't use Arial or Comic Sans.
Use reasonable fonts and a single column layout.
Dispassionately decide what is important.
Use as little navigation as possible. This is a bit tricky in CSS.
Remove certain parts of the document, by adding classes and id, or add a second - simplified - navigation.
Just use CSS. Make no markup changes (or make trivial changes).

The Zoom Layout is not like a ghettoised text-only page. The content is the same, and is updated at the same time as the regular page. Its using the same techniques as making website adaptable to shoe-phones and PDAs.

Problems of Zoom layout

The main problem is how to indicate the presence of a zoom layout. Perhaps put it on the right hand side along with other important functions (like search). Make sure it hasn't zoomed off the screen. Don't put it in the main navigation, it won't be noticed because of left hand side / banner blindness.

A hack is to use a rev attribute on the link element. It is a hack.


 <link rel="alternate stylesheet"
  href="zoom.css"
  title="high contrast"
  rev="zoom"/>

For page colours, offer different preferences in colour. Joe quotes Jakob Nielsen: Most people spend more of their time on sites other than yours..

Homework assignment

We need real world experience of this technique. Everybody has a homework assignment, create a zoom stylesheet for your website. Then write it up online. Put theory into practice.

Question and Answers

On labelling Zoom layout stylesheet: Use the text "single column", or offer a preference page titled "Change site appearance". In the zoom layout do not remove any content or graphics containing content.

On tunnel vision / reduced field of vision: Concentrate on writing in smaller chunks. Invert the colours, or lose all colouring on the page. Light colours on a dark background is a good approach. Consider problems like using colour to convey content - is that information still available without the colour. For this particular audience, they don't need bigger text.

CSS allows us and users better control of usable colours when used for inversion. Low vision people should not use Internet Explorer because of its text-sizing issues. There are text-crawling tools available for reduced field of vision sufferers.

Make sure the Zoom Layout works by keeping all the content within the borders of the screen. When zoomed, form fields are difficult to match up with their label, unless the label is immediately above the field.

The browser stylesheet always gives dark text on a light background. Is the user going to know how to switch off the web developer stylesheet? The order of elements may be a problem.

On using cookies to remember preferences: Ask the permission of the user. If they say yes, then set the cookie. This method receives a ringing endorsement from PPK (who is in the audience).

On creating a visually impaired toolbar for Firefox: That would be a fun idea. How could we reorder content? Call it BlindFox, or BlurryFox. There's already an available plugin for Firefox that allows users to switch alternative stylesheets.

Many people know about Ctrl and mouse wheel to enlarge fonts.

On using title on links: Its okay to provide advisory information in a title attribute. Side note: one paragraph of the CSS specification has a dependency on the title attribute.

On valid code: Valid code is important. I've asked two screen reader makers, and they both confirm this. The RNIB seem to disagree - that's a case of passionate intransigence. Screen readers have had to tackle the standards problem of tag soup. Every screen reader is trying to hack tables based layout.