Support for web authors
Accessible web design: techniques
This page explains how to put into practice the individual recommendations
and requirements for accessible web pages set out in the
accessibility checklist. Points specifically required by the University's
guidelines are marked as such.
Contents of this page:
Alternative pages
If, after best efforts, you cannot create an accessible page,
provide a link to a text-only page that is accessible, has
equivalent information (or functionality), and is updated as often as the
inaccessible (original) page. The link to this accessible page should be
from the top-left corner of the original page as this will be the first
thing read by a screen reader, and could save the user a lot of time.
[top of page]
Alternative text
Required:
Provide alternative text for every non-text element on a web page, including
images, image map regions, audio, video and multimedia.
The alternative text attribute (ALT) of the image tag (<IMG>)
exists to provide a textual representation of the image for people
accessing the page in a non-graphic way (eg: in a text-only, speech or braille
browser). In some browsers
ALT text will provide the image with a pop-up label which will appear
when a mouse is placed over the image.
The ALT text should convey what is important or relevant about the
image - providing an alternative to viewing the image itself - therefore it is
important to use meaningful ALT tags.
- If what is important is the actual content of the image, the ALT
text should consist of a brief description of the image, eg "photo of a
golden eagle".
- If the image is essentially functional (eg a "Search Now" button) the
ALT text should convey the function.
- For essentially decorative images, a simple <ALT=" ">
(ie quote, space, quote) helps prevent clutter on a text-only interpretation
of the page.
- Longer descriptions of more complex images may be provided by using the
<LONGDESC>
attribute, or by placing a "d" next to the image and linking that to a page
containing the detailed description (see examples in
'Graphs and Charts', below).
How? FrontPage and SharePoint Designer users...
After inserting your image, right-click on it and select its
Image or Picture Properties. The field where you enter
ALT text is labelled 'alternative text', or simply 'text'.
How? In HTML code view...
<IMG SRC="image.gif" ALT="photo of a golden
eagle">
The ALT attribute can also be used with the following HTML elements
<IMG>, <AREA>, <APPLET> and
<INPUT>.
Checks you can perform...
1. View the page with Internet Explorer and move the cursor over the image
(and pause on it).
- Alternative text for each image is displayed as a text pop-up.
- If no text pop-up appears, the image is missing alternative text.
2. In other browsers, right-click on the image.
- Alternative text is viewable in the image or picture properties.
3. Turn off images in your browser.
- Each image is replaced with its alternative text. It will be obvious
which images are not labelled (or which have been deliberately given a blank
label, eg ALT=" ").
4. Validate your page.
[top of page]
Colour and contrast
Required:
Ensure that all information conveyed with colour is also available without
colour. Ensure that there is sufficient contrast between text and background
colours, both for those with standard colour vision and the colour blind.
- Ensure that your chosen colour scheme can be over-ridden by the user's
browser settings.
- Avoid loud textures, patterns or images for backgrounds.
- The choice of background and foreground colours is not as important as the
contrast between the background and the text.
- Be especially cautious when using reds and greens. Red/green
colour-blindness is the most common form, and even in mild cases these
colours can be hard to distinguish.
- Keep your colours bright and distinct by specifying differing lightness
values at big enough intervals (absolute 20% jumps), and by using pure
colours when possible.
- When using an imagemap in which clickable areas
are delineated by colour, enhance the areas by placing underlined text or a
black outline in the image.
- Never rely solely on colour; use context and markup to convey the same
information eg:
These are the results of the race.
The second place finisher, highlighted in red, also qualified for the
Olympic team.
1. John Doe
2. Jack Sprat
3. Billy Bob
- Use either light text on a dark background or dark text on a light
background to provide good contrast. The example below demonstrates good and
bad examples of this:
Checks you can perform...
1. Turn off images in a graphical browser.
- Any images will be replaced with the alternative text. If coloured
images alone were used to convey information, that information will be lost.
2. Print the website on a black & white printer.
- Check that text in images is readable and that pages make sense.
3. Turn your monitor to 256 shades of grey and take a look at your
design.
- Check colours can be distinguished on the basis of their lightness values.
- Is the text pleasant to read or does it tire you?
- Check you are not using too many different colours (lightness values) that
just confuse the reader without adding information to your design.
4. Check for blue/yellow and red/green combinations.
[top of page]
Compatibility with current and future
technologies
Required:
Web pages should be designed in ways that are as compatible as
possible with current and future technologies.
It's hard to anticipate future developments in web technology, but it is safe
to say that well-designed, logically-structured web pages that adhere as closely
as possible to current standards have the best chance of a long shelf-life.
Checks you can perform...
[top of page]
Dynamic content: applets, Shockwave, scrolling text,
JavaScript, flashing pages, plug-ins, etc
Required:
If you use applets, scripts or plug-ins, your site should be still be navigable
and should not lose any content when these are turned off or not supported.
Required:
Do not use scrolling text or other dynamic or moving content which may be hard
to read; where necessary, provide text alternatives and keep these up to date
when dynamic content changes.
If you create web pages in which the content and functionality is presented
in formats other than plain HTML, you may be excluding some people from your
site. Not everyone has the desire or capability to download and use all scripts
and plug-ins.
- Always provide plain HTML alternatives so that everyone can access the
information and services on your site.
- If you use a Flash movie on your one of your pages, ensure that any
meaningful content is available to users who can't access Flash, and do
ensure that a plain text link is available to enable users to access
subsequent pages of your site. [See also: Multimedia]
- Some browsers can't read JavaScript. Wherever JavaScript is used, ensure
that the page functions correctly without the script, or that a parallel
page that does not use JavaScript is available.
- Moving, blinking and auto-refreshing text is hard to deal with if you have
poor sight - avoid all of these.
- Do not create pages that periodically auto-refresh.
- Never allow moving content, such as video, to interfere with a site's
functionality, such as navigation.
Required:
If flashing content on your web page cannot be avoided then:
- Minimize the area of the screen which is flashing. Smaller areas are less
likely to cause seizures.
- Avoid flashing which has a high level of contrast between the states. Some
individuals are more susceptible to high intensity flashing.
- Ensure that no element of your page flashes more than three times in any
one second period.
Web pages which rely on plug-ins might present a barrier to accessibility.
Many non-graphical browsers do not support plug-ins. Some plug-ins are not
supported by all browsers on all platforms. Moreover, even users of browsers
which do support plug-ins may find themselves unable to access a plug-in
enhanced web page if they do not have permission to install software, (ie the
plug-in), on the computer they are using.
Required:
Scripts might create a barrier to accessibility when the capabilities are
disabled in the browser or when the user is using a browser that cannot support
scripts.
- Ensure that there are alternatives for links that can only be activated by
an event handler. An event handler is a script that is invoked when a
certain event occurs (eg the mouse moves, a key is pressed, the document is
loaded, etc).
- Hover Buttons use the <APPLET> tag to display menu
items. Provide alternate content (<ALT>) for applets to make the
user aware of the applet's purpose, eg:
<APPLET CODE="gravity.class" WIDTH="200" HEIGHT="250"
ALT="Java gravity applet">...</APPLET>
- Use server-side scripts instead of, or in addition to, a client-side
script
- Provide an equivalent alternative with the
<NOSCRIPT> element. This element contains HTML markup that will be
displayed by browsers that do not support scripting or browsers with
scripting turned off.
-
Besides alternative content, the <NOSCRIPT> element can also contain a
link to an alternative accessible web page with the same content, eg:
<BODY>
<NOSCRIPT><A HREF="demo_text.htm">text description of the
demonstration</A></NOSCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
[your script here...]
--></SCRIPT>
How? FrontPage and SharePoint Designer users...
When inserting applets (using Insert > Advanced >
Web component > Java Applet) remember to complete the Message for
browsers without Java Support input field.
Checks you can perform...
1. Test the page with Internet Explorer/Netscape using only the keyboard
(no mouse) to test the functionality of the site.
- If the page remains accessible with a keyboard, the site will be fully
functional.
2. Test pages in a browser that does not support applets and plug-ins.
Disable applets and plug-ins in your web browser's options/preferences.
When you do this:
- If alternative text was added to the <APPLET> element, the user will be
informed there is an applet on the site.
- If equivalent alternatives were added to the page, they will be rendered
and are usable.
- If important information is not available, the website is not
accessible.
2. Test pages in a browser that does not support scripts
Disable scripts in your web browser's options/preferences. When you do
this:
- If the <NOSCRIPT> element was used, the supported content will be
rendered.
- If equivalent alternatives were added to the page, they will be rendered
and are usable.
- If important information is not available, the website is not
accessible.
[top of page]
Forms
Required:
Help users avoid and correct mistakes when using forms, etc.
- Where users are expected to provide input, clear labels and/or
instructions should be provided.
- If an input error is automatically detected, the item that is in error
should be identified and the error described to the user in text.
How?
- FrontPage or SharePoint Designer's form validation offers basic error
reporting back to the user.
- More sophisticated error responses and descriptions need to be scripted
- contact WaLT for further advice.
Form elements, such as text input fields, should be clearly labelled.
- Use the <LABEL> element to specify labels for controls that do
not have implicit labels eg:
<FORM ACTION="mailto:somebody@company.com">
<LABEL FOR="Name1">Name</LABEL><BR>
<INPUT NAME="Name" ID="Name1" SIZE=30><BR>
<LABEL for="Address">Address</LABEL><BR>
<INPUT NAME="Address" ID="Address" SIZE=45><BR>
<INPUT TYPE="submit" VALUE="Submit">
</FORM>
How? FrontPage and SharePoint Designer users...
Although FrontPage makes it easy to add form elements to a web page, it does
not yet support the easy addition of the <LABEL> attribute. Users will
need to switch to HTML view to follow the example above.
[See also: Setting the tab order of forms using
<TABINDEX>]
[top of page]
Frames
Required:
Do not use frames.
So, what is so bad about using frames?
- Screen-readers can find it difficult to interpret frames-based sites.
- Users with non-graphical browsers visiting a frames site must choose
which frame to open - selecting the frame they want from a list of frames on
the page.
- Frames prevent bookmarking of specific pages, and create difficulties
with targeting hyperlinks.
- Most search engines cannot properly index a frames-based website.
A user searching for the content of a page hosted in a frames-based site
might be directed straight to the right page, but will end up viewing it
without the frameset which should surround it. If the navigation for your
site is presented in a different frame, then visitors to your site might
find themselves stranded and unable to access other pages in your web.
Additionally, some search engines work by following the hyperlinks from the
first page it finds in a web. If you are using a frameset, it is possible
that only your homepage will get indexed, as the search engine won't be able
to follow links deeper into your site.
- It's very easy even for experienced web authors to accidentally break
frames-based sites, resulting in frames opening within frames, broken links,
etc.
[See also: A web author's guide to
search engines.]
[top of page]
Graphs and charts
There are two main techniques which can be applied to graphs and charts in
web pages to assist in accessibility.
How?
- Include a description of the information in the graph or chart as text
surrounding the image, eg:
The above pie chart shows the popularity of menu items in the staff
canteen.
70% of staff chose the meat option, and 30% chose the vegetarian option.
In this case the image's ALT text should be null, as the image's
content is conveyed in the accompanying description:
<IMG SRC="piechart.gif" ALT=" ">
- Use the <LONGDESC> attribute to point to a URL that contains a
detailed description and data (particularly useful if you wish to pass on
information about the visual attributes used in a chart, eg colour).
<p>Question 1:</p><p>From the chart determine which menu option type
is represented by the smaller blue wedge.</p>
<img src="piechart.gif"
longdesc="piechartdesc.htm" alt="70% meat option and 30%
vegetarian option.">
The <LONGDESC> attribute points to the separate description file
that includes the following HTML file, piechartdesc.htm:
<p>Pie Chart Description</p>
<p>This pie chart shows the popularity of menu items in the staff canteen.
The meat option is represented by the larger red wedge and the vegetarian
option is represented by the smaller blue wedge. 70% of staff chose the meat
option, and 30% of staff chose the vegetarian option. The total number of
staff visiting the canteen is not displayed on the pie chart.</p>
[top of page]
Image maps
If you use image maps, they should be client-side, should contain
alternative text labels for each hotspot, and should also include plain text
links elsewhere on the page as an alternative.
An image map is any image with clickable regions, or "hotspots".
When you create client-side image maps, you place the map's coordinate
information directly into your web document, then all the processing takes place
on the computer viewing the web page (it the client). Not all assistive
technologies can handle image maps, so it is important to include plain text
links as an alternative form of navigation.
How? In HTML code view...
When using client-side image maps with multiple hotspot regions, provide
alternative text-based links, and assign alternative text for each hotspot area
of the map, eg:
<IMG SRC="menu.gif" USEMAP="#NavBar"
ALT="Navigation Bar">
<MAP NAME="NavBar">
<AREA COORDS="50,7,76,23" SHAPE="rect" HREF="home.htm"
ALT="Homepage">
<AREA COORDS="100,7,176,23" SHAPE="rect" HREF="courses.htm"
ALT="Courses">
<AREA COORDS="200,7,276,23" SHAPE="rect" HREF="contact.htm"
ALT="Contact Us">
</MAP>
...Coupled with text links:
Home |
Courses
| Contact Us , eg:
<a href="home.htm">Home</a> |
<a href="courses.htm">Courses</a> |
<a href="contact.htm">Contact Us</a></p>
How? FrontPage and SharePoint Designer users...
Although they make it easy to add hotspots to an image, these programs do not
support the easy addition of <ALT> text to image maps. Users will need
to switch to HTML view to follow the example above. Alternative text only
hyperlinks can be added in the usual way.
[top of page]
Make all functionality available from a keyboard
Required:
All functionality should be available from a keyboard. This
does not forbid and should not discourage providing mouse input or other input
methods in addition to keyboard operation.
How?
This is actually easier than it sounds: by default web pages can be navigated
without a mouse; it's only when you start to do clever things with
scripts, applets and
multimedia that you're likely to hit problems with
this one.
[top of page]
Multimedia
If you are using time-based media such as video or audio, you should
ensure that the user can pause it.
For any moving, blinking or scrolling information that (1) starts
automatically, (2) lasts more than five seconds, and (3) is presented in
parallel with other content, there should be a mechanism for the user to pause,
stop, or hide it unless the movement, blinking, or scrolling is part of an
activity where it is essential.
[top of page]
Navigation and hyperlinks
Required:
Use a consistent approach to navigation mechanisms, layout and other forms of
presentation.
- Links should not be presented directly next to each other.
Some access software will interpret a group of links as being one single
link. Instead, separate links with text. A simple way of doing this is by
using the bar character as in this example:
| Home | Links |
Email |
- All links should contain enough useful information about their
destination that they make sense on their own (without surrounding text or
graphics). If a link consists only of the phrase 'click here', its
function and destination will not be obvious.
- Placing key links together as a menu along the top or down the left side
also helps identify them as links.
- Don't require users to be able to click on a moving target in order to
proceed to another page.
- Provide an A to Z as an alternative means of site navigation.
Allow users to skip to your main content.
When a navigation bar appears at the top of a page or down the left side of
the page, users of screen-readers must listen to all links across the top and
down the left side before getting to the main content. This occurs for each page
visited on the site when consistent layouts are used. A link from somewhere near
the top-left of the page allows these users to skip over navigation links to get
to main content of page. One way to do this is to place a small transparent
image (with appropriate ALT
text such as 'skip to main content') where you want the link to appear, and
making this the link to an anchor where the page content begins.
Give thought to the TAB order of the various links and form elements
on the page.
-
The TAB order default is the order in which these elements appear in the
HTML code. In most cases, this is appropriate, but in some instances, it
may make more sense for a different TAB order to be set up - you can do this
using the <TABINDEX> attribute in the HTML code view. To activate
a link the visitor must tab to it and then press Enter.
How? In HTML code view...
To set the tab order: in the link's tag, type TABINDEX="n",
where 'n' is the number that sets the tab order. (The value for
<TABINDEX> can be any number between 0 and 32767.) Try tabbing through
this example:
The basic HTML code for the above is:
<FORM method="POST"
action="http://www.essex.ac.uk/cgi-bin/do.replyform.pl">
<TABLE>
<TR>
<TD><A HREF="#tabindex" TABINDEX="1">Link
One</A>
<A HREF="#tabindex" TABINDEX="2">Link
Two</A></TD>
<TD ><A HREF="#tabindex" TABINDEX="3">Link
Three</A></TD>
</TR>
<TR>
<TD>Name: <INPUT type="text" name="name" size="40"
TABINDEX="4"></TD>
<TD>Select Choice:
<SELECT size="1" name="choice"
TABINDEX="6">
<OPTION>choice 1</option>
<OPTION>choice 2</option>
<OPTION>choice 3</option>
</SELECT></TD>
</TR>
<TR>
<TD><TEXTAREA rows="2" name="message" cols="40"
TABINDEX="5">Type your message here</TEXTAREA></td>
<TD><IMPUT type="submit" value="Send Message" name="send"
TABINDEX="7"></TD>
</TR>
</TABLE>
</FORM>
<TABINDEX> can be used with the <A>, <TEXTAREA>, <SELECT>,
<INPUT> and <BUTTON> elements.
How? FrontPage and SharePoint Designer users...
You can set the <TABINDEX> order for form elements by selecting
Form Field Properties and typing the desired value into the Tab
Order
input field. (Unfortunately there is not the same provision for hyperlinks,
for which the <TABINDEX> has to be entered manually using the HTML
code view.)
[See also: Forms]
[top of page]
PDF documents
If documents are provided in Portable Document Format (PDF), ensure that
HTML or plain text versions are also available.
Alternatively, users of Abobe Acrobat 5.0 (or above) should see Web and
Learning Technology's
Guide to Creating Accessible PDF Files for Use on
the Web.
PDF documents are readable by blind people using access technology with the
help of 'Access Adobe'. Access Adobe translates PDF into HTML or into
a text email, making it readable by someone unable to access PDF in the
usual way.
[top of page]
Pop-up windows
Do not cause pop-up windows to appear and do not change the current window
without informing the user.
Changing the current window or popping up new windows can be very
disorienting to users generally, but especially to users who cannot see that
this has happened.
[top of page]
Relative and absolute units
Use relative rather than absolute units in markup language attribute
values and stylesheet property values.
Some browsers can't over-ride absolute font sizes to resize text, so avoid
specifying these in point or pixel values.
- Ensure that you use relative font sizes such as ems or %.
- Avoid using font tags in your HTML.
- Whenever possible specify dimensions of tables, etc, in % rather than
pixels.
How?
Use the default font and Normal
settings (on the Formatting toolbar in FrontPage or SharePoint Designer) for
standard text, and make full use of the headings available (Heading 1,
Heading 2, etc - selected via the left-hand drop-down on the Formatting
toolbar). For all other formatting of fonts, rely on your site's
stylesheet.
[top of page]
Stylesheets
Required:
Stylesheets are the preferred method of controlling formatting and
layout; web pages should also be readable without the stylesheets.
Cascading style sheets (CSS) allow you to add styles such as fonts, colours
and spacing to web pages. They can improve accessibility as they separate web
document content from presentation, allowing users the option to override style
sheet settings with personal viewing preferences (eg bigger font sizes,
different colours etc).
Style sheets can be used to control how a page is presented on displays, in
print or Braille, or perhaps how the page is pronounced.
However, it should also be noted that not all style sheet presentation features
can be rendered satisfactorily with older browsers. Because not all browsers and
assistive technology support CSS, it is important that web pages be readable
without requiring style sheets.
You don't have to use your own CSS - getting style sheets right can be a long
and involved process. Sites designed by WaLT come with stylesheets, and the
World Wide Web Consortium provides a range of CSS free for anyone to link to
(see:
http://www.w3.org/StyleSheets/Core/).
[See also: WAG guide to using
stylesheets]
[top of page]
Tables
Required:
Tables containing data should contain clear row and column headers.
If you use tables for layout the table should makes sense when linearised
ie read from left to right (see text and layout below).
Note: While we strongly recommend that tables should not be used for
layout, where this has been done (eg on older pages) the techniques described
below should not be applied.
Text based browsers generally can't display tables in the same way as graphical
browsers. Usually, they will display the content cell by cell and row by row. As
a result of this, it is important that you ensure that the page makes sense if
the table content is presented in this way.
- Use the <TH> element to mark up table heading cells eg:
<TR>
<TH id="t1">Name</TH>
<TH id="t2">Cups</TH>
<TH id="t3">Type of Coffee</TH>
<TH id="t4">Sugar?</TH>
</TR>
The TH element is used to mark up table heading cells of a row or
column. Each TH element cell should also have a unique ID
attribute. The heading cells become reference points for data cells.
- Use the HEADERS attribute on cells of complex data tables eg:
<TR>
<TD headers="t1">A. Smith</TD>
<TD headers="t2">10</TD>
<TD headers="t3">Espresso</TD>
<TD headers="t4">No</TD>
</TR>
In the table data cells, the headers attribute is used on the TD
element to specify which heading cell is associated with a specific data cell.
Note that the data cell containing the number 10 includes the attribute
HEADERS="t2", which relates to the heading cell with ID="t2"
labelled Cups. Therefore, the heading for 10 is Cups.
The complexity of the table markup using the headers attribute is dependent on
the complexity of the table. A data cell can have both a row heading and a
column heading.
The HTML code in the following example modifies the code above. The heading for
10 is A. Smith Cups because the contents of
"name1" is A. Smith, and the contents of "t2" is Cups.
<TR>
<TD headers="t1", id="name1">A.
Smith</TD>
<TD headers="name1 t2">10</TD>
</TR>
| Cups of
coffee consumed by each webmaster |
| Name |
Cups |
Type of Coffee |
Sugar? |
| A.
Smith |
10 |
Espresso |
No |
| B.
Brown |
5 |
Decaf |
Yes |
Provide a summary for tables.
Like "alt" text for images, each <TABLE> element should contain a "summary"
attribute that briefly describes the table structure and purpose. For
example:
<TABLE summary="This table charts the number
of cups of coffee consumed by each webmaster, the type of coffee (decaf or
regular), and whether taken with sugar."> <!--table cells here-->
</TABLE>
Adding a table summary is especially useful for non-visual users.
[See also: text, fonts, language and content layout]
[top of page]
Text, Fonts, Language and Content Layout
Text...
Required:
Use the clearest and simplest language appropriate for a site's content.
- Follow these writing suggestions:
- Use clear and accurate headings and link text.
- Limit each paragraph to one main idea.
- Avoid idiomatic language, technical jargon, and other unfamiliar
vocabulary and expressions.
- Avoid specialized meanings of familiar vocabulary, unless
explanations are provided.
- Avoid the passive voice.
- Avoid complex sentence structures.
- Make link phrases terse yet meaningful enough so they make sense
when read out of context, alone or as part of a series of links.
Recommended:
- Avoid large blocks of italic text.
This can appear 'wobbly' on screen, and is difficult for many people to
read.
- Don't underline text.
Some people find underlined text difficult to read. In addition, since
underlining usually indicates hyperlinked text, it can be confusing for
users if it is used where no link exists.
- Capitalisation of whole sentences should be avoided.
Many people find it difficult to read sentences written in capitals, and
THEY COME ACROSS AS IF THEY ARE BEING SHOUTED VERY LOUDLY!
Layout...
Required:
Use a consistent approach to navigation, page titles, layout and other
forms of presentation.
- Create well-structured web pages using appropriate heading styles.
Don't use headings (eg <H1> <H2> etc) simply to increase text size,
and don't simply use bold or a larger font size to create headings. Some
browsers can present the user with an overview of a web page based on the
headings and sub-headings - this doesn't work if the heading tags have been
used inappropriately, or have not been used when they should be. Search
engines also make use of heading tags to index pages accurately, so use
headings and sub-headings appropriately.
- Use the same layout and design for each page.
So a person with a learning disability (or simply someone in a hurry!)
can more easily navigate through your website.
Recommended:
- Don't be afraid of white space.
Liberal use of white space aids both reader comfort and effective
comprehension.
- Be careful with layouts that produce columns of text on a page.
Ensure that the content of such pages will be read in the correct
sequence when linearised by a screen-reader.
- Do not use tables for layout.
Language...
Required:
Identify the natural language of the page.
- How?
In FrontPage and SharePoint Designer you can set the language for a single
page by selecting File
> Properties, clicking on the Language tab and then selecting
a language.
Recommended:
- Clearly identify changes in the natural language of a document's text
and any text equivalents.
This can be achieved using the LANG attribute, which may be applied to
any element that contains text.
<P>The 1994 two pound coin was engraved with the phrase
<SPAN LANG="LA">Sic vos non
vobis</SPAN>.
Meaning "Thus we labour, but not for ourselves".</P>
The value supplied for the LANG attribute is the two-letter
designation for that language, in this case "LA" for Latin. [This
external site details the codes for the representation of names of languages.]
[top of page]
Validate your pages
There are various ways to check the accessibility of your pages: