Cross reference with WAI WCAG 1.0 & NDA IT Accessibility Guidelines for Web

To assist those responsible for ensuring conformance to accessibility standards. The guidance offered in the developers section is shown here correlated against the following relevant standards:

It is recommended that all guidance is followed, this should ensure a WAIdouble a (WAI-AA) minimum standard. However, some issues are more important than others, these are indicated in the tables as below:

  • p1p2 - 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

The headings of each section link to the appropriate guidance page, and in the tables below the relevant nda it accessibility for web guideline is also linked for ease of cross reference.

1.0 - Design Basics #1 (non technical)

DEV 1.1 - Be consistent throughout

recommendationwai wcag 1.0 checkpointndacheckpoint
be as consistent as possible, e.g. look, colour, and placement of navigation/recurring items13.4 (p2) / 14.3 (p3)2.5 (p2) / 3.18(p3)

DEV 1.2 - Enhance clarity with good design

recommendationwai wcag 1.0 checkpointnda checkpoint
support information through use of images colour and space14.2 (p3)3.6 (p3)
employ good typography to ease reading  
avoid overdesign - design should enhance, not dominate, information  

DEV 1.3 - Do not convey information with colour alone

recommendationwai wcag 1.0 checkpointnda checkpoint
use colour, but use a non-colour dependent means of providing the information as well2.1 (p1) / 14.3 (p3)1.2 (p1) / 3.18 (p3)

DEV 1.4 - Create contrast between foreground and background

recommendationwai wcag 1.0 checkpointnda checkpoint
use good luminance (brightness) contrast2.2 (p2) / 14.3 (p3)2.1 (p2) / 3.1 (p3)
avoid using complex backgrounds and patterns2.2 (p2) / 14.3 (p3)2.1 (p2) / 3.1 (p3)

DEV 1.5 - Avoid using flashing, flicker and unnecessary animation

recommendationwai wcag 1.0 checkpointnda checkpoint
avoid all forms of flickering and blinking7.1 (p1) / 7.2, 7.3 (p2)1.3 (p1) / 2.22.3(p2)
use other animation with care7.1 (p1) / 7.2, 7.3 (p2)1.3 (p1) / 2.22.3(p2)

DEV 1.6 - Use multimedia with care

recommendationwai wcag 1.0 checkpointnda checkpoint
provide a link to download players13.1 (p2)2.12 (p2)
provide a link to a standalone version if embedding multimedia in a web page1.3, 1.4 (p1)1.41.5 (p1)
provide controls to skip, stop or stop the presentation  
offer different download sizes to cater for all  
provide transcripts1.1 (p1)1.1 (p1)
provide synchronised alternatives1.4, 6.2 (p1)1.51.8 (p1)

DEV 1.7 - Create flexible width design if possible and appropriate

recommendationwai wcag 1.0 checkpointnda checkpoint
if possible and appropriate, design with flexible width3.3, 3.4, 11.2 (p2) (p2)
the design requires testing at a range of resolutions

2.0 - Design basics #2 (technical)

DEV 2.1 - do not use frames

recommendationwai wcag 1.0 checkpointnda checkpoint
do not use frames - use a well designed non-frame navigation structure instead12.1 (p1) / 12.2 (p2)1.11 (p1) / 2.11 (p2)
if you absolutely must use frames design to be as simple as possible and with accessibility in mind12.1 (p1) / 12.2 (p2)1.11 (p1) / 2.11 (p2)

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

recommendationwai wcag 1.0 checkpointnda checkpoint
always use style sheets for formatting6.1 (p1) / 3.3 (p2)1.12 (p1) / 2.5 (p2)
use style sheets for layout as much as possible3.3 (p2)2.5 (p2)

DEV 2.3 - Use javascript wisely

recommendationwai wcag 1.0 checkpointnda checkpoint
do not rely on javascript alone for important content or functionality6.2, 6.3 (p1) / 6.4, 6.5, 8.1, 9.2, 9.3 (p2) (p1) /,2.19 (p2)
javascript enabled content that requires use of the mouse must be accessible without the mouse6.3 (p1) / 6.4, 8.1, 9.2, 9.3 (p2)1.161.15 (p1) /
do not rely solely on client side scripts for form validation, etc.6.3 (p1)1.16 (p1)
avoid use of javascript links1.1 (p1)1.1 (p1)
avoid automatic submission in forms elements6.3 (p1) / 6.4, 8.1, 9.2, 9.3 (p2)1.16 1.15 (p1) / 2.20, (p2)

DEV 2.4 - Do not cause pop-ups or new windows to appear

recommendationwai wcag 1.0 checkpointnda checkpoint
do not cause popups unless essential10.1 (p2)2.30 (p2)
forgivable usage is to help information but always provide a warning, explicit close, and avoid obscuring the original page10.1 (p2)2.30 (p2)

DEV 2.5 - Avoid pages that auto-refresh or auto-redirect

recommendationwai wcag 1.0 checkpointnda checkpoint
avoid auto-redirects7.4 (p2)2.28 (p2)
avoid auto-refresh7.5 (p2)2.29 (p2)

DEV 2.6 - Construct accessible image maps

recommendationwai wcag 1.0 checkpointnda checkpoint
do not use image maps just for the sake of it1.2, 9.1 (p1) / 71.5 (p3)1.131.14 (p1) / 3.2(p3)
always use client-side image maps, never use server-side maps1.2, 9.1 (p1) / 1.5 (p3)1.131.14 (p1) / 3.2(p3)
provide alt text1.1 (p1)1.1 (p1)
use the <title> attribute as well1.1 (p1)1.1 (p1)
avoid very small clickable areas  
add a cue to each area to show that it is clickable  

3.0 - Navigation and orientation

DEV 3.1 - Provide effective navigation based on recognised conventions

recommendationwai wcag 1.0 checkpointnda checkpoint
be consistent with navigation across each page of the site13.4 (p2) / 14.3 (p3)2.15 (p2) / 3.18 (p3)
provide a link back to the homepage from every page  
provide feedback on navigation bars13.5 (p3)3.14 (p3)
be careful with dropdown menus  
make all in-page links easily recognisable  
place in-page links where they are needed  
be careful not to overdo links in body text  
ensure all navigational items can be used with a keyboard1.1, 6.3 (p1) / 6.4, 8.1, 9.3 (p2)1.11.12 1.15 (p1) /2.202.21 (p2)

DEV 3.2 - Provide additional navigational aids

recommendationwai wcag 1.0 checkpointnda checkpoint
provide a site search13.7 (p3)3.15 (p3)
provide a site map / contents list13.3 (p2) / 13.9 (p3)2.14 (p2) / 3.16 (p3)
provide 'breadcrumb' navigation  
provide within page 'contents' navigation  

DEV 3.3 - Make links meaningful

recommendationwai wcag 1.0 checkpointnda checkpoint
avoid 'click here' type terminology13.1 (p2)2.12 (p2)
links should be short, but descriptive13.1 (p2)2.12 (p2)
avoid unnecessary words, 'link to', 'click to' is unnecessary13.1 (p2)2.12 (p2)
provide useful information about the link - file format, size, popup, etc.13.1 (p2)2.12 (p2)
use the link title attribute liberally13.1 (p2)2.12 (p2)
separate adjacent links with a non link printable character10.5 (p3)3.13 (p3)
lists of links should be coded as links13.1 (p2)2.12 (p2)

DEV 3.4 - Allow the user to easily bypass information

recommendationwai wcag 1.0 checkpointnda checkpoint
provide skip links to get to main content13.6 (p3)3.9 (p3)
make the skip link visible if possible13.6 (p3)3.9 (p3)
group other related links and objects together and provide a way to bypass the group13.6 (p3)3.9 (p3)
provide accesskeys9.5 (p3)3.12 (p3)

DEV 3.5 - Create a logical tab order through the page

recommendationwai wcag 1.0 checkpointnda checkpoint
try to ensure that the default tab order is the most logical route9.4 (p3)3.11 (p3)
if you can't get a logical default order then use the tabindex attribute to specify9.4 (p3)3.11 (p3)

4.0 - Content

DEV 4.1 - Use clear and simple language

recommendationwai wcag 1.0 checkpointnda checkpoint
cut out excess words and fluff14.1 (p1)1.6 (p1)
avoid unfamiliar language14.1 (p1)1.6 (p1)
use the active rather than the passive voice14.1 (p1)1.6 (p1)
use an informal, inter-personal style of writing if possible14.1 (p1)1.6 (p1)
avoid 'big' words just for the sake of it14.1 (p1)1.6 (p1)
expand acronyms/abbreviations first time used14.1 (p1)1.6 (p1)

DEV 4.2 - Prioritise information, maximise readability and scanning

recommendationwai wcag 1.0 checkpointnda checkpoint
prioritise the most important information13.8 (p3)3.5 (p3)
enhance content for scanning12.3 (p2)2.8 (p2)
style for readability  
do not use ascii art13.10 (p3)3.17 (p3)

DEV 4.3 - Provide accessible alternatives - don't rely on pdf / word

recommendationwai wcag 1.0 checkpointnda checkpoint
always provide documents in HTML form unless totally unpractical to do so1.1 (p1) / 11.1 (p2)1.1 (p1) / 2.26 (p2)

5.0 - HTML coding

DEV 5.1 - Include this stuff at the top

recommendationwai wcag 1.0 checkpointnda checkpoint
specify a valid document type definition (dtd)3.2, 11.1 (p2)2.232.26 (p2)
identify the primary natural language4.3 (p3)3.4 (p3)
provide unique and meaningful titles for each page13.1 (p2)2.12 (p2)
provide metadata13.2 (p2) / 11.3, 13.9.(p3)2.13 (p2) / 3.203.16(p3)

DEV 5.2 - Construct proper headings

recommendationwai wcag 1.0 checkpointnda checkpoint
use <h1><h2> ... <h6> to provide structure to web pages3.5 (p2)2.7 (p2)
don't use heading markup just to produce presentational effects (if they are not headings)3.5 (p2)2.7 (p2)

DEV 5.3 - Define list and list items properly

recommendationwai wcag 1.0 checkpointnda checkpoint
if something is a list, always code it as one3.6 (p2)2.24 (p2)
avoid using inline images to create list effects, use lists and style using css3.3, 3.6 (p2)2.52.24 (p2)
always use <ul><ol><dl> properly3.6 (p2)2.24 (p2)
use css to alter appearance of bullets and numbers3.3, 3.6 (p2)2.52.24 (p2)

DEV 5.4 - Use lang, abbr, acronym to embed useful information

recommendationwai wcag 1.0 checkpointnda checkpoint
identify changes in the natural language of the document4.1 (p1)1.7 (p1)
use <acronym> and <abbr> to expand all acronyms and abbreviations using the title attribute4.2 (p3)3.3 (p3)

DEV 5.5 - Use structural and semantic markup properly and validate code

recommendationwai wcag 1.0 checkpointnda checkpoint
use structural / semantic markup wherever possible to add meaning to a page11.1 (p2)2.26 (p2)
do not misuse structural / semantic markup for presentation effects3.7 (p2)2.25 (p2)
do not use presentation elements to simulate structure3.5 (p2)2.7 (p2)
do not use deprecated features of html11.2 (p2)2.27 (p2)
write HTML and css according to the specified standards3.2 (p2)2.23 (p2)
ensure all code is validated against the appropriate standard3.2 (p2)2.5 (p2)

DEV 5.6 - Use relative font sizing, not absolute units

recommendationwai wcag 1.0 checkpointnda checkpoint
to size text use font size keywords, percentage and em values, do not use px, pt, cm3.4 (p2)2.6 (p2)
do not use px, pt, cm3.4 (p2)2.6 (p2)
put all style information in style sheets - do not use the deprecated <font> tag3.3, 11.2 (p2)2.52.27 (p2)

6.0 - Images

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

recommendationwai wcag 1.0 checkpointnda checkpoint
use the alt attribute for every image1.1 (p1)1.1 (p1)
alt text should serve the same purpose and convey the same meaning as the image1.1 (p1)1.1 (p1)
avoid adding extra meaningless alt text1.1 (p1)1.1 (p1)
for icon with text link in same anchor tag use alt="" for the icon1.1 (p1)1.1 (p1)

DEV 6.2 - Provide full descriptions for informational images

recommendationwai wcag 1.0 checkpointnda checkpoint
add a longer description for complex images like charts, diagrams, and graphs1.1 (p1)1.1 (p1)
if providing a description on a separate page, the resulting linked page should contain a clear title, appropriate description, and link back1.1 (p1)1.1 (p1)
description should convey the essential information that the image is trying to provide - don't over do it if unnecessary1.1 (p1)1.1 (p1)

DEV 6.3 - Avoid using images to display text

recommendationwai wcag 1.0 checkpointnda checkpoint
if possible always use text rather than images of text3.1, 11.1 (p2)2.222.26 (p2)
avoid putting essential text within an image3.1, 11.1 (p2)2.222.26 (p2)
avoid putting large paragraphs of text within an image3.1, 11.1 (p2)2.222.26 (p2)
avoid using images of text for important navigation (menus, etc.)3.1, 11.1 (p2)2.222.26 (p2)

DEV 6.4 - Use the correct image format for the job

recommendationwai wcag 1.0 checkpointnda 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 art13.10 (p3)3.17 (p3)

7.0 - Forms

DEV 7.1 Simplify form design, use good spacing and sensible grouping

recommendationwai wcag 1.0 checkpointnda checkpoint
ask for only the information you require - avoid form bloat14.1 (p1)1.6 (p1)
create a clear path through the form  
group similar items together, and order logically2.8 (p2)2.8 (p2)
position form labels close to the input elements - avoid large gaps2.8 (p2)2.8 (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  
avoid use of the reset button  
do not use javascript 'jump menus'1.16 (p1)1.16 (p1)

DEV 7.2 Label every single form element

recommendationwai wcag 1.0 checkpointnda checkpoint
every form input element must have a label10.2 (p2)2.17 (p2)
explicitly associate each label with its input element12.4 (p2)2.16 (p2)
use the title attribute liberally12.4 (p2)2.16 (p2)
position labels properly - text and select items left or above, radio buttons and check boxes to the right10.2 (p2)2.17 (p2)
make labels unambiguous - make the text as direct and unambiguous as possible  

DEV 7.3 Enhance forms with special HTML mark up

recommendationwai wcag 1.0 checkpointnda checkpoint
labels (explicit)10.2, 12.4 (p2)2.172.16 (p2)
grouping (fieldset/legend)12.3 (p2)2.8 (p2)
tabbing order (tabindex)9.4 (p3)3.11 (p3)
buttons (use standard submit if possible)  

DEV 7.4 Prevent errors and assist recovery from errors by providing supportive information

recommendationwai wcag 1.0 checkpointnda checkpoint
provide required information indicators  
provide brief and clear instructions at the start of the form14.1 (p1)1.6 (p1)
be careful with timeoutsimportantimportant
provide required format instructions / examples  
provide meaningful and useful error messagesimportantimportant
indicate the location of errors on the form itself  

8.0 - Tables

DEV 8.1 - Data tables: simplify and mark up with special html

recommendationwai wcag 1.0 checkpointnda checkpoint
use the most simple data table possibleloosely 5.1, 5.2 (p1)loosely 1.91.10 (p1)
code for added accessibility - use <th>,<caption><summary><scope> - explicitly associate row and column headers with data cells5.1, 5.2 (p1) / 5.5, 5.6 (p3)1.91.10 (p1) / 3.7,3.8 (p3)

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

recommendationwai wcag 1.0 checkpointnda 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 row5.3 (p2)2.9 (p2)
do not use <th> or other structural tags for layout purposes - use css instead3.3, 5.4 (p2)2.52.10 (p2)
use the summary attribute to describe the purpose of the section5.5 (p3)3.7 (p3)
use relative sizing wherever possible to create a fluid width3.4 (p2)2.6 (p2)