I am just writing an academic article on accessibility (more about that some other time) and I had to include some user journeys where pre-sales, marketing and especially advertising was kind of a start point. This post will briefly list the issues that came to my mind when I was thinking about possible issues and doing some manual and automatic accessibility testing of random online ads.
We have to consider ads themselves, platform serving them and integration
To summarize – a lot of online ads are injected into websites via iframes that are hosting them. This means that we have to consider three parts:
- Advertisement itself – for example image banner, animation, video.
- Ad platform possibilities to serve ad – for example wrapping whole image in a link or having multiple links with multiple images and texts or maybe just a video with links and buttons (unmute, pause and so on).
- Website integration – usually an iframe or maybe a fancy web component created on the fly by the ad platforms script.
Some common accessibility issues of advertisements
Again – it depends on the format – but often we have an image with some people, products, decorations and some text. That’s quite a standard add.
What can go wrong, it’s an image wrapped in a link, right?
- Poor contrast of text in the image.
- Poor contrast of any interactive elements.
- Unstoppable animations.
- Blinking and pulsating that can’t be stopped.
- Missing keyboard support.
- I’ve even seen some ads using aria-hidden and therefore invisible to screen-readers.
- When inspecting accessibility name or link text it is totally wrong.
With video we have the usual suspects:
- Autoplay that can’t be stopped.
- Auto-playing audio (luckily not so common, but it still happens).
- Unstoppable continuous flashing content.
- Missing text alternatives (captions).
- Video content referring to color, shape, location,…
These come to my mind but I am sure that there are many more and I will add them when I encounter them.
Advertising platform initiated accessibility issues
It doesn’t help if our advertisement is accessible if the tool that hosts it doesn’t allow us to present it properly. Some common problems:
- Not possible to set alternative texts or link texts.
- Non-conformant code that causes issues.
- Not possible to set iframe title if that’s generated automatically.
- Inaccessible video player that wraps our video ad.
Platform that is used to host our ads must be flexible enough so that we have possibilities and control. Otherwise it is a potential source of accessibility issues that can be inherited by our website (or app).
Advertising on social media is a giant marked and all of them that offer advertising has own possibilities or lack of them in regards with accessibility. So before advertising on social media, when we really consider accessibility, we should investigate the possibilities. Some social media have issues that prevent us making ads accessible and in some cases it is possible to find work-arounds.
I suggest checking the documentation of your target social media prior engaging with ads if you want to integrate accessibility.
Website integration causing inaccessibility of ads
Both ad and it’s platform can be accessible and if we somehow integrate them wrongly we can introduce accessibility problems. Some are maybe theoretical or just small impracticalities for the user and some are maybe a cause that user don’t even know there is an ad at all.
- Wrong iframe title – not a major problem but still a problem.
- Hiding ads with aria-hidden set on the iframe or it’s parent (or on the parent of the component presenting the add).
- Invalid code that seems to work but breaks some browsers or assistive technologies.
Complexity of ads can make integrations complex as well. And we have to be careful to not introduce accessibility issues when integrating as well.
To conclude – ads should be accessible as well
You pay for your online ads and you want them to be presented to people. Making them inaccessible in any segment (ad itself, platform, integration) makes it potentially weaker in terms of user reach. Keyboard only users that can’t navigate to an add can’t follow it’s link. Screen-reader users that don’t get the add when looking for content because code prevents it can’t follow it either. And then there are also all kind of other things that may not be known to us about our users, like people leaving websites because of aggressive ads, or because they can’t stop them, some maybe even getting seizures because somebody thought that flickering will get more attention to the add.
