Web accessibility techniques
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:
- Web Accessibility Initiative (WAI) standards for accessibility - currently the Web Content Accessibility Guidelines 1.0
- Irish National Disability Authority (NDA) IT Accessibility Guidelines - Accessibility Guidelines for Web
It is recommended that ALL guidance is followed, this should ensure a WAI Double A (WAI-AA) minimum standard. However, some issues are more important than others, these are indicated in the tables as 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
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
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Be as consistent as possible, e.g. look, colour, and placement of navigation/recurring items | 13.4 (P2) / 14.3 (P3) | 2.5 (P2) / 3.18 (P3) |
DEV 1.2 - Enhance clarity with good design
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Support information through use of images colour and space | 14.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
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Use colour, but use a non-colour dependent means of providing the information as well | 2.1 (P1) / 14.3 (P3) | 1.2 (P1) / 3.18 (P3) |
DEV 1.4 - Create contrast between foreground and background
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Use good luminance (brightness) contrast | 2.2 (P2) / 14.3 (P3) | 2.1 (P2) / 3.1 (P3) |
| Avoid using complex backgrounds and patterns | 2.2 (P2) / 14.3 (P3) | 2.1 (P2) / 3.1 (P3) |
DEV 1.5 - Avoid using flashing, flicker and unnecessary animation
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Avoid all forms of flickering and blinking | 7.1 (P1) / 7.2, 7.3 (P2) | 1.3 (P1) / 2.2, 2.3 (P2) |
| Use other animation with care | 7.1 (P1) / 7.2, 7.3 (P2) | 1.3 (P1) / 2.2, 2.3 (P2) |
DEV 1.6 - Use multimedia with care
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Provide a link to download players | 13.1 (P2) | 2.12 (P2) |
| Provide a link to a standalone version if embedding multimedia in a web page | 1.3, 1.4 (P1) | 1.4, 1.5 (P1) |
| Provide controls to skip, stop or stop the presentation | ||
| Offer different download sizes to cater for all | ||
| Provide transcripts | 1.1 (P1) | 1.1 (P1) |
| Provide synchronised alternatives | 1.4, 6.2 (P1) | 1.5, 1.8 (P1) |
DEV 1.7 - Create flexible width design if possible and appropriate
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| If possible and appropriate, design with flexible width | 3.3, 3.4, 11.2 (P2) | 2.5, 2.6, 2.27 (P2) |
| The design requires testing at a range of resolutions |
2.0 - Design basics #2 (technical)
DEV 2.1 - Do not use frames
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Do not use frames - Use a well designed non-frame navigation structure instead | 12.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 mind | 12.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
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Always use style sheets for formatting | 6.1 (P1) / 3.3 (P2) | 1.12 (P1) / 2.5 (P2) |
| Use style sheets for layout as much as possible | 3.3 (P2) | 2.5 (P2) |
DEV 2.3 - Use JavaScript wisely
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Do not rely on JavaScript alone for important content or functionality | 6.2, 6.3 (P1) / 6.4, 6.5, 8.1, 9.2, 9.3 (P2) | 1.8, 1.16, 1.15 (P1) / 2.20, 2.4, 2.21, 2.18, 2.19 (P2) |
| JavaScript enabled content that requires use of the mouse must be accessible without the mouse | 6.3 (P1) / 6.4, 8.1, 9.2, 9.3 (P2) | 1.16, 1.15 (P1) / 2.20, 2.21, 2.18, 2.19 (P2) |
| Do not rely solely on client side scripts for form validation, etc. | 6.3 (P1) | 1.16 (P1) |
| Avoid use of JavaScript links | 1.1 (P1) | 1.1 (P1) |
| Avoid automatic submission in forms elements | 6.3 (P1) / 6.4, 8.1, 9.2, 9.3 (P2) | 1.16 1.15 (P1) / 2.20, 2.21, 2.18, 2.19 (P2) |
DEV 2.4 - Do not cause pop-ups or new windows to appear
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Do not cause popups unless essential | 10.1 (P2) | 2.30 (P2) |
| Forgivable usage is to help information but always provide a warning, explicit close, and avoid obscuring the original page | 10.1 (P2) | 2.30 (P2) |
DEV 2.5 - Avoid pages that auto-refresh or auto-redirect
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Avoid auto-redirects | 7.4 (P2) | 2.28 (P2) |
| Avoid auto-refresh | 7.5 (P2) | 2.29 (P2) |
DEV 2.6 - Construct accessible image maps
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Do not use image maps just for the sake of it | 1.2, 9.1 (P1) / 71.5 (P3) | 1.13, 1.14 (P1) / 3.2 (P3) |
| Always use client-side image maps, never use server-side maps | 1.2, 9.1 (P1) / 1.5 (P3) | 1.13, 1.14 (P1) / 3.2 (P3) |
| Provide alt text | 1.1 (P1) | 1.1 (P1) |
Use the <title> attribute as well |
1.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
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Be consistent with navigation across each page of the site | 13.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 bars | 13.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 keyboard | 1.1, 6.3 (P1) / 6.4, 8.1, 9.3 (P2) | 1.1, 1.12 1.15 (P1) / 2.20, 2.21 (P2) |
DEV 3.2 - Provide additional navigational aids
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Provide a Site Search | 13.7 (P3) | 3.15 (P3) |
| Provide a site map / contents list | 13.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
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Avoid 'click here' type terminology | 13.1 (P2) | 2.12 (P2) |
| Links should be short, but descriptive | 13.1 (P2) | 2.12 (P2) |
| Avoid unnecessary words, 'link to', 'click to' is unnecessary | 13.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 liberally | 13.1 (P2) | 2.12 (P2) |
| Separate adjacent links with a non link printable character | 10.5 (P3) | 3.13 (P3) |
| Lists of links should be coded as links | 13.1 (P2) | 2.12 (P2) |
DEV 3.4 - Allow the user to easily bypass information
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Provide skip links to get to main content | 13.6 (P3) | 3.9 (P3) |
| Make the skip link visible if possible | 13.6 (P3) | 3.9 (P3) |
| Group other related links and objects together and provide a way to bypass the group | 13.6 (P3) | 3.9 (P3) |
| Provide Accesskeys | 9.5 (P3) | 3.12 (P3) |
DEV 3.5 - Create a logical tab order through the page
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Try to ensure that the default tab order is the most logical route | 9.4 (P3) | 3.11 (P3) |
| If you can't get a logical default order then use the tabindex attribute to specify | 9.4 (P3) | 3.11 (P3) |
4.0 - Content
DEV 4.1 - Use clear and simple language
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Cut out excess words and fluff | 14.1 (P1) | 1.6 (P1) |
| Avoid unfamiliar language | 14.1 (P1) | 1.6 (P1) |
| Use the active rather than the passive voice | 14.1 (P1) | 1.6 (P1) |
| Use an informal, inter-personal style of writing if possible | 14.1 (P1) | 1.6 (P1) |
| Avoid 'big' words just for the sake of it | 14.1 (P1) | 1.6 (P1) |
| Expand acronyms/abbreviations first time used | 14.1 (P1) | 1.6 (P1) |
DEV 4.2 - Prioritise information, maximise readability and scanning
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Prioritise the most important information | 13.8 (P3) | 3.5 (P3) |
| Enhance content for scanning | 12.3 (P2) | 2.8 (P2) |
| Style for readability | ||
| Do not use ascii art | 13.10 (P3) | 3.17 (P3) |
DEV 4.3 - Provide accessible alternatives - don't rely on PDF / Word
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Always provide documents in HTML form unless totally unpractical to do so | 1.1 (P1) / 11.1 (P2) | 1.1 (P1) / 2.26 (P2) |
5.0 - HTML coding
DEV 5.1 - Include this stuff at the top
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Specify a valid Document Type Definition (DTD) | 3.2, 11.1 (P2) | 2.23, 2.26 (P2) |
| Identify the primary natural language | 4.3 (P3) | 3.4 (P3) |
| Provide unique and meaningful titles for each page | 13.1 (P2) | 2.12 (P2) |
| Provide metadata | 13.2 (P2) / 11.3, 13.9.(P3) | 2.13 (P2) / 3.20, 3.16 (P3) |
DEV 5.2 - Construct proper headings
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
Use <h1>, <h2> ... <h6> to provide structure to web pages |
3.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
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| If something is a list, always code it as one | 3.6 (P2) | 2.24 (P2) |
| Avoid using inline images to create list effects, use lists and style using CSS | 3.3, 3.6 (P2) | 2.5, 2.24 (P2) |
Always use <ul>, <ol>, <dl> properly |
3.6 (P2) | 2.24 (P2) |
| Use CSS to alter appearance of bullets and numbers | 3.3, 3.6 (P2) | 2.5, 2.24 (P2) |
DEV 5.4 - Use lang, abbr, acronym to embed useful information
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Identify changes in the natural language of the document | 4.1 (P1) | 1.7 (P1) |
Use <acronym> and <abbr> to expand all acronyms and abbreviations using the title attribute |
4.2 (P3) | 3.3 (P3) |
DEV 5.5 - Use structural and semantic markup properly and validate code
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Use structural / semantic markup wherever possible to add meaning to a page | 11.1 (P2) | 2.26 (P2) |
| Do not misuse structural / semantic markup for presentation effects | 3.7 (P2) | 2.25 (P2) |
| Do not use presentation elements to simulate structure | 3.5 (P2) | 2.7 (P2) |
| Do not use deprecated features of HTML | 11.2 (P2) | 2.27 (P2) |
| Write HTML and CSS according to the specified standards | 3.2 (P2) | 2.23 (P2) |
| Ensure all code is validated against the appropriate standard | 3.2 (P2) | 2.5 (P2) |
DEV 5.6 - Use relative font sizing, not absolute units
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| To size text use font size keywords, percentage and em values, do not use px, pt, cm | 3.4 (P2) | 2.6 (P2) |
| Do not use px, pt, cm | 3.4 (P2) | 2.6 (P2) |
Put all style information in style sheets - do not use the deprecated <font> tag |
3.3, 11.2 (P2) | 2.5, 2.27 (P2) |
6.0 - Images
DEV 6.1 - All images must have alt text to convey the equivalent information
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Use the alt attribute for every image | 1.1 (P1) | 1.1 (P1) |
| Alt text should serve the same purpose and convey the same meaning as the image | 1.1 (P1) | 1.1 (P1) |
| Avoid adding extra meaningless alt text | 1.1 (P1) | 1.1 (P1) |
| For icon with text link in same anchor tag use alt="" for the icon | 1.1 (P1) | 1.1 (P1) |
DEV 6.2 - Provide full descriptions for informational images
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Add a longer description for complex images like charts, diagrams, and graphs | 1.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 back | 1.1 (P1) | 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) | 1.1 (P1) |
DEV 6.3 - Avoid using images to display text
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| If possible always use text rather than images of text | 3.1, 11.1 (P2) | 2.22, 2.26 (P2) |
| Avoid putting essential text within an image | 3.1, 11.1 (P2) | 2.22, 2.26 (P2) |
| Avoid putting large paragraphs of text within an image | 3.1, 11.1 (P2) | 2.22, 2.26 (P2) |
| Avoid using images of text for important navigation (menus, etc.) | 3.1, 11.1 (P2) | 2.22, 2.26 (P2) |
DEV 6.4 - Use the correct image format for the job
| Recommendation | WAI WCAG 1.0 checkpoint | NDA 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) | 3.17 (P3) |
7.0 - Forms
DEV 7.1 Simplify form design, use good spacing and sensible grouping
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Ask for only the information you require - avoid form bloat | 14.1 (P1) | 1.6 (P1) |
| Create a clear path through the form | ||
| Group similar items together, and order logically | 2.8 (P2) | 2.8 (P2) |
| Position form labels close to the input elements - avoid large gaps | 2.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
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Every form input element must have a label | 10.2 (P2) | 2.17 (P2) |
| Explicitly associate each label with its input element | 12.4 (P2) | 2.16 (P2) |
| Use the title attribute liberally | 12.4 (P2) | 2.16 (P2) |
| Position labels properly - text and select items left or above, radio buttons and check boxes to the right | 10.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
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Labels (explicit) | 10.2, 12.4 (P2) | 2.17, 2.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
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Provide required information indicators | ||
| Provide brief and clear instructions at the start of the form | 14.1 (P1) | 1.6 (P1) |
| Be careful with timeouts | IMPORTANT | IMPORTANT |
| Provide required format instructions / examples | ||
| Provide meaningful and useful error messages | IMPORTANT | IMPORTANT |
| Indicate the location of errors on the form itself |
8.0 - Tables
DEV 8.1 - Data tables: simplify and mark up with special HTML
| Recommendation | WAI WCAG 1.0 checkpoint | NDA checkpoint |
|---|---|---|
| Use the most simple data table possible | loosely 5.1, 5.2 (P1) | loosely 1.9, 1.10 (P1) |
Code for added 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) | 1.9, 1.10 (P1) / 3.7, 3.8 (P3) |
DEV 8.2 - Layout tables: ensure correct readout order, avoid complicated nesting, describe with summary attribute
| Recommendation | WAI WCAG 1.0 checkpoint | NDA 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) | 2.9 (P2) |
Do not use <th> or other structural tags for layout purposes - use CSS instead |
3.3, 5.4 (P2) | 2.5, 2.10 (P2) |
| Use the summary attribute to describe the purpose of the section | 5.5 (P3) | 3.7 (P3) |
| Use relative sizing wherever possible to create a fluid width | 3.4 (P2) | 2.6 (P2) |
