I love this because reading data in a table can be a frustrating and unforgiving task. A table is often a good way to collect and collate the data, but not always the best way to present and make sense of it. Using a visual aid such as a graph or chart makes the data so much easier to follow and is also in line with that often overlooked Web Content Accessibility Guideline 1.0 (WCAG) checkpoint 14.2 “Supplement text with graphic or auditory presentations where they will facilitate comprehension of the page”.

This is only one part of the story however. When testing his solution Chris asked Victor Tsaran, one of the key accessibility people at Yahoo!, and also a screen reader user himself, to check it out and see how well it rendered for him. This led Victor to ask if it could be done in reverse i.e. convert an accessible chart into an accessible data table.

So the result is a really handy conversion tool. In my line of work I’m often advising people to provide data table alternatives to complex graphs and charts and vice versa and this will be a great resource to point people to.

Everything’s licensed under Creative Commons so you can download the script, a demo and the CSS.

If you have any top tips to ad I’d love to hear them so leave a comment.

1. Provide a text equivalent for the animation.

As with images Flash animations must have a text alternative to ensure that they are readable by screen readers. This only needs to be done for graphical elements in Flash though, as text in Flash is read automatically by screen readers.

When making a Flash banner advert made up of images accessible there are two choices: make the whole animation accessible as one entity or make the individual graphical elements in the banner advert accessible individually.

Scenario one: If each graphical element in the Flash banner advert has no meaning by itself then the whole movie must be given an alternative. This can be done via the Accessibility Panel or by using ActionScript.

To provide a single text equivalent for a Flash animation, first make sure that nothing in the movie is selected. If using the Accessibility Panel select “Make movie accessible” ensuring that “Make child objects accessible” is deselected then give the object a Name or description.

Scenario two: If each of the objects brings individual meaning to the Flash animation then they should each be given a Name or Description.

If using the Accessibility Panel select “Make object accessible” ensure that “Make child objects accessible” is deselected then give the object a Name or description.

Names and Descriptions: As with ALT text the Name or Description should be short, succinct and to the point. Typically the Name is used for short descriptions and Description for longer ones (similar to alt and longdesc attributes in HTML). Screen readers don’t make a distinction between Names and Descriptions however and will read both by default so it’s not recommended to use both as this can lead to an overload or repetition of information for the user.

When choosing the Name or Description follow the same rules that apply for alt text. As Flash banner adverts generally link to other pages or sites, ensure that the user will understand where the link will lead. Avoid redundant link text such as “Link to…”, “Click here to…”, “Image of…” and so on.

2. Provide an alternative for the Flash animation

Not everyone will have Flash installed or will have a version of access technology that can read Flash so an alternative must be provided. This could be the Flash animation presented as an image alternative within the OBJECT which will then be displayed in the absence of Flash support.

The image banner advert must then follow the standard rules for images, which are:

• An alt attribute is provided
• The alt text must be appropriate to the image. If the image is text then the text must be replicated. The target page of the image must also be clear from the link text. If text is long you can summarize it rather than replicate it word for word.

3. Readability

Colours and text must be readable to all users. It’s also advisable to keep text on a Flash banner as short and pithy as possible i.e no more than a very short sentence at most but preferably shorter. Remember also that if the Flash banner loops you will want to keep text short so that people have time to read it comfortably.

Colour contrast: colours must have a contrast ratio of at least 5:1. Larger-scale text can have a contrast ratio of 3:1. Larger text is text that is at least 18 point if not bold and at least 14 point if bold.

Information conveyed with colour: avoid conveying information by the use of colour as this will not be possible to pick up if using a screen reader of if browsing in black and white.

Font size: Fonts must be big enough to be read comfortably. Unlike HTML it is not always possible to increase font size in a Flash banner advert so choosing a larger font is advised. Anything above 18 points is considered acceptable. To boost readability making them bold is always useful.

Font style: Keep fonts readable by choosing web safe styles such as Verdana or Arial, and avoid Italics and justified text. If font sizes are larger there is more flexibility over font styles, but they should still be clearly readable.

4. Looping and blinking

For people with low vision, reading problems, using screen magnification or on small hand-held devices animated images can be very distracting and, if they display text, difficult or impossible to read.

Users can stop GIF animation by pressing their keyboard ESC key, but this isn’t effective for Flash, so moving, blinking, scrolling, or auto-updating information should have a mechanism to enable it to be paused by the user.

In addition, to ensure maximum readability and minimum interruption follow the same guidance used for animated images:

Looping: No animation should last for more than 20 seconds in total. In addition, repeated content shouldn’t loop more than three times. This can be achieved by:

• Controlling the number of frames in an animation.
• Where several frames are required, loop only twice.

Blinking: The speed and colour of content can make the animation appear to blink, in extreme cases, a strobing effect, dangerous to people with photosensitive epilepsy, might be caused. To avoid this:

• Content should not blink for more than three seconds
• Content must not contain anything that flashes more than three times in any one-second period

5. Test your move

It’s always advisable to test what you have created. You will need to test both the accessibility of the banner advert as well as the alternative.

To test the Flash, using Windows and Internet Explorer, download a free copy of a screen reader such as Window Eyes from GW Micro or JAWS from Freedom Scientific. Switch off the monitor and listen to the Flash advert and if it makes sense.

To test the alternative to the banner advert, remove support for Flash in your browser. In Internet Explorer 6, disable support for ActiveX or set the security settings to “High”. In Internet Explorer 7 and Firefox, temporarily disable the Flash or Shockwave Flash Add-on. Check the image replacement and check for appropriate alt text by switching off support for images.

6. WCAG compliance

WCAG 1.0: At the time of writing WCAG 1.0 remains the stable referencable version of WAI’s guidelines on accessible web design.

1.1 Alternaitives: Provide a text equivalent for every non-text element.
2.1 Colour and information: Ensure that all information conveyed with color is also available without color, for example from context or markup
2.2: Contrast: Ensure that foreground and background color combinations provide sufficient contrast
7.1 Flickering: Until user agents allow users to control flickering, avoid causing the screen to flicker.
7.2: Until user agents allow users to control blinking, avoid causing content to blink
7.3 Movement: Until user agents allow users to freeze moving content, avoid movement in pages. Priority 2.
11.4 Alternaitive versions: If, after best efforts, you cannot create an accessible page, provide a link to an alternative page that uses W3C technologies, is accessible, has equivalent information (or functionality), and is updated as often as the inaccessible (original) page. Priority 1.
13.1 Link text: Clearly identify the target of each link.

WCAG 2.0 is currently in draft format but is still useful to refer to for techniques of how to meet guidelines.

1.1.1 Text alternatives: For all non-text content, provide alternatives
1.3.2 Any information that is conveyed by color is also visually evident without color.
1.4.1 Colour: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
2.2.2 Pausing: Moving, blinking, scrolling, or auto-updating information on a Web page that lasts for more than three seconds can be paused by the user unless the movement, blinking, scrolling, or auto-updating is part of an activity where the changes are essential.
2.3.1 Three flashes or below threshold: Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.
2.4.4 Link Text: The purpose of each link can be determined from the link text alone, or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A)

7. Navigating Flash with a screen reader

Jaws / Flash keyboard commands are as follows:

• insert + escape = update screen
• down arrow = read next item
• up arrow = read previous item
• insert + down arrow = read all
• right arrow = read next character
• left arrow = read previous character
• enter = activate link

WindowEyes / Flash keyboard commands are as follows:

• tab = next link
• control + tab = previous link
• down arrow = read next item
• up arrow = read previous item
• page down = read all
• page up = go to top
• right arrow = read previous character
• left arrow = read previous character
• enter = activate link button
• control + shift + A = toggle MSAA mode to update screen

Note that text-based browsers can not support Flash.

8. Resources

Here are some using resources for accessible Flash:

• Adobe Accessibility Centre – Adobe’s resource for accessible Flash, PDF and other products
• Best Practices for Accessible Flash Design – a tutorial from Adobe using Flash Paper
• Making Flash Accessible – a tutorial from Access E-Learning
• Multimedia Accessible Flash – some tips from our own Web Access Centre
• Creating Accessible Macromedia Flash Content – a tutorial from WebAim

Islab is described as the official search tool for Second Life and is the latest addition to my list of slashups: mashups for Second Life. This is the best out of world search tool I’ve found so far making finding people, places and information so much more efficient and accessible than relying on the search in-world.

The joy of Islab is that it can search in-world as well as search through wikis, blogs and forums on the web. This is really handy if you are researching something but for some reason can’t get into SL to use the in-world search tool. I suspect for many that it may be the search option of choice as well as it is easier to use than the search in-world and also saves jumping between the client and the web when looking stuff up.

Although the search was only launched in November the Islab Community has been around since 2006 working away to help users better learn and experience the 3D internet and promote open source development. Islab is Chinese owned and run and aims to act as “a bridge between the chinese community and the outside world”. It’s an interesting irony that the Islab community sees itself as a bridge between the Chinese community and the outside world and yet is a bridge between virtual and real worlds.

If you want to find out more visit the Islab community in-world or check out the Islab blog. If you’ve used Islab, leave a comment, I’d be interested to hear what you think.