Skip navigation.

Accessibility & Inclusion
Your Online Presence > Accessible Websites, Strategy & Development, Designing A Site

Using zoom layouts - alternative style sheets for improving your site’s accessibility

By Kath Moonan, AbilityNet

This article explains who benefits from Zoom layouts also known as alternative style sheets or skins, the best way to put them into practice and key resources that will help you explore this topic further. The article assumes familiarity with Cascading Style Sheets (CSS).

Introduction

People with low vision or dyslexia can benefit from alternative page layouts which maximise legibility and reading comfort. The key technology that enables you to do this is Cascading Style Sheets (CSS). There are an increasing number of sites such as AbilityNet, DRC and MY Web my Way on the BBC site that use this accessibility enhancement. It is worth pointing out that there is still some debate about the best techniques you should use, what this article covers is the best practice options available at the moment. 

Users with Low Vision

Users with low vision rely on increasing the text size to read web pages easily.

Most websites use a multicolumn format of three or more columns. Though the majority of modern web browsers such as Internet Explorer (IE). Firefox, Opera and Safari allow the user to increase text size, many page designs do not scale well and are often hard to read clearly.

Also, people who rely on screen magnification software to read web pages often miss information when the layout is complex, particularly when information spans across more than one column such as multicolumn online forms. 

Offering alternative page layouts using style sheets is an effective solution to these problems.

Many people with low vision find the following web page options helpful:

  • Single column layout
  • Fluid layout
  • Navigation presented horizontally
  • Light text on a dark background
  • Large text
  • Bold text

Users with Dyslexia

Users with dyslexia may find the conventional black text on a white background too glaring and prefer dark text on a pastel background.

Other issues which make text easier to read for dyslexic users are:

  • Good use of  whitespace to separate items
  • Large, sans serif typefaces such as Arial Tahoma and Verdana
  • 150% or double line spacing
  • High contrast colours (but avoid red or orange body text)

The benefits of alternative style sheets

Before CSS was widely used, websites offered a 'text only' version for people who required a high contrast display or a 'linearised' version without HTML tables or multiple columns.

'Text only' has always been controversial because many users are unhappy about using a separate version of the website which is often perceived as being inferior. It's much better to allow all users to use the same website and provide a way for them to adjust it to their needs.

Technical Compliance

The World Wide Web Content Accessibility (WCAG) 1.0 checkpoint referring to providing alternative style sheets is Priority 3:

11.3 Provide information so that users may receive documents according to their preferences (e.g., language, content type, etc.)

Creating zoom layouts

Creating a zoom layout involves considering the following:

  • How to inform your web users of the different options available
  • What alternatives layouts to provide
  • How to technically implement the style switcher

Telling the user which style sheets are available

At the moment there is no agreed definitive way to alert users to different style sheet options though many websites use a series of stylised letter “A”s as a navigation device.

On the AbilityNet website these are located to the right of the page. This location is used because it is a page area associated with key site features and links such as search and contact details.

It is important that the design of the interface buttons reflect the colours of the Style sheet they will bring in , and are large enough for a user with low vision to see, and are spaced adequately apart (at least 5 pixels) so someone who has difficulty controlling a mouse can easily click on them.

 

Screenshot, AbilityNet website showing interface buttons

 

Until more usability research is conducted into zoom layouts AbilityNet recommend using this system.

Other alternative methods include providing a choice of options on a separate page  and using different symbols in different locations.

Alternative styles

The next step is to decide what styles you wish to provide for your visitors.

AbilityNet recommend the following:

For low vision users,

  • Use a single column layout:
    1. Fluid layout
    2. Place navigation at the top of the page
    3. Provide margins – i.e. 50px so text is separated from the edge of the browser
  • Use a proportional measurement for line spacing such as percentages or ems, use a generous line space such as 150% or 200%
  • Include relevant graphics That add meaning to the page you can remove the decorative images that have been set in the style sheet.
  • AbilityNet used the colour scheme recommended by Doug Bowman of StopDesign:

    • Background #123
    • Body text #FFF
    • Links #FC3 (ensure all links are underlined)
    • Visited Links - #FCF
    • Other elements such as headers can be styled maintaining a high contrast scheme. Use type sizes to clearly mark heading levels etc.

For users with dyslexia

  • AbilityNet used the colour scheme recommended by Doug Bowman of StopDesign
    • Use a pastel background such as #f3f0c8
    • Link colours #0000FF
    • visited link #492a49
  • A multi column layout can be used, ensure columns are well spaced and consider including visual dividers such as borders between the columns
  • Use a proportional measurement for line spacing such as percentages or ems, use a generous line space such as 150% or 200%
  • Include graphics – this is not a text only version!

For more in-depth information on CSS visit http://web-graphics.com/mtarchive/001627.php

Technical Implementation

The most accessible way to implement style switching is using server side scripting.

See Using PHP to implement zoom layouts for an example.

If server side scripting is unavailable you can also consider using client side switching such as JavaScript. If JavaScript is used ensure that all interface elements are written using document.write so that no unusable options are displayed on the page if JavaScript is not available.

For more information on using JavaScript visit All that Malarkey which includes dowloadable scripts you can try out for yourself.

Sources

Websites

Further reading

Much of the research into Zoom layouts began after an article by Joe Clark was published on the website A List Apart. The article popularised Zoom layouts and encouraged the web accessibility community to research new interface designs for vision impaired users. There are several excellent articles on the web regarding zoom text and as more research is conducted this number is likely to grow.


About the author

Kath Moonan, AbilityNet
AbilityNet is a national charity helping disabled adults and children use computers and the internet by adapting and adjusting their technology.

Glossary

Browser, CSS, HTML, Internet, JavaScript, Line, PHP, Screen Magnification Software, Software, Style Sheet, WAI, WCAG, Web Page, Website

Related articles

Published: 12th January 2007

Copyright © 2007 Kath Moonan, AbilityNet

User comments and discussion

If you have useful information to add to this article please Add a comment. Comments will appear after they have been moderated.

Discuss this topic in the Knowledgebase forums. This is a useful place to share knowledge, experiences, and ask questions.

Please sign in or register to be able to post a comment or discussion.