More information on cookies
Instinctively, one would think that advertisement doesn't come first when one thinks of accessibility. Yes, but it should not be overlooked either: as some of your users might report, regardless of disability, they would like to be aware of when certain films are available on the platform! Therefore we decided to launch a project about it in 2020.
In the beginning, trailers were developed by animators using Flash. It is an animation technology that we’ve all seen until it became obsolete, firstly because of the Apple ban of Flash on iPads and then because of the evolution of browsing technology towards HTML5 (to put it simply).
Adobe Animate thereafter replaced Adobe Flash, relying on this technological combination:
The trailers showed the following limitations:
– no subtitles (it’s a problem for our customers who are hearing-impaired or deaf),
– no access to video keyboard controls, and no way to follow through promoted links,
– no access to the contents for a screen reader user (visually impaired or blind customers).
This is the easiest issue to deal with: we suggested to integrate subtitles directly into the video stream with the advertising project manager. This even makes more sense now that browsers no longer launch automatically a video if the sound is not muted!
Thus we settled both our primary concern for accessibility and a big technical constraint: people who have not activated the sound have the same information as others.
To enable keyboard navigation, we had to go back and take a look at basic video components:
– a video in MP4 format,
– pictograms in SVG,
– event handlers.
To simplify keyboard navigation, we also had to make sure that the video object itself could not be focused (in other words that it could not be reached by tabbing on the keyboard).
In addition, we had to add a transparent link over the video: this link being natively focusable, leads to the URL provided by the advertising network.
There were still a few difficulties with screen readers:
– Each button must indicate its function (“Play video audio” / “Play video again”); in order to do this, we used certain attributes that are made for this (aria-label for the button, aria-hidden for the SVG that renders it).
– The link should be made up of text readable by a screen reader, which we visually hide so as not to overload the interface (for the experts, we use an sr-only class from Bootstrap).
Lastly, we still have to make sure that the frame that contains the trailer itself is well described (that is what is called an iframe, a frame internal to the web page the client is viewing), but as for the rest, the work is done and works:
– The elements can be accessed via the keyboard.
– The items are correctly described for a screen reader.
– Subtitles are systematically inserted.
What we did not suspect when starting this project, is that we would also gain a much more frugal result in terms of bandwidth: in the past, when we inserted a video using the system in place, the Adobe Animate libraries inserted about 246kb (kilobytes) of code, not counting the wrapping HTML. Our new accessible code weighs around 8kb, with everything included.
Based on an average of 18 million trailer views per month, the monthly bandwidth gain is around 4.2TB (terabytes)! And who says bandwidth gain also means carbon footprint reduction.
In the end, our approach was good for both accessibility and —surprise!— for our carbon footprint, which is a big win-win!
we want to know your view about design.orange.com