Web Access Centre Blog

All eyes and ears will be on the Beijing 2008 Olympics website next year when the games swing into action on September 6th. I for one am very excited and hoping to get over there to see the real thing but if not will have to make do with internet coverage for up to date results of what is going on. Given the experience of the 2000 Sydney Olympics website sued by Bruce Maguire for being inaccessible the Beijing Olympics website will be under more scrutiny than it may expect and the word in many accessibility circles is “Will it be accessible and will I be able to access it”?

But of course it’s not just a question of if you can access a site if you are disabled. Internationalisation (also known as i18n) and localisation (also known as l10n) must also be taken into account to ensure ease of access for people from different cultures speaking different languages. Mobile access will also play a key role with people wanting to check results while on the move. This is even more important considering mobile access to the web is higher in Asia than the West given that lack of hardware and Internet connections.

In Part One I’ll be looking at the accessibility of the current site, in Part Two I’ll be exploring ease of access for international audiences and in Part Three I’ll be looking at mobile access.

But first, how does the site currently fair in terms of accessibility?

What follows is a snapshot look at the Beijing 2008 site to see how accessible it is for users with hearing, mobility, cognitive and visual impairments. Unable to look at the site in detail I decided to see what insight I could get from looking at the home page and a couple of other keys pages such as results pages.

I also haven’t had the opportunity to hear what people with disabilities think of the site so I’d be interested in any feedback and comments from others who’ve been on the site.

So, in no particular order, here is a summary of a handful of issues I focused on:

• Images, animation and Flash: predominately a screen reader and low vision issue, can users navigate and access the content of images and Flash objects?
• Multimedia: is a deaf user provided with an alternative to audio and a vision impaired user an alternative to video?
• Heading structure: can a voice input, screen reader and braille output user navigate within pages using headings?
• Changes in language: are changes in language communicated via the code so users with screen readers know there is a change of language?
• Data tables: can a voice input, screen reader and braille output user navigate within a data table?
• Scripting: will users with a non JavaScript enabled browser and/or an access technology be able to access functionality and know of changes on a page?
• Links: do they make sense to users especially to screen reader users?
• Text resizing: are users able to enlarge or minimise text to suit reading needs?

Images, animation and Flash

Overall some effort has gone into giving images an alt attribute with appropriate alt text. Logos tend to be well presented however there are a few images that seem to have missed out on an alt attribute. This tended to be the case on images that are links which means that not only does a screen reader user, braille output user and text based browser user not know what the images are, but also where they link to. In the absence of an alt attribute and alt text the image file path or the word “image” will be read out which apart from being laborious to listen to, or read if you are a braille output user, forces you to click the link and download the page in order to understand its contents.

On the home page there are 3 arrow buttons used in the date finder in the centre of the page. When clicked each arrow provides provide date options but this meaning is not replicated in the alt text and as a result the image file path is read. Here’s a text transcript of what a screen reader user would hear:

homepage_cn/j_1
MM
11
homepage_cn/j_1
DD
2007
homepage_cn/j_1
YY
homepage_cn/calendar_btn

In the above the text homepage_cn/j_1, homepage_cn/j_1 and homepage_cn/j_1, also indicated in bold, are in fact the arrow images that lack alt text. As can be seen, in the absence of an appropriate alt text such as “Select a date”, “Select a month” and “Select a year” the i,age file path is being read. This is further let down by the fact that the “Go” button also lacks an alt attribute and is read out as homepage_cn/calendar_btn.

Further problems arose with animation used on the site. On the homepage alone there are five animations which for most people is way too much. This is not a surprise as back in my days of working on Chinese websites in Shanghai it was often hard to find a site that had anything static on it as design seemed to err on the side of animation. Animation is by no means not allowed in terms of accessibility but it does need to be considered with the user in mind. It can be distracting for all of us but particularly so for users with reading problems, low vision, people using screen magnification and, in extreme cases, users with epilepsy and photosensitivity.

Let’s take a look at the issues encountered by users with screen magnification as an example. This could include users with either low vision or reading problems such as dyslexia. Typically if you magnify the page you may well find you only get a credit card size of the page visible on screen. If this is totally taken over by an animated image that also stretches beyond that space available on your screen you’re going to not only find it pretty unpleasant on the eye but also disorientating. Many people with dyslexia can feel nauseous after short periods of looking at the screen and animated images simply add to the issue.

The advice is to restrict the number of animations on a page to a minimum. Personally I wouldn’t go beyond one but three is acceptable. You also want to give the user control over the page by providing an on/off switch so that users have control over movement in the page. This is provided in the main banner image at the top of the page which is a good start but a switch would work perfectly for the sports category scrolling bar in the centre of the home page as well.

The other major issue with scrolling links such as these is that they can be difficult to click for some users as they move to fast or move erratically. Also, crucially these links were not keyboard navigable. This results in people who struggle using a mouse or keyboard only users unable to access those links. Very frustrating.

There is quite a lot of Flash on the home page of the Beijing 2008 site. Since Flash made a great leap forward (no pun intended) in 2004 and improved it’s accessibility this is not necessarily a bad thing however the Flash objects on this page themselves are not accessible and this really needn’t be the case. It’s not the technology at fault here but the designer. The uses of Flash in this instance are not overly complex and could easily be made accessible to screen readers, who used to have the most problems with Flash, by simply giving names to the objects (almost like the Flash equivalent of alt text on images). Guidance for accessible Flash is easily available on the Adobe site.

By not having accessible Flash or HTML alternatives, such as images with alt text, a screen reader user is unable to access the content of the Flash at all. This also means that the video, delivered using Flash is not accessible to anyone without Flash.

Video

There are a few videos on the site that will presumably be added to. The good thing is that they are given together with a brief text description that introduces that video however this is let down by the fact that there is no text transcript of the voice over or description of what is happening in the video. To cap it all off the voice over is in Chinese on the English version of the site meaning it is likely to be inaccessible to the majority of people accessing language versions of the site other than Chinese.

Translations of the voice over should be provided both in audio and text format given the videos are in the English site. The same goes in the French version of the site and any future versions that are added. Without this there is no guarantee that a hearing or visually impaired user would be able to access content or indeed non Chinese speakers. An alternative to the Flash deliver also needs to be looked into.

Heading structure

It’s good to see that there is a heading structure given in the site. That said it does need to bit of tweaking to make it truly useful and logical. Coding visual headings as structural headings using H1 to H6 is essential for users of access technologies such as voice input, screen reader and braille output software. Two key reasons for this are that they provide a contents overview for people who can not see the page and provides in-page navigation as users can use keyboard commands to jump between sections of a page. Without a heading structure a page can feel very much link a long stream of text that is not grouped according to topic. Imagine a newspaper that didn’t have visual headings on the page and one story ran into another.

With a few amendments it would be easy to add in an appropriate H1 for all pages as logical sub-headings. Going through this process may also help the editors rethink what content should and shouldn’t have a heading as well.

Changes in language

Given that this is the ultimate in a global website this is very important not just for accessibility but also for internationalisation. That natural language of pages has been provided however any changes to either French or Chinese is not coded correctly and should be added in. I’ll be looking more at the language issue in Part Two.

Data tables

A data table is essentially a table that presents information such as timetables, results in rows and columns.

While there are only a few on the site now this is something that will feature heavily in the site next year and is obviously quite important. A quick look at a few pages however shows that data tables have not been marked up to that the column and row headers are visible to access technologies by using TH.

The table has six headings “Olympic games”, “Disciplines”, “Events”, “Medal”, “Nation” and “Name/Team” (with only the first three shown in the image). As these are not coded correctly a user will only hear a stream of information and will not be able to query where in the table the information is.

For a screen reader user this is how the table sounds now:

table with 6 columns and 4 rows
Olympic Games
Discipline
Events
Medal
Nation
Name / Team
2004 Athens
Wrestling Freestyle
74 - 84kg Men
GOLD
USA
SANDERSON,Cael
2004 Athens
Wrestling Freestyle
60 - 66kg Men
SILVER
USA
KELLY,Jamill
2004 Athens
Wrestling Freestyle
- 55kg Men
SILVER
USA
ABAS,Stephen
table end

Pretty confusing. All these should be coded as TH and SCOPE used so that a user with a screen reader or voice input can use a voice or keyboard command to have the column header of the data cell read out and therefore filter categories.

On the plus side what does work well is the use of colour on alternate rows. This makes it easier for the eye to follow than a table that is just one colour and is a good example of when colour can be used to enhance accessibility. If each row only has one link in the accessibility for motor impaired users could also be further enhanced by using JavaScript make each table row clickable rather than just the link. Care must be taken to ensure it is keyboard navigable however and not mouse only.

Scripting

JavaScript is used throughout the site and doesn’t seem to have sufficient alternatives to ensure that all users with access technologies can access all functionality. Examples of the types of functionality reliant on JavaScript include all the usual suspects such as links, drop downs, form submissions and new windows (which incidentally do not have warnings). Alternatives should be provided under the Web Content Accessibility Guidelines 1.0.

Links

With just a quick look at the home page you can see that there are a number of links that have the generic link text “more” and “full story”, all of which link to unique pages. This can cause considerable frustration for screen reader and braille output users as it gives no indication of where the link is going when listened to out of context. For example a screen reader user can use a quick keyboard command to list links within a page alphabetically. When doing this using the Jaws screen reader you get a list of links that simply say “more”, “more”, “more”, “more”, “more”, “more”…you get the idea. Using link text that describes the page it links to is the answer i.e. using “more news bulletins” rather than “more”. This will also make pages far easier to scan and quicker to use for sighted users as well.

There is also considerable duplication of links on the site i.e. two links on a page worded differently that go to the same page. This is one of those issues that make sites not inaccessible as such but less usable for many users; a hidden barrier to access.

The Beijing 2008 home page has an all to common example with the main news story in the centre of that page “Beijing movie fans enjoy sports films” followed by the link “Full story” after it. This is a problem as it means that there are more links for a keyboard, voice input, screen reader or braille output user to tab through when navigating a page. It also clutters the experience for users with hand-held and mobile devices. This is particularly important on a site such as this as I imagine that many people will be accessing results and schedules while on the move to get updates.

The advice here is to avoid the duplication of links where possible. If you have a text link sitting next to an image link to the same page then place it within the same link.

Text resizing

Fixed font sizes prevail in the site making it difficult for users to resize text via their browsers to suit individual reading preferences. This is something that can be frustrating for us all. Some of us prefer or need larger text to comfortably read online and some us prefer smaller text. If you have tunnel vision it can help to scale text down so you get more in your line of sight. But if not coded correctly the results can be disastrous.

When resizing text in Internet Explorer 6.0 nothing happens and when resizing in Firefox 2.0.0.4 we get truncated and blurred text.

This is made worse due to line-heights being fixed and not flexible i.e. using points or pixels. Flexible fonts and line-heights such as percentages (%) and em are a must. That way the page can render the size it is intended but can be customised by the user so they can read it.

Conclusion

I’d say that while the site falls short of the basic level of compliance in the Web Content Accessibility Guidelines 1.0, with a little effort it could make some huge steps forward. With over a year to go, the Beijing 2008 website has plenty of time to start rectifying the accessibility issues listed here and anything else that may be lurking under the bonnet. It would be great, for example, to add an accessibility help section as well as visible “skip” links.

My suggested steps in the process of improving the accessibility of the Beijing 2008 Olympics website are:

1. Decide the conformance level: WCAG 1.0 Priority Single-A, Double-A or Triple A or WCAG 2.0 Level A, AA or AAA or WCAG 2.0 Level A, AA or AAA. Either way I would suggest the site would do well to reference the Success Criteria and Techniques in WCAG 2.0 when planning how to address issues.
2. Benchmark the current site for accessibility: carry out an audit and see where the site is in terms of conformance today.
3. Plan changes: prioritise issues identified in the benchmarking exercise and decide if changes need to be carried out in one go or stages.
4. Train the team: ensure that designers, developers and content editors are clear on what their responsibilities are on the site and, more importantly are bought in and understand why they are making these changes.
5. Develop design and content editorial guidelines: this will ensure that not only is accessibility is built into the site but that it is maintained in the site during the games as editors are updating news, results and schedules.

While reviewing aspects of the design for accessibility, steps should also be taken to make changes to insure that it is fit for purpose for different cultures and languages as well as mobile access. If any website should be internationalised, accessible and optimised for mobile access it has to be the Olympics website after all.

In Part Two I’ll be looking at internationalisation.