Skills for Access

Why this is important

Given that there is such a range in accessibility needs, there's no one colour scheme, font style, size or page layout that is 100% accessible to 100% of the population. The most effective way of making an interface accessible to the widest possible audience is to produce it in a way that can be easily changed by someone to suit their own access requirements, for example to provide a more readable page for someone with dyslexia, or to enlarge the text size for someone with a mild visual impairment. People with limited manual dexterity may also benefit from the ability to enlarge text, and thus the clickable area of text hyperlinks.

This might seem anathema to a designer intending that their carefully designed interface should look exactly the same to everyone, but the reality is that what may be visually appealing to a majority is completely unusable to a minority, if display aspects can't be changed.

General Principles

The key principle is not to abandon high quality designs in favour of a dull, unimaginative text-heavy interface. Neither is it to provide a large number of alternatives, each for a specific group of disabled people. Instead, use web design techniques that allow an individual to easily change important settings themselves - for example text and background colour, font style and size, or spacing between lines of text. This way, both designer and user can share in the responsibility of maximising the accessibility of the interface.

Before you continue

The advice on this page helps you avoid introducing a specific accessibility barrier, but it's not a magic formula. To avoid attempting to follow a technical solution that is not appropriate to the resource and its intended purpose, you need to know the context in which the multimedia resource is being used:

1. The purpose or aim of the multimedia resource in question, and whether it is being used to supplement another resource in the learning environment, or whether its use is required by students.
2. The target audience, their knowledge and expectations, and the type of browsing and assistive technology that they may be using.
3. Whether the information and experiences provided by the multimedia technology are already available in an equivalent, alternative form.

For more background on this approach, see our Guide to the use of multimedia in accessible e-learning.

Technique Details

When creating HTML pages, there are two essential aspects to creating pages that allow user customisation:

1. Use structural HTML elements to identify features of the page like headings, lists and quotations.
2. Use Cascading Style Sheets (CSS) to style the appearance of the page, including text and, as far as possible, for layout.

CSS make it easy for the designer to create a website that is consistent in its layout, navigation and presentation, and allows users to adapt the pages according to their own needs, but for CSS styling to work well, and for the use of alternative CSS to be possible, pages have to be properly marked up with the appropriate HTML.

Once this is done, there are different ways for a user to modify the look of HTML pages to suit their own accessibility requirements, depending on which browser they're using and/or what elements of the page they need to adapt. The examples below are screenshots of the same web page in Internet Explorer 6 with 3 different user-specified display settings: default settings (Example 1), large text (Example 2), and with CSS turned off (Example 3).

Example 1: The web page with its default settings (the user has not changed anything).

Example 2: Page text has been enlarged using the browser's View Text Size option.

Example 3: Page with style sheets turned off.

Example 3 also gives a good guide as to how a web page might be displayed in a text-only browser.

Examples 4 and 5 are from a resource offering three different colour settings, each achieved by supplying alternative stylesheets. These are activated through JavaScript embedded in the HTML code. Cookies are used to remember the colour setting for the next time the user accesses the site. The advantage of this solution is that the user is not required to create their own style sheet, or figure out how to apply it using their browser, but it does obviously requires a script-enabled browser, which may not be appropriate if you cannot be sure your target audience will have JavaScript enabled.

Example 4: Main menu screen with colour picker.

Example 5: Lower contrast colour combination.

Testing

Using as wide a range of browsing environments as possible, make sure every possible display option you provide works as expected. For example, colour changes and text size changes should be applied to all text (since it may be impossible to change text within images, the impact of his should also be considered), and these changes should not adversely impact on the usability or functionality of the page content, either by obscuring some page content or by adversely affecting layout.