home

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect - Tim Berners-Lee, W3C Director and "inventor" of the World Wide Web

About Me

Resume
References
History

Writing

Information Science
Web Development
Nielsen in 20 mins.
113 Guidelines
Don't Make Me Think
20 Heuristics for Site Evaluation
Accessibility
Indonesia
Demography

Making Web Sites Accessible

A Plain Language Guide for Developers and Project Managers

Ten Things to Consider....

1. People in the bush with deadly slow access.
2. The high proportion of the population who don't see well - or at all.
3. Those who have trouble using a mouse.
4. Most people aren't as smart as you.
5. English is at best a second language to most people in the world.
6. Even though most people can hear, their PCs may not.
7. Many people access the web because they have to be - not because they want to. It's work, not leisure.
8. The site you're developing may be viewed on something other than a PC or Mac. Remember those people with screen readers, Braille readers and text only browsers.
9. For the disabled and the isolated the web may be THE central focus of their lifestyle.
10. Search engines are essentially blind users.

Sixteen Things to Apply

Eleven easy ones:

1. HTML for Page Structure only - use Cascading Style Sheets for Presentation
2. Images - provide an alternative
3. Colour - don't rely on it
4. Fonts - relative not absolute
5. Writing - keep it simple, conclusion first
6. Language - declare it (in the header)
7. Links/Navigation. Apply the answer to this question - what does "click here" mean to a blind person without a mouse?
8. Forms - use labels, provide alternative
9. Non-standard HTML - just don't use it
10. Frames - request counselling if you're considering their use
11. Educate your client about accessibility. It addresses a larger section of their customer base (or potential) than they may realise

1. Sound and Video - provide an alternative
2. Java Applets - provide an alternative
3. JavaScript - provide an alternative
4. Tables - should make sense when read acrossways
5. Plug-Ins - tread carefully. Don't be lazy and use PDFs when HTML can be applied with a little more effort.

1. HTML for Page Structure; Cascading Style Sheets for Presentation

Clarification: Use HTML for structuring content and the cascading style sheets (CSS) to determine the content's look/presentation/appearance/form/layout. Use headline attributes (<H1>,<H2>, etc.) correctly and in order.
Reason: These tags help sight impaired users understand the structure of your page. If CSS is not supported by the browser, the information hierarchy on the content is still understandable - that is, it degrades gracefully)

2. Images - Provide an Alternative

Clarification: This is not just for sight impaired users but also for those with slow connections who leave images switched off.
Use the Alt attribute for all Images
Ensure that you give meaningful alt values to images that convey important meaning on the site.

Note 1: Identify Function, Not Form

The alt attribute is to indicate the function of the image.

<img src="logon.gif" alt="logon">
<img src="logon.gif" alt="logon">
<img src="signup.gif" alt="signup">
<img src="exit.gif" alt="exit.">
rather than the form:

<img src="logon.gif" alt="big blue button.">

Note 2: Full-stop at end of alt

Reason : So that screen readers know to pause and not produce a long run-on sentence.

<img src="logon.gif" alt="logon.">

Note 3: Spacer GIFS, Bullets etc.

Where images have no meaning and are used for page structuring only, the alt should have a null ( alt="" ) or empty (alt=" ") value.

For bullets use alt="*" for the first level, and alt="-" for the second level rather than saying alt="bullet".

It is still important to provide an alt for a meaningless image. As Jakob Nielsen says "if no alt text is present in an image-tag, most screen readers would feel obliged to inform their user that an unknown image was present because there would be no way of knowing whether the image was important."

Note 4: Image maps Image maps should be client-side (not server-side) and provide text-only links to all hyperlinked regions of the image map.
Code example:

<img src="welcome.gif" alt="image map of areas in the Library"
usemap="#map1">
<map name="map1">
<area shape="rect" coords="0,0,30,30' 
href="reference.html" alt="Reference.">
<area shape="rect" coords="34,34,100,100' 
href="media.html" alt="Audio Visual Lab.">
</map>

3. Colour - Don't Rely On It

Clarification: Some people are colour blind. Also, some devices are b&w.

Note 1: Create contrast.
The more stark the contrast between your text and your page background, the easier it will be to read. Love your whitespace - it will set off your content and give your users' eyes a rest.

Note 2: Test by printing
Test all templates by simply printing to a b&w printer

Note 3 : Test by colour blindness simulator
Test your design by downloading Vischeck to check for colour blindness: http://www.vischeck.com/imagej_vischeck.shtml

4. Fonts - Relative not Absolute

Clarification: Absolute font sizes prevent a sight-impaired user increasing the font size in their browser.

Note 1: Use Percentage
Establish font size and other presentation values in the CSS - not in HTML (see 1 above - HTML for Page Structure; Cascading Style Sheets for Presentation). In the style sheet use the relative percentage or 'em', rather than the absolute 'pt' or 'cm'.

Note 2: Avoid using images as text.

5. Writing - Keep it simple, Conclusion first

Keep it Simple
Use the clear and simple yet appropriate language.
Reasons: The user may have English as a second language - They may have learning difficulties.

Always explain abbreviations and acronyms - no matter how familiar it is to you If you absolutely need to use technical language - include a glossary.

Conclusion First
As in newspaper writing - capture the essence of the message in the first sentence or two. Don't force the user to read through to the end to gain an understanding. Users "scan" the web - rather than "read" it.

Use Proper Punctuation
Use proper punctuation to support screen readers.

6. Language - Declare It

Clarification: Screen Readers and braille devices can automatically switch to the new language. It also allows search engines to find key words and identify documents in a desired language.

Note 1: Identify the language of a document in metatags

<meta name="description" lang="en" 
content="The Foundation for Development Cooperation is an….">

Note 2 : Language can also be set as attribute in HTML element

<html lang="fr">
<head> <title>Un document multilingue</title>
 </head>

Note 3: If language changes in a page use can use lang attribute to indicate

<p lang=fre>

Note 4: In XML, use "xml:lang".
Server operators can configure servers to take advantage of HTTP content negotiation mechanisms so that clients can automatically retrieve documents of the preferred language.

7. Links/Navigation - What does "Click Here" mean to a blind person without a mouse?

Make link text descriptive
Reason: So users can understand where you're taking them, even if they don't read the text around the link. Note that some text-only browsers can jump from link to link, reading only the text that is part of the link.

Link phrases rather than single words
Reason: users with limited motor control may have difficulty hitting too-specific links If your navigation includes a horizontal line of links, place a line break between them (eg Home | About Us | Contact Us)
Reason: The break helps screen-reading programs understand where one link ends and the next begins. See also notes on Image Maps above.

Make sure navigation structure is clear and consistent across pages.
If enabled on your sender use Server Side Include (SSI)templates. This is both for general usability requirements which are of particular interest to the disabled.

8. Forms - use labels, provide an alternative.

Clarification: Some browsers cannot access Web page form tags without the use of a mouse. Persons with blindness may not have access to the input form tags. Also, persons with mobility impairments may find it difficult to access the small radio buttons and check boxes in HTML form tags:
Provide coding to associate Text labels with their form controls.
Reason: Forms can present great difficulty for a non-visual user, particularly forms which use checkboxes, radio buttons, or options. To make a form accessible by using the "label" tag with the ID attribute.

Code Example
<p><label for="complete_name">Name:</label> 
<INPUT TYPE="text" SIZE="45" NAME="name" 
id="complete_name"></p>

Note 1: Use text labels positioned directly to the left of a form element. Many screen readers verbalise or show the text directly to the left of a form field Note 2: Associate Text labels with their form controls. This is done by the using the <label> tag with the ID attribute.

<pre>
Form example:
<FORM ACTION="/cgi-bin/xxx.cgi" METHOD="POST">
<H3>Sample form:</H3>
<p><label for="complete_name">Name:</label> 
<INPUT TYPE="text" SIZE="45" NAME="name" id="complete_name"></p>
<p><label for="expertise_area">What is your expertise?</label><br>
<TEXTAREA NAME="expertise" COLS="60" ROWS="3"id="expertise_area"
 WRAP="physical"> 
</TEXTAREA></p>
<p><label for="home_department">Select a department:</label>
<SELECT NAME="dept" SIZE="1" id="home_department">
<OPTION VALUE="Best Dept">Best Department</OPTION>
<OPTION VALUE="Better Dept">Better Department</OPTION>
<OPTION VALUE="Oldest Dept">Oldest Department</OPTION>
</SELECT>
</p>
<p>Indicate your class status: <BR>
<label for="undergraduate_status">Undergraduate student</label> 
<INPUT TYPE="radio" NAME="status"
 VALUE="undergraduate" id="undergraduate_status">
<label for="graduate_status">Graduate student</label> 
<INPUT TYPE="radio" NAME="status" 
 VALUE="graduate" id="graduate_status> 
</p>
<p>Check the type of audience you would work with.
 Check as many as you wish:<br>
<label for="highschool_talks">Visiting high school students</label>
<input type="Checkbox" name="audience"
  value="highschools" id="highschool_talks"><br>
<label for="career_talks">Career day programs in K-12</label>
<input type="Checkbox" name="audience"
  value="careerdays" id="career_talks"><br>
<label for="adult_talks">Adult groups in community</label>
<input type="Checkbox" name="audience"
 value="adults" id="adult_talks"> 
</p>
<INPUT TYPE="submit" VALUE="Send data"> 
<INPUT TYPE="reset" VALUE="Clear Form">
</form>
</pre>

Include an e-mail address or e-mail link as an alternative method of sending the required information.

9. Non-standard HTML - just don't use it.

Avoid deprecated language features
Clarification: Deprecated language features are those which, though currently in common use, have been removed from the HTML specification and are not expected to be supported in future browsers. They have been replaced by newer elements. While browsers currently support those elements, they may not in the future. It is best to avoid use of these elements when possible.

The following elements have been deprecated or removed in HTML 4.0:
APPLET, for Java applets: use OBJECT instead
BASEFONT, CENTER, FONT, STRIKE, U, for formatting: use style sheets for these formatting effects
DIR, MENU, to define lists: use other list elements such as UL or OL, and use style sheets to refine the formatting
ISINDEX, for simple form input: use an INPUT element within a FORM
LISTING, PLAINTEXT, and XMP, for formatting fixed-width text: use the PRE element
See http://www/w3.org/ for more information.

10. Frames - Request Counselling!

Clarification: Frames cause difficulty in printing, viewing and navigation for all users. There is no reason to use them. Careful use of SSIs and templates can achieve what frames achieve. Just don't use them.

11. Educate the client

No matter how much care you apply in creating a website, if it for someone else your work can quickly undone by others making site changes without knowledge of accessibility issues.

12. Sound and Video - provide an alternative

Clarification: Audio and video contents require a full transcript for visual and hearing impaired. The requirement is to "convey essentially the same function or purpose as auditory or visual content" and this means a text equivalent.
Note:
"Equivalent alternatives" required in w3c guidelines means a full transcript. Your clients should be made aware of this requirement when considering sound and video.

13. Applets - provide an alternative

Include alt attributes when you use Java applets. This works fine with Java-enabled browsers where Java has been turned off, but text only browsers will simply ignore the appletelement. You can remedy this by simply adding a line of text within the applet element.

<applet code=robertPlant alt="Java applet: Robert Plant ">.
 
If your browser were capable of handling applets, 
you'd could poke Robert Plant in the eye right here.</applet>

Note 1 : If an applet gathers information, provide an alternative mechanism for gathering the information. Alternative information gathering mechanisms such as a user-input form, e-mail address, phone or fax number should be provided within the alternative text of either the APPLET or OBJECT elements.

14. JavaScript - provide an alternative

Sometimes scripts are used to create new pop-up windows. Avoid doing this unless it is necessary and the user is forewarned that it will happen. However we seem to be so dependent on Javascript for so many small functions in web design that it is to me impractical to provide an alternative for every instance of Javascript. This one sounds like one bit pain!

15. Tables - make sense when read across

Ideally CSS should be used for layout rather than html in the form of tables - but until CSS2 is supported well enough by browsers this will not be practical
Try to avoid using tables to layout page into columns.
If the table has no columns it will be accessible but try to avoid tables to create multiple columns of text.
Reason : People browsing using screen readers hear words read across the page, jumping from column to column, like reading a newspaper left to right all the way across the page before going onto the next line.

Avoid specifying absolute widths larger than a few hundred pixels
Reason: Can cause horizontal scrolling with narrow windows or large fonts
Never place a TABLE within a P element
Reason: Not valid HTML and causes problems in Lynx.

Use Summary attribute & Caption element
Like "alt" text for images, each TABLE element should contain a "summary" attribute.
Reason: This briefly describes the table structure and purpose.
Captions are displayed and assist in understanding the table. Further the CAPTION element provides a title that is directly associated with the table so that can help users decide whether to view the table. The "summary" attribute describes the table's structure and purpose when the table itself cannot be read, but is not normally displayed to visual users.

16 - Plug-Ins

The classic example of gratuitous use of plug-ins is Flash. While Flash may be useful to describe complex operations, like how a camera or car works, or for non-interactive activities such a viewing a presentation, a cartoon series or a fashion show, it is commonly used to bombard us with meaningless "brochureware". It is often screen based junk mail. Perhaps the disabled are fortunate not to be lumbered with it.

PDF's too, present accessibility issues - although Abobe had specifically addressed this issue of late. For those who routinely produce PDFs for the web because it is easier than HTML should reflect on how much harder PDF is for those with screen readers. Also PDF's are often created without finesse, creating huge files that quickly fill the buffer of a home user's ink jet printer.

Conclusion

Accessible design does not mean designing text-only pages. Don't believe the hype. Designing so everybody can use your pages only takes a little extra time and understanding. You don't have to create a text-only version of your site, and you don't have to limit your designs. You just have to take your users' needs into account as you go.

Some Terms Used

A Braille Display

Commonly referred to as a "dynamic braille display," raises or lowers dot patterns on command from an electronic device, usually a computer. The result is a line of braille that can change from moment to moment. Current dynamic braille displays range in size from one cell (six or eight dots) to an eighty-cell line, most having between twelve and twenty cells per line.

Lynx

Some people with disabilities use alternate browsers such as lynx, a text only browser to read web pages. Lynx doesn't support Java, JavaScript, images, PDF files, or items requiring plug-ins, such as Flash or Shockwave. If frames don't have meaningful names, navigation with lynx can difficult.
Online Lynx test: http://www.delorie.com/web/lynxview.html

Screen reader

A software program that reads the contents of the screen aloud to a user. Screen readers are used primarily by individuals who are blind. Screen readers can usually only read text that is printed, not painted, to the screen.