HTML5 banner ad accessibility basics

Even simple animated display ads can exclude users with disabilities if they are not designed and built carefully.

Add Alt Text to Images

Provide alternative text for any images within your banner. For example, users of screen reader software will hear “animated banner with red shoes” for this example, rather than “image” or nothing at all.

Include a Pause Control

Animation can be very detrimental to individuals with a vestibular disorder as well as people with attention deficits. In such a case the HTML5 advert needs to be able to be paused, disabled or hidden by the user within more than 5 seconds of animation.

Check Your Colour Contrast

Body copy should have a minimum contrast ratio of 4.5 against the background. Use a free contrast tester to check the contrast of all your text and background colours before approving creative.

Test Keyboard Focus Order

For users who are fully keyboarding, verify that all of the interactive elements on the banner (e.g. buttons, links, close controls) receive focus in a logical order and display a clear focus indicator. There is more on HTML 5 Ads at //thebannermen.com/banners/animated-ads/html5.

It’s basic stuff, but it’s worth noting to ensure that your animated display ads reach as many users as possible and comply with expectations.

Leave a Reply

Your email address will not be published. Required fields are marked *