Making an Accessible and Functional Website for the 2008 Beijing Olympics

Also available is a post trip report, Beijing By Bending Bicycle, with: Travelogue, Research Opportunities, and Brisbane Presentation (added 2007).

Introduction

This is in response to an invitation from the Beijing Olympic Committee (BOCOG) to attend a 3-day conference with 20 speakers towards the implementation of the Beijing Olympic 2008 Official Website. Speakers from design, new media applications, web management, marketing and promotion will share professional viewpoints on design of the BOCOG web site for a proposal to the International Olympic Committee (IOC).

This presentation introduces website accessibility, discusses problems found with the Sydney Olympic Organising Committee (SOCOG)'s website for the Sydney 2000 Olympics and makes recommendations for the BOCOG web site. It is based on evidence presented to the Australian Human Rights and Equal Opportunity Commission¹, a demonstration of how to improve the web site² and lectures for the Australian National University on the use of sports pictograms and web design for wireless devices³.

Website Accessibility

Web accessibility guidelines have been developed to assist designers to make web sites which are available to the greatest range of users of the Internet. The most respected guidelines are those from the World Wide Web Consortium:

For those unfamiliar with accessibility issues pertaining to Web page design, consider that many users may be operating in contexts very different from your own:

• They may not be able to see, hear, move, or may not be able to process some types of information easily or at all.

• They may have difficulty reading or comprehending text.

• They may not have or be able to use a keyboard or mouse.

• They may have a text-only screen, a small screen, or a slow Internet connection.

• They may not speak or understand fluently the language in which the document is written.

• They may be in a situation where their eyes, ears, or hands are busy or interfered with (e.g., driving to work, working in a loud environment, etc.).

• They may have an early version of a browser, a different browser entirely, a voice browser, or a different operating system.

Content developers must consider these different situations during page design. While there are several situations to consider, each accessible design choice generally benefits several disability groups at once and the Web community as a whole. For example, by using style sheets to control font styles and eliminating the FONT element, HTML authors will have more control over their pages, make those pages more accessible to people with low vision, and by sharing the style sheets, will often shorten page download times for all users.

From: Web Content Accessibility Guidelines 1.0, W3C Recommendation, World Wide Web Consortium (W3C), 5-May-1999URL: http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/#Introduction

It should be noted that as well as disabled users ("not be able to see, hear, move, or may not be able to process some types of information easily or at all... They may have difficulty reading or comprehending text. "), the authors of the W3C Guidelines also envisaged other users:

• Kiosks and other limited devices: They may not have or be able to use a keyboard or mouse.

• Wireless, mobile and low bandwidth users: They may have a text-only screen, a small screen, or a slow Internet connection.

• Second language users: They may not speak or understand fluently the language in which the document is written.

• Public and mobile use: They may be in a situation where their eyes, ears, or hands are busy or interfered with (e.g., driving to work, working in a loud environment, etc.).

• Old Device Users: They may have an early version of a browser, a different browser entirely, a voice browser, or a different operating system.

The W3C Guidelines are divided into three priority levels: 1, 2 and 3, each with checkpoints. There are three levels of conformance corresponding to the three priority levels:

In general the higher the priority number, the more difficult it is achieve the level of conformance. Australian governments and industry bodies have, in general, adopted the World Wide Web Consortium's Accessibility Guidelines. Details vary in Australia as to what level of compliance is specified (if any) as to if compliance is recommended or mandatory⁴.

An example of a Priority 1 checkpoint:

• 1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video.

As an example any photograph used on a web site should have a text caption, for those who are unable to see the photo.

Sydney 2000 Olympics Website Accessibility Problems

On 7 June 1999 a complaint was made to the Australian Human Rights and Equal Opportunity Commission (HREOC), of unlawful discrimination by the Sydney Organising Committee for the Olympic Games ("SOCOG"). Part of the complaint alleged a failure to provide a web site which was accessible to the complainant, who was blind.

The complainant requested that the HREOC make the following orders or declarations:

1. That SOCOG include ALT text on all images and image map links on the website;

2. That SOCOG ensure access from the Schedule page to the Index of Sports; and

3. That SOCOG ensure access to the Results Tables on the web site during the Olympic Games. (HREOC 2000)

The author carried out an analysis of the accessibility of the web site and presented written and verbal evidence to the inquiry. The web site has since been deleted, but a copy as it was on 11 January 2000, is available at from of the National Library of Australia's PANDORA Archive.

A decision was delivered 24 August 2000 (HREOC 2000), with SOCOG found to have engaged in unlawful conduct by providing a web site which was to a significant extent inaccessible to the blind. The web site ordered to be made accessible by the start of the Sydney Olympics. On 6 November 2000 (after the Sydney Olympics) the web site was found to only be partly complaint and $20,000 damages were awarded (HREOC 2000c).

On 27 April 2000 the author inspected the following pages:

• Home page: http://www.olympics.com/eng/index.html/eng/home.html

• Prints offer: http://www.olympics.com/eng/about/programs/Fine_art.html

• What's on December 1999: http://www.olympics.com/eng/schedule/Event_1299.html

The web pages were displayed using Internet Explorer (Version 5.0 for Windows 95), with image display switched off (to simulate use by a blind person). The display of the web pages was inspected for usability and then an examination of the HTML source code made. It should be noted that a more detailed analysis would be required to more formally rate the site, but this was not required, nor was it feasible.

SOCOG Web Page with graphics:

SOCOG Web Page without graphics:

Problems found and compliance with Web Accessibility Guidelines were summarised as:

i. W3C Recommendation Web Content Accessibility Guidelines 1.0, 5-May-1999 at (http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505 ).

From: Guideline 1. Provide equivalent alternatives to auditory and visual content. Checkpoints (http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/#gl-provide-equivalents ):

"1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video. [Priority 1]"

Guideline 5. Create tables that transform gracefully. (http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/#gl-table-markup )

"5.1 For data tables, identify row and column headers. [Priority 1] For example, in HTML, use TD to identify data cells and TH to identify headers.

5.3 Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a ). [Priority 2]"

From: Guideline 1. Provide equivalent alternatives to auditory and visual content. Checkpoints (http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/#gl-provide-equivalents ):

Checkpoints:1.1 Provide a text equivalent for every non-text element ...

For image maps, either use the "alt" attribute with AREA, or use the MAP element with A elements (and other text) as content. "

A demonstration showing two options for implementing accessibility features for the menu was prepared later:

Option 1: ALT Text on the existing image map

In this implementation, a ALT tag with the name of the sport is added to each rectangular region of the existing image map. As an example, alt="Archery" is added to the first area:

< AREA shape="rect" coords="1,1,80,12" href=http://www.olympics.com/eng/sports/AR/home.html" alt="Archery">

There is no change in the appearance of the menu for most users. However, the effect of including the ALT tags is that a browser can display the text labels in place of the graphics, if required.

Option 2: Simple text menu supplementing or replacing the existing image map

Simple hypertext links are used for the name of each sport:

<A HREF="http://www.olympics.com/eng/about/programs/index.html?/eng/sports/AR/home.html"> Archery </A>

These instructions could be used in a simple list of sports, or in a table as show below. The list has been changed to run alphabetically across the columns, rather than down, to aid braille readers (which read one line of horizontal text at a time). The colour of the table background and text can be changed to match that of the current graphic. However, those colours may be difficult for some people to read:

However, some disabilities, such as Aphasia involve reading problems and graphics can improve access. A simple way to achieve this for the Olympic Games would be to use the standard sports pictograms, along with text in the sports menu. The pictograms were already used on the sports web pages linked from the menu. Thus:

Beijing 2008 Olympic Website Accessibility Recommendations

It is recommended that BOCOG:

1. Implement W3C WAI Level-A Compliance: Web site designers should aim to implement priority 1 and 2 checkpoints of the W3C guidelines, but should be required to at the very least achieve implement priority 1 (Level-A compliance). This will require minimal effort by competent designers.

2. Use Pictograms: References to sports should use the IOC's standard pictograms, as well as text descriptions. Text in images should be avoided as this makes translation into other languages difficult (requiring a version of the image for each language and preventing automatic translation).

3. Allow for machine language translation: In addition to maintaining the versions required in the official Olympic languages, the web site should be designed to be able to be translated into other languages automatically. Use of accessibility guidelines, pictograms and avoiding text in images should make this feasible with minimal additional effort.

4. Integrate Kiosk, wireless and Web site content: One set of content should be designed for the public web site, wireless device users and for use on touch sensitive kiosks at Olympic venues. This will avoid additional effort being needed to maintain multiple versions of the same content. Graphics should be designed to be usable at the range of resolutions required and on text-only screens.

Other Aspects Are Important

In addition to good quality web sites about the games themselves, it should be kept in mind that the Internet and the web can be used for administrative and logistical processes associated with running the games. Some of these issues are covered in a recent presentation on electronic Government for a region⁵.

Biographical Notes

Tom Worthington is an independent information technology consultant and Visiting Fellow in the Department of Computer Science at ANU, where he lectures on electronic commerce and web technology. He is one of the architects of the Commonwealth Government's Internet strategy and was the first Web Master for the Australian Department of Defence. In 1999 he was elected a Fellow of the Australian Computer Society for his contribution to the development of public Internet policy. Tom is also a member of the Institute of Electrical and Electronics Engineers and the Association for Computing Machinery.

References

Presentation slides are available at: http://www.tomw.net.au/2003/bws.ppt