Guidelines v WAI WCAG 1.0

To assist those responsible for designing, developing and auditing Web sites with ensuring conformance to Web Accessibility Inititive (WAI) standards for accessibility.

It is recommended that ALL guidelines are followed = WAI-AA (minimum)
However, some issues are more important than others, this indicated below
- P1, P2 - indicates high importance - necessary to achieve required standard (WAI-AA)
- P3 - useful to accessibility - necessary to achieve WAI-AAA standard
- IMPORTANT - highly recommended
- [blank] - recommended if possible

1.0 - Consistency

1.1 - Be consistent throughout

Recommendation	WAI WCAG 1.0 checkpoint
Be consistent wherever possible, e.g. look, colour, and placement of navigation/recurring items	13.4 (P2) / 14.3 (P3)

2.0 - Design for Designers

2.1 - Enhance clarity with good design

Recommendation	WAI WCAG 1.0 checkpoint
Use images, colour, and space to support the information	14.2 (P3)
Employ good typography to ease reading
Only use Flash, animation, and multimedia with good reason - not for the sake of it
Avoid overdesign - go for clean, clear, crisp and classy

2.2 - Do not convey information with colour alone

Recommendation	WAI WCAG 1.0 checkpoint
Indicate information using context or markup as well as colour	2.1 (P1) / 14.3 (P3)

2.3 - Create contrast between foreground and background

Recommendation	WAI WCAG 1.0 checkpoint
Differentiate fore and background with good contrast	2.2 (P2) / 14.3 (P3)
Choose opposing colours on the colour wheel	2.2 (P2) / 14.3 (P3)

2.4 - Avoid using flashing, flicker and unnecessary animation

Recommendation	WAI WCAG 1.0 checkpoint
Avoid all forms of flickering and blinkings	7.1 (P1) / 7.2, 7.3 (P2)
Use other animation with care	7.1 (P1) / 7.2, 7.3 (P2)

2.5 - Use multimedia with care

Recommendation	WAI WCAG 1.0 checkpoint
Use multimedia with care	1.3, 1.4 (P1)
Provide transcripts	1.1 (P1)
Provide synchronised alternatives	6.2 (P1)

2.6 - Create flexible width design if possible and appropriate

Recommendation	WAI WCAG 1.0 checkpoint
If possible and appropriate, design with flexible width	3.3, 3.4, 11.2 (P2)
The design requires testing at a range of resolutions

3.0 - Design for Developers

3.1 - Do not use frames

Recommendation	WAI WCAG 1.0 checkpoint
Do not use frames - Use a well designed non-frame navigation structure instead	12.1 (P1) / 12.2 (P2)

3.2 - Use style sheets to control all formatting, and layout where possible

Recommendation	WAI WCAG 1.0 checkpoint
Always use style sheets for formatting	6.1 (P1) / 3.3 (P2)
Use style sheets for layout as much as possible	3.3 (p2)

3.3 - Use JavaScript wisely

Recommendation	WAI WCAG 1.0 checkpoint
Important content or functionality should not rely on JavaScript alone	6.2, 6.3 (P1) / 6.4, 6.5, 8.1, 9.3 (P2)
JavaScript enabled content that requires use of the mouse must be accessible without the mouse	6.3 (P1) / 6.4, 8.1, 9.3 (P2)
Use redundant server side scripts as well as client side scripts for form validation, etc.	6.3 (P1)
Avoid use of JavaScript links	1.1 (P1)
Avoid automatic submission of forms, etc.	6.3 (P1) / 6.4, 8.1, 9.3 (P2)

3.4 - Do not cause pop-ups or new windows to appear

Recommendation	WAI WCAG 1.0 checkpoint
Do not use popups unless essential	10.1 (P2)

3.5 - Avoid pages that auto-refresh or auto-redirect

Recommendation	WAI WCAG 1.0 checkpoint
Avois pages that auto-refresh or auto-direct	7.4, 7.5 (P2)

3.6 - Construct accessible image maps

Recommendation	WAI WCAG 1.0 checkpoint
Do not use image maps just for the sake of it	1.2, 9.1 (P1) / 7.5 (P3)
Always use client-side image maps, never use server-side maps	1.2, 9.1 (P1) / 7.5 (P3)
Provide alt text	1.1 (P1)
Provide the `<title>` attribute	1.1 (p1)
Avoid very small clickable areas
Try to add a cue to each area to show that it is clickable

4.0 - Navigation and orientation

4.1 - Provide effective navigation based on recognised conventions

Recommendation	WAI WCAG 1.0 checkpoint
Be consistent with navigation across each page of the site	13.4 (P2) / 14.3 (P3)
Provide a link back to the homepage from every page
Navigation menus - use bars - make them distinct from rest of content.	13.5 (P3)
In page links - must be easily recognisable as links. Provide in appropriate places
Avoid cascading menus
Ensure navigational links/menus can be accessed using keyboard as well as the mouse	1.1, 6.3 (P1) / 6.4, 8.1, 9.3 (P2)

4.2 - Provide additional navigational aids

Recommendation	WAI WCAG 1.0 checkpoint
Provide a Site Search	13.7 (P3)
Provide a site map / contents list	13.3 (P2) / 13.9 (P3)
Provide 'breadcrumb' navigation
Provide within page 'contents' navigation

4.3 - Make links meaningful

Recommendation	WAI WCAG 1.0 checkpoint
Avoid 'click here' type terminology	13.1 (P2)
Links should be short, but descriptive (fully explain their purpose)	13.1 (P2)
Don't overdo it - 'link to...', etc. is unecessary
Provide useful information about the link - file format, size, popup, etc.	13.1 (P2)

4.4 - Allow the user to easily bypass information

Recommendation	WAI WCAG 1.0 checkpoint
Provide skip links to get to main content	9.5 (P3)
Group other related links and objects together and provide a way to bypass the group	9.5 (P3)
Provide Accesskeys	9.5 (P3)

4.5 - Create a logical tab order through the page

Recommendation	WAI WCAG 1.0 checkpoint
Try to ensure that the default tab order is the most logical route, otherwise use tabindex to specify	9.4 (P3)

5.0 - Content

5.1 - Use clear and simple language

Recommendation	WAI WCAG 1.0 checkpoint
Be minimalist, cut out excess words and fluff	14.1 (P1)
Avoid unfamiliar language	14.1 (P1)
Use the active rather than passive voice	14.1 (P1)
Use an informal, inter-personal style of writing if possible	14.1 (P1)
Avoid 'big' words just for the sake of it	14.1 (P1)
Expand acronyms/abbreviations first time used	14.1 (P1)

5.2 - Prioritise information, maximise readability and scanning

Recommendation	WAI WCAG 1.0 checkpoint
Prioritise the most important information	13.8 (P3)
Enhance content for scanning	12.3 (P2)
Style for readability
Do not use ascii art	13.10 (P3)

5.3 - Provide accessible alternatives - don't rely on PDF / Word

Recommendation	WAI WCAG 1.0 checkpoint
Always provide documents in HTML form unless totally unpractical to do so	1.1 (P1)

6.0 - HTML coding

6.1 - Include this stuff at the top

Recommendation	WAI WCAG 1.0 checkpoint
Specify a valid Document Type Definition (DTD)	3.2, 11.1 (P2)
Identify the primary natural language	4.3 (P3)
Provide unique and meaningful titles for each page	13.1 (P2)
Provide metadata	13.2 (P2) / 11.3, 13.9.(P3)

6.2 - Construct proper headings

Recommendation	WAI WCAG 1.0 checkpoint
Provide structure with `<h1>`, `<h2>` ... `<h6>`	3.5 (P2)
All pages should include `<h1>` for the primary page heading	3.5 (P2)
There should only be one heading coded with `<h1>` on a page	3.5 (P2)
Avoid skipping levels, e.g. `<h1>`, `<h3>` should not follow sequentially, if possible	3.5 (P2)
Style with css - don't use presentational markup to simulate headings	3.3, 3.5 (P2)
Don't use heading markup just to produce presentational effects (if they are not headings)	3.5 (P2)

6.3 - Define list and list items properly

Recommendation	WAI WCAG 1.0 checkpoint
If something is a list, code it as one, avoid using inline images to create list effects - spacers, bullets, etc.	3.6 (P2)
Always use `<ul>`, `<ol>`, `<dl>` properly	3.6 (P2)
Use css to alter appearance of bullets and numbers	3.3, 3.6 (P2)
Ensure correct syntax when embedding a list within a list	3.6 (P2)

6.4 - Use HTML to help indicate useful information

Recommendation	WAI WCAG 1.0 checkpoint
Identify changes in the natural language of the document	4.1 (P1)
Use `<acronym>` and `<abbr>` to expand all acronyms and abreviations using the title attribute	4.2 (P3)

6.5 - Use structural and semantic markup properly and validate code

Recommendation	WAI WCAG 1.0 checkpoint
Use the structural markup wherever possible to add meaning to a page	3.1 (P2)
Do not use semantic markup for presentation effects	3.7 (P2)
Do not use presentation elements to simulate structure	3.5 (P2)
Use CSS where possible	3.3 (P2)
Do not use deprecated features of HTML	11.2 (P2)
Write HTML and CSS according to the specified standards - validate against those standards	3.2 (P2)

6.6 - Use relative font sizing, not absolute units

Recommendation	WAI WCAG 1.0 checkpoint
To size text use percentage and em values, do not use px, pt, cm	3.4 (P2)
Put all style information in style sheets - do not use the deprecated `<font>` tag, avoid inline styles unless absolutely necessary	3.3, 11.2 (P2)

7.0 - Images

7.1 - All images must have alt text to convey the equivalent information

Recommendation	WAI WCAG 1.0 checkpoint
Use the alt attribute for every image	1.1 (P1)
Alt text should serve the same purpose and convey the same meaning as the image	1.1 (P1)
Avoid meaningless alt text - "photo", "image".	1.1 (P1)
Don't over do it - "Image of...", "link to..."is not necessary	1.1 (P1)
For icon with text link in same anchor tag use alt=""	1.1 (P1)

7.2 - Provide full descriptions for informational images

Recommendation	WAI WCAG 1.0 checkpoint
Add a longer description for complex images like charts, diagrams, and graphs	1.1 (P1)
Description should convey the essential information that the image is trying to provide - don't over do it if unnecessary	1.1 (P1)

7.3 - Avoid using images to display text

Recommendation	WAI WCAG 1.0 checkpoint
If possible always use text rather than images of text	11.1 (P2)
Never put essential text within an image	11.1 (P2)
Do not put large paragraphs of text within an image	11.1 (P2)
Avoid for important navigation (menus, etc.)	11.1 (P2)

7.4 - Use the correct image format for the job

Recommendation	WAI WCAG 1.0 checkpoint
Choose the correct format for the job - JPEGS for photographs, GIFs for line art
Optimise the image - balance file size/quality
Do not use ascii art	13.10 (P3)

8.0 - Forms

8.1 Simplify form design, use good spacing and sensible grouping

Recommendation	WAI WCAG 1.0 checkpoint
Ask for only the information you require - avoid form bloat	14.1 (P1)
Create a clear path through the form
Group similar items together, and order logically	12.3 (P2)
Space form labels close to the input elements - avoid large gaps	12.3 (P2)
Use the simplest form element for the job, e.g. drop down option box may be easier than a long array of radio buttons
Never use the reset button - it is never necessary, and liable to get selected by mistake
Do not use JavaScript 'jump menus' - option boxes that auto submit - these cannot be used using the keyboard alone	6.3 (P1)

8.2 Provide labels for every form element, place correctly, explicitly associate

Recommendation	WAI WCAG 1.0 checkpoint
Every form input element must have a label	10.2 (P2)
Use the label tag to explicitly associate each label with its input element	12.4 (P2)
Use the title attribute liberally	12.4 (P2)
Position labels properly - text and select items left or above, radio buttons and check boxes to the right	10.2 (P2)
Select unambiguous labels - make the label as self explanatory as possible

8.3 Enhance forms with special HTML mark up

Recommendation	WAI WCAG 1.0 checkpoint
Labels (explicit)	10.2, 12.4 (P2)
Grouping (fieldset/legend)	12.3 (P2)
Tabbing order (tabindex)	9.4 (P3)
Buttons (use standard submit if possible)

8.4 Prevent errors and assist recovery from errors by providing supportive information

Recommendation	WAI WCAG 1.0 checkpoint
Provide required field indicators
Provide brief and clear instructions at the start of the form	14.1 (P1)
Where there are time limitations ensure that there is the possibility to request more time	IMPORTANT
Provide required format examples - before the input, within the label tab
Provide meaningful and useful error messages	IMPORTANT
Indicate the location of errors on the form itself

9.0 - Tables

9.1 - Data tables: simplify and mark up with special HTML

Recommendation	WAI WCAG 1.0 checkpoint
Simplify data tables - a couple of simple tables are much easier to understand (and code) than one complex one	loosely 5.1, 5.2 (P1)
Code for accessibility - use `<th>`, `<caption>`, `<summary>`, `<scope>` - explicitly associate row and column headers with data cells	5.1, 5.2 (P1) / 5.5, 5.6 (P3)

9.2 - Layout tables: ensure correct readout order, avoid complicated nesting, describe with summary attribute

Recommendation	WAI WCAG 1.0 checkpoint
Avoid complex and nested tables - aim for as simple a structure as possible
Ensure the linear reading order makes sense - top left to bottom right, row by row	5.3 (P2)
Do not use `<th>` or other structural tags for layout purposes - use css	3.3, 5.4 (P2)
Describe the purpose of the section using the summary attribute	5.5 (P3)
Use relative sizing	3.4 (P2)