Website Creation & Support
Accessbility for Everyone - tips & tricks
Quick tips to make accessible websites
- Images and animations: Use the alt attribute to descibe the function of each visual.
- Image maps: use the client-side map element and text for hotspots
- Multimedia: provide captioning and transcripts of audio and descriptions of video.
- Hypertext links: Use text that makes sense when read out of context. For example, avoid "click here".
- Page organization: Use heading, lists and consistent structure. Use CSS for layout and style where possible.
- Graphs and charts: summarize or use the longdesc attribute.
- Scripts, applets and plug-ins: provide alternative content in case active features are inaccessible or unsupported.
- Frames: use the noframes element and meaningful titles.
- Tables: Make line-by-line reading sensible. Summarize by using the summary attribute.
- Check your work: validate. Use tools, checklist and guidelines at http://www.w3.org/TR/WCAG
©W3C W3C.org 2001/01
Accessible Forms
All forms must be accessible not only via mouse clicks but through other modes of web browsing devices such as keyboads, mouth sticks, and screen readers.
Apply these techniques to make sure your web forms are accessible to all.
<label>
wrap your input tag elements with the label tag
EXAMPLE
<label>E-mail Address<input type="text" name="email" /> </label>
produces...
<fieldset>
when managing a number of related form questions, wrap them with the fieldset tag so that the questions group together under a common heading, or legend. Set this common heading by using the legend tag immediately following <fieldset>.
EXAMPLE
<fieldset><legend>Contact Information:</legend>
<label>First Name: </label>
<input type="text" name="firstname" />
<br />
<label> Last Name: </label>
<input type="text" name="lastname" />
<br />
<label> E-mail Address: </label>
<input type="text" name="email" />
</fieldset>
produces...