Accessibility Problems in Dove's Real Beauty Sketches
Dove does good marketing. Their Real Beauty Campaign was a lovely change of pace in a marketing world full of airbrushing and anorexia. Their newest campaign, Real Beauty Sketches, is a thoughtful follow-up, and has earned mostly positive commentary (and a few reasoned objections). I encourage you to visit the site and experience it.
Except, if you are in the minority that possess one or more disabilities that inhibit or prevent the consumption of certain web media, you won’t be able to experience it. Or, at best, your experience will be more like an endeavor.
The web developers at Ogilvy Brazil (Dove’s agency on this project) have built a page that breaks many basic accessibility guidelines.1 Here is why visitors with low-fidelity connections, hearing challenges, mobility impairments and vision disabilities will be hard-pressed to get the complete story.
Almost No Text is Accessible
If you’re a user who can see well, has no mobility impairments, has a large screen and reads English or Portuguese, you’ll have a great reading experience. Otherwise …
The Opening Text
The page’s opening text is rendered as an image, set to a background via CSS. Inside the
<div> there is an anchor tag with a single word: “dove”.
This guarantees lots of things:
- No screenreader can read back any text, except “dove”. An entire paragraph of information, including the entire reason behind the campaign, is lost.
- If a visitor is using IE with enlarged text, that image will remain locked in size. In a more traditional browser zoom, where the whole page scales, the text becomes heavily aliased and hard to read.
- It cannot be selected, which means it cannot be subjected to on-the-fly translation.
- It cannot be parsed with custom user styles, which may help increase size or contrast.
- It cannot be indexed properly by search engines.
It is worth noting the developers included a second
<div> containing a complete copy of the text, but hid it with
display: none. As has been the case for a decade,
display: none allows nothing to access its contents: no human, no browser, no screenreader, no search engine, no mobile device except primitive feature phones from the 90s. The only way to see hidden content is if the page renders without CSS, which is a practical use-case of never.
Text rendered as an image is a generally inept way to do the internets, but there are ways to make it more accessible. Two, in fact:
- Place it via an
alttext. This is precisely why we have this attribute.
- Place it as a background image inside an element that contains the full transcript, but then hide the text using an intelligent image replacement technique.
Of course, the ideal scenario is to stop messing with images and just make it HTML text.
- Finds each word,
- renders it as an image inside a span,
- and then puts it back on the page.
Here is how a “normal” visitor would literally read the text:
FBI trained artist talks about his experience in the forensic world and how that influenced this experiment.
Here is how Apple VoiceOver reads the text:
Image. FBI. Image. Trained. Image. Artist. Image. Talks. Image. About. Image. His. Image. Experience. Image. In. Image. The. Image. Forensic. Image. World. Image. And. Image. How. Image. That. Image. Influenced. Image. This. Image. Experiment.
Cufón, sIFR and other bygone typography hacks were products of designer vanity. They’re antiquated. There’s no way to make Cufón better except to not use it at all.
Video playback is via YouTube, which has advantages: fast delivery, playable on just about any device that can play full frame video, and a captioning engine built in. For a campaign reliant on video, there are far worse choices. If nothing else, there are more accessible versions of YouTube using their own API.
The problem here is captions. The main video has Portuguese captions embedded so they can use the same video on both language sites. That’s fine, except for the embedded part. When YouTube’s dynamic captioning is turned on, the new captions overlay the embedded text.
Worse, the automated speech-to-text is complete gibberish. With a wee bit of effort, the team could have used properly encoded captions. With the effort that went into creating and laying in the Portuguese captions, this would have been trivial. (The silver lining here is that visitors to the Portuguese version of the site have an inherently more accessible video, even if by accident.)
- Not a single focus state.
- No way to control YouTube videos.
- No way to navigate through Disqus comments.
- No way to activate anything in the portraits exhibition.
Within each portrait in the exhibition, there is a form to email a friend. Unfortunately, the form to do so breaks almost every accessibility best practice in existence to the point that the only way it could be worse would be to build it in Flash, render it via a Java applet, and then ask people to print it out and fax it back.
- No identification for fields. The fields have no corresponding
<label>tags. They don’t even have
titleattributes. In fact, the only clue to their individual purpose is
placeholdertext which is not a replacement to a proper label.
- The placeholder text has no polyfill for older browsers, which I would say is a problem, except that accessing the form is 100% reliant on CSS transforms, which also have no polyfill, which means fuck all if you’re using anything less than the most current version of a desktop browser.
- The form submission is not a button, but
It’s worth noting these forms are problematic to the point that they are hidden from iPads.
The initial load of the page is 144 requests totaling 1.9 MB. Since there is no mobile-optimized version, all visitors are served the same assets. Anecdotally, testing with an iPhone and a Windows Phone over 3G sucked; I waited a long time just to start seeing elements appear.
Looking at the breakdown, it’s not hard to see why.
Besides the basics of image optimization, unconcatenated scripts and frivolous CSS, there are tons of social media junk and the aforementioned Cufón. This page gets a “D” grade on ySlow using the V2 ruleset, and an “F” grade using the classic V1 ruleset.
Performance is not just usability, but accessibility. Overburdened wifi, unreliable 3G/4G, throttled connections and even dialup are hard realities.
Conclusion and Lessons
We have a beautiful campaign with heart and honesty, but it can only be experienced by users who fit the cultural assumptions and technical biases of the developers. Dove spent real money on the talent to produce fantastic stories, but let a web team deliver an utterly subpar product.
The good news is we can learn from this. The basics make a big difference:
Let your text be text.
When words are native HTML text, it can be resized, translated, selected, accessed. Locking it into images is conceited. It has precisely zero benefit to anyone accept your creative director who must absolutely have Helvetica Neue 35 Thin because it adheres to an arbitrary style guide.
Videos are better with captions.
For stories so powerful, understanding the dialogue is critical. Captions can be completely non-intrusive visually, and with YouTube, easy to implement technically.
A mouse is not attached to every computer.
Not everyone can use a mouse, or has a large touch-enabled device. The ability to navigate via keyboard cannot be ignored.
Not everyone has a new browser.
Graceful degradation, progressive enhancement, adaptive design — whatever you want to call it — goes a long way in ensuring as many people as possible can enjoy your content. Targeting only the newest browsers sets a dangerous tone of exclusion.
Forcing MBs of superfluous scripts (40!) and images (66!) reflects developers not willing to step outside their high-capacity comfort zone.
Finally, it took me awhile to publish this post because I do not want people to feel I am attacking the campaign. Actually, the opposite. The campaign is good. But its delivery via the web is terrible. That’s an injustice and a missed opportunity. This post is intended to illustrate how we — the collective building web experiences — can avoid similar mistakes.
1 For those who are curious, I tried to reach out to Ogilvy Brazil directly about this. There is no direct contact info, so it was through indirect channels. If I get a response, I’ll update this post.