How To Design For DDA Compliance
17/03/2005
This article hopes to introduce web developers to the key points that must be considered for creating websites that comply with the DDA; a basic level of familiarity with HTML and CSS is assumed.
Seperate Style From Content
One of the main barriers to accessibility in web design is the nature of the html code behind the scenes. Many designers do not realise how important correctly formatted HTML is for certain users and that inappropriate use of html renders the page incomprehensible to many with accessibility issues, examples of this:
- Use of tables for layout
- Use of graphics to affect layout (spacer images)
- Image only Navigational menus
In the past web designers have had to use such 'hacky' techniques get their pages to render correctly, largely due to lack of standards compliance in web browsers. However for a number of years now there has been greatly improved standards compliance in the newer releases of web browsers, so there is really reason why not to stick to the standards.
These standards are the HTML and CSS specifications published by the W3C. One of the key approaches advocated by these standards is seperating content and style, and this is obtained with use of CSS. The html should not contain any style information e.g.
<font color="black">
only the appropriate tags required, e.g. paragraphs, divs, lists and tables for tabulated data only. The style should all be defined in a separate style sheet.
This has a number of advantages, not only pertaining to accessibilty:
- The style of many pages can be easily changed by editing one file
- Alternate style sheets can be specified, for example high contrast style for partial sighted users
- Users can disable the style sheets and clearly see the content without any formatting
- The page size is reduced and therefore the download speed
Use of Images
When using images the web developer should consider how non-visual uses will 'see' their site, try viewing the site without images, or through a text based browser e.g. . Key points for design:
- Can text be used instead of an image?
- Images should be avoided for navigational menus
- All images must have useful alt tags
- Complex images e.g. graphs should have longdesc attributes i.e. a separate extended test description
- In general try to reduce the use of images
Readability
Visual Considerations
Consider partial sighted visitors:
- Is there sufficient contrast between the content and background color? e.g. black on white
- Check for possible difficulties background and foreground for colour blind users
- Style your pages so that font sizes can scale i.e. use of proportional font sizes: em ex and % over px or pt
- Create alternate style sheets
Language Considerations
It is important for accessibility that visitors can understand the content of your pages.
- Declare the language used on the page
- Use clear and simple language
Make Appropriate Use Meta Information To Assist Navigation
Additional Meta information can be provided in the page head and within certain tags, this includes:
- Start, Next, Prev etc. link tags e.g.
<link rel="Index" href="/index.html" /> <link rel="Next" href="/Page2.html" /> <link rel="Prev" href="/Page1.html" />
These greatly assist with keyboard navigation - Use access keys for importang links
- If possible specify text alternatives for screen readers, brail etc.
Provide Alternative Text Content
Certain content, e.g. multimedia, flash has no text based content, so offer text alternatives. Indeed text based versions of normal html pages is desirable (as above).
