We’ve been commissioning banner ads to place on other websites recently so I thought I’d share some of the guidelines we work to in-house when commissioning accessible advertising. It’s hard enough to know at the best of times how to deal with content on your site but when it comes to advertising, especially third party, what Web Content Accessibility Guidelines (WCAG) apply and what should we be doing to make advertising accessible?
This article builds on Tips for creating accessible banner ads so if you’re looking for answers then read on.
Whether you are creating adverts in house to put on your website or you are commissioning an agency to create ads for you to place eleswhere what follows is a list, in no particular order, of things that need to be considered when creating and delivering adverts on a web page. Note that at the end of each section we link to additional resources in the Design and Build section of the Web Access Centre where you can find further information on each issue as well as testing techniques, WCAG references and further resources.
Colour
Avoid poor contrast and reliance on colour alone. Dark colours against light backgrounds, and visa versa are best. Avoid colour combinations that ‘vibrate’, such as red and purple, or exclusively pastel shades.
Colour contrast within an image or Flash object is essential in order for the user to read text. We recommend checking that contrast be a ratio of at least 5.1.
Finally, colour should also not be relied on alone to convey information, an alternative must always be provided in the form or text or shapes.
More information about colour contrast and using colour alone.
Fonts
Only short sentences will fit within the confines of most banners, so your text will need to be short and succinct. In fact this is desirable even when space is available as it is not easy to read text within an advert especially if it is animated. If you find that there is a lot of text you want to include consider adding it to the web page to which your banner will link.
Fonts must be readable and where possible at least 14 points bold, or 18 points or more for normally weighted text. Ideally sans serif fonts such as Verdana or Arial should be used and maintain high colour and tonal contrast between the text and its background. Text should not be overlaid over images as this can obscure readability as can italic or capped text.
More information about font sizes and writing for the web.
Animation
Animation is very popular in advertising an banner ads. This isn’t breaking the rules as such but it does need to be implemented with care. Animation should be gentle and not too fast - especially for text. If it is too fast, busy or crowded many people will struggle to read the ad. This is especially true of screen magnification users who may have a page scaled up to the extent that they can only fit the ad on screen. Animated ads can also be a distraction when trying to read other parts of a web page so we recommend that you restrict the number of banner ads to just one, and no more than two.
Where possible limit animation to smooth and gentle fade in and fade out transitions, known as “phases”. Enough time must be allowed for everyone to read any text, or absorb any imagery before there is a transition to the next phase of the animation. This means in practice there can only be between two and four phases in an animation, otherwise the animation may become excessively long. Total length should be kept under 20 seconds.
Usually an animation or Flash banner will loop through it’s phases two or three times and stop. You will have to decide on which phase to halt the animation. That is, at the end of the animation, with which image do you want users to be left. This image should work on its own, and not be enigmatic or meaningless without the context of the rest of the animation.
More information about animated images
Flickering
Flickering content can be very distracting for all users but especially those with photo sensitivity. You should avoid flashing intervals of three times in any one second period as well as quick changes from dark to light.
More information about flickering.
Scripts
Scripts can be used to deliver ads into your site but an alternative must be provided for people who do not have scripts supported either because their software doesn’t (such as text based browsers) or because they have scripts switched off for security reasons. Ensure that image alternatives are still accessible when scripts or Flash are disabled.
More information about JavaScript.
Flash
Flash animations should follow all the good design principles laid out here in reference to colour, fonts, movement in order to make them visually accessible. In order to ensure that they are screen reader accessible Flash 7 or higher should be used although it is always preferable to use the latest version.
As with ordinary images, you will need to provide an alternative textual description for all Flash movies. Usually this is not a straight description of what the banner looks like, or how it behaves. Rather it is the message conveyed by the banner. This may be exactly the same as the text in the banner, or an edited version.
More information about Flash in general and RNIB’s accessible Flash banner ad guidelines.
Image alternatives for Flash
Not all users will be able to view Flash objects in their web browser. Often this is a deliberate choice or it may be due to the software they are using to browse a page such as a screen reader, hand held device or text based browser. What you need to do is present them with an ordinary image instead.
The image should be just one of the phases of the animation; often the phase that the animation terminates on. Sometimes however it is better to design a completely new image. The same accessibility requirements for images, text and colour must be met. An alt attribute must be given to the image with appropriate alt text that describes the target of the link. This should not be a literal description such as “This links to the such and such products page” but rather something more snappy and marketing orientated (it is an ad after all) such as “Cheap deals on such and such - click here!”.
More information about alt text on image.
Pop up windows
Most pop up ads will open in a new window, this is acceptable as long as the user is warned that this will happen. If warnings aren’t given then people can often be left confused as to what has happened and will try to use the back button in the browser to go back. It’s easy enough to inform people by appending the text “new window” to a Flash object’s name or an image’s alt text i.e. “Latest deals from XXX, new window”. As with alt text however remember to keep text short and succinct. There is no need to write “…this link will open in a new window”. This is both laborious to read and to listen to for screen reader and braille output users.
More information about pop up windows.
Accessible banner advert checklist
Based on the above the following must all be met in order for an advert to be accessible:
- Colour
- Colour contrast exceeds a ratio of 7.1
- Colour alone is not used to convey information
- Font
- Fonts are at least 14 points bold, or 18 points or more for normally weighted text
- Where possible sans serif fonts such as Verdana or Arial are used
- Text is not overlaid over images
- Text is not in caps or italic
- Animation
- Where possible limit animation to smooth and gentle fade in and fade out
- Limit animations to two to four phases
- Animation length should be kept under 20 seconds
- Flickering
- Flashing intervals do not exceed 4 to 59 flashes per second (Hertz)
- Scripts
- HTML alternatives are provided for scripts
- Flash
- Image alternatives are provided for Flash
- Pop up windows
- Warnings are provided
Post a comment