Guidelines for publishing Accessible Web pages
publishing guidelines
General Advice
The 3 main accessibility themes highlighted by the WAI
Accessibility Guidelines are
- Make sure your web page consists of valid HTML. This enables
user-agents to parse the HTML and hence make sense of the markup and take
the appropriate actions e.g. screen readers. Use validation
checkers to test the validity of your web pages.
- Use HTML tags for the purpose for which they were intended and not
for presentation. For example, do not use <blockquote> to simply
provide a margin or <p></p> to simply create white space. <h2>
is a subheading of an <h1> heading; do not use it just to provide enlarged
text.
- Separate structure from style and presentation.
Put structure into the
web page using HTML. Use style sheets (CSWeb provides this automatically)
and in-page style options.
Quick Tips
Here are some additional things you can do to greatly improve the accessibility
of your web page:
| Do's |
|
Don'ts |
- Use end tags.
Use end tags even when they aren't mandatory
e.g.<p>paragraph</p>, <td>table data cell</td>,
<li>list item</li>
- Do not use the deprecated<FONT> tag.
The <FONT> tag was used to amend the color or size of text but
is now deprecated.
-
Coloured text.
Avoid providing coloured text. If you must, then colour should be
achieved using the CSWeb style sheet or inline span and style elements,
e.g.
The <span style="color:#CC0066;">Computer Science</span>
web site
produces The Computer
Science web site.
<p style="color:#CC0066;">The Computer Science web site
...... </p>
produces
The Computer Science web site ......
The best way to produce text in the house style colours of red or
blue is to use the relevant CSWeb style class (cs or cs2), e.g.
Use <span class="cs">red</span> or <span
class="cs2">blue</span> text
produces Use red or blue
text
- Text size.
Always avoid changing font size. If you must then use relative attribute
values, not absolute values e.g. % and em in style
sheets, not pt and cm.
- Place distinguishing text at the beginning of headings, paragraphs
and lists.
This enables a user to quickly and easily determine if the page, or
section within the page, is useful to them. If not, they can choose
to skip over it.
- Links.
Clearly identify the target of each link. e.g. use validation
checker and not click here
as the link text.
Users may tab between links so try to put them in a sensible tab order.
Be consistent and use the same link text for multiple links to the same
target.
- Use markup rather than images to convey meaning.
- Images, Image maps and other Non-text elements.
Always use the ALT or the LONGDESC tag attributes to provide text equivalents
for non-text elements. Use text which is appropriate to the context.
Non-text elements include images, icons, graphical buttons, image maps,
animation, applets, video, audio and scripts. Examples:
- <img src="aii_members.gif" alt="Members of the AII research
group on a research away day">
- <a href="http://www.kent.ac.uk">
<img src="ukc.gif" alt="Go to the University of Kent web site">
</a>
- Use spell/grammar checkers.
User-agents work more reliably with correct spelling and grammar.
- If you can't produce an accessible page, provide a (text
only) alternative web page and link to it from your HTML page
|
|
-
- Do not use 'click here'.
Provide clearly labeled links with meaningful text
- Always avoid changing font size.
Better to let the reader set the font size according to their own
requirements.
- Avoid using coloured text.
Better to let the reader set foreground and background colours.
- Do not use frames.
They cause difficulties with navigation and printing and cause search
engines indexing problems.
- Do not use blinking, moving text, scrolling text,
auto-updating web pages.
- Do not use in-page redirection.
Ask cs-webmaster to
include redirection instructions in the CSWeb server instead.
|
Additional advice for specific conditions
Publishing
accessible web pages for the visually impaired
Useful Links
