Here are a few tips I’ve cobbled together for producing accessible Flash banner adverts. This is very much written from the perspective of an accessibility person as I’m not a Flash developer as such but I hope it gives some pointers as to what to think about when using banner ads. I’ve also included information about testing, compliance with WCAG, navigating Flash using Jaws and WindowEyes and some additional resources.
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.
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.
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