Making your web pages accessible

The html templates have been validated to level 1 cynthia compliance, so you can test your web pages for accessibility compliance. Listed below are some common useful changes you can apply to your code to improve web accessibility.

N.B. As with the xhtml validation, we do not have time to check every page!
A good example of a web submission form that conforms to these guidlines is /Tools/clustalw2/

Install web developer into firefox.
Using the the right mouse menu select: Web developer>tools>validate WAI.
You will now get a cynthia report for your chosen web page.

Known Issues/Annoyances

Rule: 10.5 Until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links.
This is a rather annoying rule that effects the breadcrumbs, to validate, you must use a work-around, you must add text between the links, to do this in a hidden fashion (as in the breadcrumbs above, use the following syntax:
```
<div class="breadcrumbs">
   <a href="/" class="firstbreadcrumb">EBI</a>
   <div class="blindspacer">[blind spacer]</div>
   <a href ="/inc/template/guide.html">EBI Style Templates</a>
</div
```

Useful work practices

Rule 5.5 Provide summaries for tables.
provide summary attributes to tables, for example:
```
<table class="footerpane" id="footerpane" 
summary="The main footer pane of the page">
```
It is worth noting, where possible tables should not be used for layout any more, they will pass validation with a summary attribute. Tables should still be used to represent tabular data.
Rule: 1.1.2 - All INPUT elements are required to contain the alt attribute or use a LABEL.
Rule: 9.5 Provide keyboard shortcuts to important links (including those in client-side image maps), form controls, and groups of form controls.
Provide access keys to form elements, for example:
```
<input type="submit" value="Go" accesskey="g" .....etc
```
Rule: 1.1.2 - All INPUT elements are required to contain the alt attribute or use a LABEL.
Provide alt and title attributes to form elements, for example:
```
<input type="reset"  alt="Clear Search Terms"  
title="Clear Search Terms" .....etc
	   
```
Rule: 1.1.2 - All INPUT elements are required to contain the alt attribute or use a LABEL.
Rule: 12.4 Associate labels explicitly with their controls.
Provide label attributes for text that describes form elements, for example:
```
<th><label for="email">Enter Your Email</label></th> .....etc

<td><input type="text" id="email" name="email" 
value="Enter Your Email" />.....etc
```
Rule: 1.1.1 - All IMG elements are required to contain either the alt or the longdesc attribute, for example:
```
<img src="/inc/images/home_data.gif" alt="resources"  ... etc
```
Rule: 4.3 Identify the primary natural language of a document.
Rule: 4.3.2 - The HTML (Root) element must use the 'lang' attribute, for example:
```
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">
```

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">  
@media print {
...etc

Rule: 14.3 Create a style of presentation that is consistent across pages.
This is why we have common templates and stylesheets...

Rule: 1.5.1 - Identify all MAP elements that use the AREA element, for example:

   <img src="/inc/images/home_data.gif" alt="resources"   
   usemap="#Map" style="width: 183px; height: 20px; border: 0" />
   <map name="Map" id="Map">
       <area shape="rect" coords="11,1,129,16" 
       href="/Databases/" target="_top" alt="Databases" />
       <area shape="rect" coords="143,1,182,17" 
       href="/Tools/" target="_top" alt="Tools" />
   </map>

Rule: 1.1.6 - All IFRAME elements are required to contain element content, for example:

<iframe src="/inc/head.html" ... etc>		
  Your browser does not support inline frames or is 
  currently configured not to display inline frames.
  Content can be viewed at actual source 
  page: /inc/head.html
</iframe>

Rule: 3.5 Use header elements to convey document structure and use them according to specification.
These are the default styles and should be used where possible, for example:
Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 7

Useful Links

For more information on accessability, please see http://www.w3.org/WAI/.
Firefox download.
Firefox web developer extension download.

Making your web pages accessible

Known Issues/Annoyances

Useful work practices

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Useful Links