B211 Lab Week 9

Laboratory Week 9 - Developing Accessible Web Sites

Learning Objectives:

Learn about implementation issues dealing with making a web site accessible to people with disabilities.

Before doing the tutorial, please read:

Week 6 lecture on Internet Accessibility for People with Physical Disabilities.

Software required:

This lab requires the use of the Lynx web browser. The software is available in the internal labs. External students may download the required software from the unit's downloads page.

This lab also requires a graphical web browser (like Netscape Navigator or Microsoft Internet Explorer), and W3C's Curriculum for Web Content Accessibility Guidelines 1.0, available as a local copy on this server, your own copy by installing from the downloads page, or from W3C's orginal site.

Instructions:

Font sizes and type-faces on web pages
One of the ways to improve the readability of a web pages for someone who has slight visual impairment is to set the default font on their browsers to a bigger and clearer font. On Netscape Navigator, this is done through the menu item Edit>Preferences...>Appearance>Font. On Microsoft Internet Explorer (IE) this is done through the menu item View>Text Size .

An HTML author can overide these defaults by using the <FONT FACE=... SIZE=...> tag and attributes. This is a common problem when web designers design for one particular operating system, monitor type, browser, etc, without consideration to other types. An example of this is when designers using PCs set font sizes based for PC-type monitors which has 96 dpi (dots-per-inch). When these pages appear on Apple Macintosh screens which has 72 dpi, they appear very tiny. If you are interested, you can read a more elaborate description of this problem in this TidBITS article.

When a page uses a font tags, it limits the options for someone with visual disabilities to change their font settings to improve the appearance of the page. This issue is actually wider than just consideration for physical accessibility. It concerns the decision of how much choice an author of a HTML page should allow to a user in terms of the presentation of information.

Page Layout for Speech and Braille Browsers
For someone with severe visual impairment or blindness, they depend on special speech synthesizers to read out web pages, or a converter to convert the pages to Braille. How a page is laid-out can make the converted speech or Braille easy to understand, or completely incomprehensible. One way of getting an idea about what the converted speech or Braille is like is to use a text-based browser like Lynx, or to use standard graphical browsers like Navigator and IE, but turning automatic picture-loading off.

To turn picture-loading off on Navigator, go to the menu item Edit>Preferences...>Advanced and unclick the "Automatically load images" box. In IE, go to Tools>Internet Options...>Advanced>Multimedia and unclick all options. Note that if you have accessed the picture in the recent past, it will already be cached. A cached picture will be displayed even if you turn picture-loading off. Picture-loading only specifies whether to retrieve the picture from the server or not. You need to clear your caches to avoid displaying the picture. To clear the cache on Navigator, go to Edit>Preferences...>Advanced>Cache and click on the two Clear... Cache buttons. On IE, go to Tools>Internet Options... and under Temporary Internet files click on the Delete Files button.

To use Lynx in the internal labs, on your desktop, click on Start>Programs>Lynx. Students off campus can download and install from the downloads page. Here are some basic commands for Lynx:

Down arrow : Highlight next link on the page
Up arrow : Highlight previous link on the page
Left arrow : Return to previous page
Enter, Return : Follow the highlighted link
+, Space : page down
-, b : page up
g : go to the specified URL (must be a full URL - you can't drop the front "http://")

A full set of keystrokes can be found by typing ? in Lynx.

Checking Page Sizes
In many public access centres, rural areas, and under-served communities, the access speed to the Internet is not very fast. In these cases, it becomes very important what the size of the web pages being downloaded are.

For web pages already accessed on Navigator, you can check the page size using the menu item View>Page Info. The size in bytes in given by the field Content Length. Note that if there are multimedia elements (images, sounds, movies, etc) embeded in the page, they are listed separately, and you have to add up the sizes for each listed element to get the true size of the page. All these multimedia elements will be automatically loaded unless you turn off picture-loading as described above.

On IE, the size of the page (not including the images) is given by the menu item File>Properties. Unfortunately, IE does not list the images embedded in the page. You will have right-click over every image (if you can find them all!) and chose Properties to find out their individual sizes.

To calculate what would be a good size for a web page, work on the fact that studies show for popular Australian ISP connections, the average download rate for international access that most users using 56Kbps (kilobits per second) dial-up modems is about 3 to 5 KB (kilobytes) per second. During heavy traffic times, it can get below 1 KB.

The standard recommendations is for your web page to always be below 40KB, so it takes about 10-20 secs to load for international casual web-surfers. Research have found that people will not wait for long downloads unless they there is something specific they are looking for. The recommendations is for you to go above this limit only if you know you have a dedicated audience, or you page is mean only for local consumption (eg. on a LAN).

Exercises:

Change the font settings for Navigator or IE so that the default font is a very large font. (Make a note of the original setting before you change them, since you will have to change them back to the original settnig when you finish.) View this tutorial page again. How does it look? Would the text possibly be clearer to someone with slight visual impairment?

Now view a page which uses a lot of <FONT> tags to set font sizes, eg http://www.oss.murdoch.edu.au/orientation/timetable.html (the timetable on this page is dynamically generated by server-side software). How do most of the fonts in these pages appear? Is there a difference when changing the font settings on the browser for this page?

Reset the default fonts on both Navigator and IE back to what it was originally if you are using the internal labs.

Have a look at some of the web pages for Murdoch University, and some of your favourite web sites. Check their pages sizes. Compare the sizes of the page without the images and with the images. How many of the pages actually have images as a critical part of the information presented? Considering the speed of access I indicated above, in you opinion, which pages should reduce the number or remove all images , and which should leave their images as they are?

For the pages you saw in (2), view them using Lynx and by turning off picture-loading in Navigator and IE off. Are the pages still meaningful? How much of the pages are real information, and how much is presentation? How meaningful would the pages be if read by a speech and braille browsers from left-to-right, top-to-bottom?

Turn the picture-loading back on in Navigator or IE when you finish if you are using the internal labs.

Besides the issues above, W3C also have guidelines for other accessibility issues which you should think about. They are contained in the Web Content Accessibility Guidelines 1.0, indicated in the "Software Required" section above. Go through the guidelines.

The guidelines come in 4 parts:

The introduction to the guidelines - skip this part!

The 14-point guidelines summary - as I have listed in the week 6 lecture,

Checkpoints to implement each of the guidelines, and

Examples of code for each checkpoint.

You should go through each of the 14 guidelines points in (ii) and understand what they are meant to achieve. You can click on the links to the checkpoints, and then to the example if you wish to get details on how to implement them.

Hint for assignment 3: You can include comments about the points in the guidelines in your web-site evaluation in assignment 3. Just remember that:

you must decide whether an accessibility point applies to the web site before saying whether the site implements the point well or not.

Accessibility is not the only issue when considering the "overall good and bad points". There are other issues we have gone through, and will go through in the future (eg. client/server issues, application language issues, e-business and e-government issues, etc).

Remember to read the week's development on the Internet by scanning through relevant articles in the IT section of Tuesday's the Australian newspaper - use the online version or the physical copy in the University library. Get into the habit of keeping up with current developments. Test your knowledge of major developments by going through the Good News Week self-tests.

H.L. Hiew
Unit Coordinator