Web Design for the Disabled
Techniques used by web developers
Easy tests during and after developing a web site
Changing font size
By resizing the font size in a visual browser like Opera, Firefox or the Internet Explorer users can make a site more readable.
There are different approaches for optimizing the font size in a user agent. In the browser settings one can adjust the default font size to a readable value. All well-known browsers have this option. It is also possible to display text in the desired size, font and color, independent of what the author set when designing the page. This option is very useful for people with visual impairments.
Another common way to adjust font sizes is to manually change the size when visiting a web page will illegibly small fonts. In most web browsers this can be done by pressing the control key and simultaneously turning the mouse wheel. Some user agents support font resizing by pressing control and "+" (plus) for increasing or "-" (minus) for decreasing font size.
It is generally a good idea for web authors, designers and front end developers to play around with the font size in a web browser and see what happens when someone uses individual settings.
Accessibility without images
It is important to make sure how usable and accessible a site is, even when images are disabled. In almost all graphical browsers it is possible to disable images with a few clicks. It is recommended to use this browser function while developing a web site.
Navigate to the top of the page
Web standards, Techniques, Checklists and Guidelines
The W3C Consortium is a body which has published a set of web standards. These standards consist of guidelines which are the basic principles that are required to be followed in order to make a web site accessible for users with disabilities. Each guideline also lists checkpoints which are divided into three groups of priorities. The checkpoints have technique links which open documents giving more detail to the techniques for that particular checkpoint. There are different levels of standards conformance depending on the satisfied priorities. "Level A" is fulfilled when all priority 1 checkpoints are satisfied. If priority 1 and 2 are satisfied, then "Level B" is reached. For "Level C" all three priorities have to be satisfied.
In the appendices of this document there are "10 Quick tips" to make accessible web sites. Furthermore the URLs of more detailed techniques and guidelines can be found. All are provided by the W3C: "Core Techniques", "HTML Techniques", "CSS Techniques" and "Web Content Accessibility Guidelines". Only the above-mentioned Quick tips will be discussed in this document.
Navigate to the top of the page
10 Quick Tips to Make Accessible Web Sites (W3C)
1. Images & animations. Use the alt attribute to describe the function of each visual.
This alt attribute is used as an alternative in case the media is not visible. A blind user for example hears the description from the alt attribute instead of seeing the image. It is important not only to use alt attributes but also to make sure they are used sensibly. The alternative text "two well-known business men shaking hands" is much more useful than "image21.jpg".
2. Image maps. Use the client-side map and text for hotspots.
Web developers can make client-side image maps accessible by providing alternative links to the same links associated with the image maps hotspots. Client-side image maps allow the user agent to provide immediate feedback as to whether or not the users pointer is over an active region.
3. Multimedia. Provide captioning and transcripts of audio, and descriptions of video.
Captioning enables deaf users to understand the message of a video file. The attributes "alt" and "longdesc" should be used for all non-textual content elements so that the user has an alternative way to understand the page.
4. Hypertext links. Use text that makes sense when read out of context. For example, avoid "click here."
Hypertext links can be accessed with all equipment designed for the web. It is much more likely that user agents will fail when trying to follow multimedia links.
Some user audio agents for example have a feature enabling the user to jump from link to link. A blind user would hear "click here, click here, click here" which makes it impossible for him to know what he can expect when he "clicks" on a "click here" link.
5. Page organization. Use headings, lists, and consistent structure. Use CSS for layout and style where possible.
HTML can be used in the semantic way, which means that each element is used depending on it's meaning, not its visual effect in standard browsers. If CSS is used for everything concerning visual effects, then style and semantics can be easily separated which makes sense for users which cannot use the visual part. Other users can modify the CSS stylesheet to fit their needs, for example the contrast between text and background or the preferred font type.
6. Graphs & charts. Summarize or use the longdesc attribute.
The longdesc attribute is meant for descriptions of graphs and charts. A good example can be found on the W3C web site which makes the meaning of this attribute clear:
<IMG src="97sales.gif" alt="Sales for 1997"
longdesc="sales97.html">
In sales97.html:
A chart showing how sales in 1997 progressed. The chart
is a bar-chart showing percentage increases in sales
by month. Sales in January were up 10% from December 1996,
sales in February dropped 3%, ...
7. Scripts, applets, & plug-ins. Provide alternative content in case active features are inaccessible or unsupported.
The title of this tip is self-explanatory. Usually the easiest and most effective solution is by using plain text as alternative. Almost all software and devices can handle plain text.
8. Frames. Use the noframes element and meaningful titles.
If frames cannot be avoided altogether, then the noframes element can help users without frames support. The titles are important for everyone, even user agent that support frames.
9. Tables. Make line-by-line reading sensible. Summarize.
A good habit when using tables is to test the site with a browser that does not support tables and an audio browser. Like this it is possible to prevent many issues concerning tables. It is also import to use tables solely for tabular data and not misuse them for layout although accessibility software is getting better in interpreting tables.
10. Check your work. Validate. Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG
Sites that do not validate make it nearly impossible to guess what different user agents will interpret when they are served with the buggy code. In some browsers it might look alright while others crash or do not display any of the content in a useful way.