With the redesign of the Anglia Ruskin University website in 2000 we decided that our webpages should be accessible to all, and to this end have ensured we meet with the Double-A level of conformance from the W3C Web Accessibility Guidelines.Our pages also meet the Bobby stamp of approval, a Web-based tool that analyzes Web pages for their accessibility to people with disabilities. If you do have any problems viewing our pages please get in touch with the web-team.
To maintain accessibility we have drawn up a series of guidelines that staff members should follow when creating webpages and new sites. In simplified form they are incorporated into our web authoring practices, but if you want to get the full picture from which these practices have derived, then read on...
Ensure your content is accessible to the visually and physically impaired community. We are striving to only publish pages that conform to the Double-A level of accessibility. Reading these guidelines and following its recommendations should help to ensure this. If you are worried your pages are not accessible, please contact the web-team.
The W3 Web Content Accessibility Guidelines 1.0 lay out good practice guidelines for the authoring of web content. The guidelines are split into three levels of accessibility and range from basic requirements (level A) to quite complex requirements (level AAA). It is our aim that Anglia Ruskin University websites should meet a minimum requirement of the Double-A level of conformance (ie. Level A & Level AA). As well as reading and acting on the information presented here, you are advised to read about and use the TechDis project evaluation tools and techniques.
To check that your webpage/s meet the level of conformance you will need to consult the WAI Checklist and ensure your webpage meets the requirements. Once your webpage has been proved to do so, you can display the W3 web accessibility logo on your page. It is advisable to put this logo on each and every page that meets the requirements, the necessary HTML can be found at the foot of the page.
Always provide a text equivalent where the webpage uses non-textual means to convey information. This means use the alt attribute for all images, even buttons, and textual image logos. If you use spacer images that convey no meaning you can use alt="" which should be ignored by text-to-speech readers.
If you also have many image links on one line, or within one table cell, you can make the alt text more legible by including punctuation (see the top-right navigation bar for an example of this)
You should also provide textual equivalents for Flash animations, applets and multimedia (eg. video/audio). Use the title attribute to aid the identification of frames.
Avoid making the screen flicker, either via animations, the BLINK tag or other means.
If you use style sheets, ensure the page can be read without the associated style sheet.
For data tables identify row and column headers with the TH tag.
Identify where the natural language of a page changes by using the LANG attribute. For example, if you have a paragraph of French halfway down your page, use <p lang="fr"> to identify this to the browser. More can be found out about language in HTML at the W3 site.
Ensure you use clear and simple language so that the information on your page is easily understood. Remember that webpages are displayed on monitors that emit light. The common user will be unwilling to read large amounts of text on screen so it is in your interest to make the information on your webpage clear and succinct. A good working guideline is that screen text should be no more than 50% of the length of its equivalent printed version.
Try to use client-side image maps rather than server-side ones (eg. the co-ordinates should be within the HTML).
If you do use server-side imagemaps, then provide textual links. One way to do this is via the OBJECT tag. Otherwise repeat the links after the imagemap and refer to them in the imagemaps ALT attribute:
<A href="http://myserver.com/cgi-bin/imagemap/my-map"><IMG src="welcome.gif" alt="Welcome! (Text links follow)" ismap></A>
[<A href="media.html">Audio Visual Lab</A>]
You can use the OBJECT tag to provide textual links for imagemaps (in this case, a client-side imagemap):
<OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
<P>Navigate the site.
[<A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</A>]
[<A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A>]
[<A href="search.html" shape="circle" coords="184.200,60">Search</A>]
[<A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>]
In this example the textual links only appear if the navbar1.gif image (in OBJECT) does not.
If all else fails
Do ensure that any textual equivalents (eg. text-only pages) are updated as often as their original source.
A web developer should satisfy this level otherwise one or more groups will find it difficult to access information on your webpage. Satisfying this level removes significant barriers for accessibilty.
Ensure there is a contrast between the background and text colours. If you use colour to identify information, ensure that information is available without colour (eg. think how your webpage would display on a black and white monitor).
Use markup instead of images wherever possible (eg. use a heading H1 rather than a image logo for page titles).
Use header elements to convey document structure (eg. H1 for a page title, H2 for a sub-section).
Provide a site map to give information about the general structure of a site.
Be consistent with any navigation mechanisms.
Do not use the FONT tag, instead use style sheets to control layout and presentation. Although it is advisable not to use exact positioning because of the lack of support on many browsers.
Use relative instead of exact units in markup and style sheets (eg. have a 100% wide table rather than one which is 600 pixels wide. This way the page will display better when the window size of the browser changes).
Use markup properly (eg. do not use BLOCKQUOTE for text indentation. It is intended to markup a quote and if misused may lead to misinterpretation by some browsers).
Do not use tables for layout unless they make sense when linearized. When linearized, tables are displayed in seperate paragraphs down the page in the order in which they are defined in the original HTML.
If you do use tables for layout do not use any structural markup for the purpose of visual formatting (eg. TH defines a cell header, do not use this if the table is not used for data).
Note: The following guideline is Triple-A level, but one that should be followed to ensure good accessibility.
If you have cells horizontally next to each other, with wrapped text side-by-side, provide a linear text alternative. This is because some user agents render side-by-side text incorrectly, running across the page simply from left to right. To get a better understanding of how a screen reader would read a table, run a piece of paper down the page and read your table line by line.
Use NOFRAMES at the end of every frameset with a textual equivalent of the frame content, including links.
Describe the purpose of frames, and how each frame relates to each other, if it is not obvious from the frame TITLE alone. You can use LONGDESC to achieve this. See the W3 page on how to provide textual equivalents for frames.
Ensure the label for a form control (eg. radio button) appears immediately before the control on the page. If there is more than one control per line, ensure the label appears directly before the control on the same line.
Associate labels explicitly with their controls. You can achieve this by using the LABEL tag. Eg. <LABEL for="user" accesskey="U">name</LABEL> <INPUT type="text" id="user">
The accesskey attribute is another way of improving accessibility. If is is assigned, in this case to "U", then when alt+U is pressed the focus will go to the associated label, (Internet Explorer Specific) which in turn gives focus to the associated control. Try it with this example (copied from above):
Clearly identify links with descriptive text, not just "click on this link".
Do not include movement in a webpage unless there is a control to stop or pause it.
Do not use non-standard HTML or markup that is deprecated in HTML 4 (eg. do not use BLINK, MARQUEE, IFRAME among others).
Do not use markup to cause the page to automatically redirect pages. Instead, use a server-side solution (contact the web support officer for assistance).
Do not cause pop-up windows to appear without first informing the user.
Do not create periodically auto-refreshing pages.
A web developer may satisfy this level otherwise one or more groups will find it somewhat difficult to access information on your webpage. Satisfying this level improves access to webpages.
The Triple-A level of conformance suggests many wide-ranging user interface controls, such as defining the language of content, using new HTML 4 markup to provide more textual information with links and form objects, and a good deal of common sense design.
I shan't be detailing the Triple-A level since it goes into quite a lot of technical detail on HTML and since Anglia Ruskin University is aiming to have its webpages conforming to the Double-A level, it is not of immediate relevance here. Please do take a look at the WAI Checklist where more details, and links to more information, on the Triple-A level appear.
You can only use the appropriate W3 logo if your webpage meets the requirements of that level. An easy way to gauge whether your page conforms to the guidelines is to use the WAI Checklist. To confirm that your webpage/s meet the requirements, please email the web support officer on: firstname.lastname@example.org
Just cut-and-paste the following HTML and insert it into each webpage that meets the guidelines.
Put the following HTML markup in your page:
<a href="http://www.w3.org/WAI/WCAG1A-Conformance" title="Explanation of Level A Conformance"><img height="32" width="88" src="http://www.w3.org/WAI/wcag1A" alt="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0"></a>
Put the following HTML markup in your page:
<a href="http://www.w3.org/WAI/WCAG1AA-Conformance" title="Explanation of Level Double-A Conformance"><img height="32" width="88" src="http://www.w3.org/WAI/wcag1AA" alt="Level Double-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0"></a>
Put the following HTML markup in your page:
Go to right hand side links
go to local menu
Go to main menu
<a href="http://www.w3.org/WAI/WCAG1AAA-Conformance" title="Explanation of Level Triple-A Conformance"><img height="32" width="88" src="http://www.w3.org/WAI/wcag1AAA" alt="Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0"></a>