With HTML5 came the great and mighty data- attribute. There was much rejoicing and application of data- attributes with much fervour and pride. Yet it is often used when it shouldn’t be: when a much simpler solution exists.
data- attributes in HTML have been used as a catch-all solution, mostly for scripting. Evidence? Here’s one case, and I’m sure you’ve seen more.
Putting video online isn’t always easy, and you want to cover all your bases. Mobile, desktop, html5, mp4, ogg, flash fallback, HD, and any other combinations you can think of. We see people creating scripts that take into account all these different permutations and place video in their pages, usually with a thumbnail to click. Which brings us to code. Here’s a sample of what we’re seeing, quite often:
<a href="#movie" data-src="http://example.com/somefolder/somefile.mp4" data-this="yes" data-that="maybe" data-these="idunno"> <img src="/images/somefilethumb.png" alt=""> </a>
data- attributes everywhere. Overall the solution made sense (partly). The data-src attribute points to the base source file for the video. The href points to the div that should take the focus next — the video launched in a modal dialog, so that was where they needed to place the focus to allow proper keyboard access. This part was good.
We were testing the solution. It worked. The script kicked over to the right player in the right format at the right time in the right circumstances. Almost always.
There was something that went wrong in FireFox on Android. It wouldn’t show the video. It didn’t do anything, in fact. No response. No error message. Nothing. Why? Shouldn’t it have just selected and played the right format? Probably. But it didn’t. There was something wrong, somewhere in the script’s combinations and permutations. There was a hole in the script that wasn’t being caught. And because of that, when the video link is clicked, NOTHING happens.
So we made a small recommendation to change the script to work with different code, based on Progressive Enhancement — to create a working solution on top of another working solution. What is the easiest way to hand off to a native player, if you’re using a thumbnail that links to a video?
We make two simple changes really. Link to the video in the href, instead of storing the video src in data-src. And stash the id of the modal video player in a newly minted data-nextfocus attribute:
<a href="http://example.com/somefolder/somefile.mp4" data-nextfocus="#movie" data-this="yes" data-that="maybe" data-these="idunno"> <img src="/images/somefilethumb.png" alt=""> </a>
This way, the hole is automatically (and unknowingly) patched. Because that’s how Progressive Enhancement works. No matter how thorough and complete that script was, there’s always a chance that something won’t quite work. This solves the problem in a very simple and straightforward way.
The lesson? Use progressive enhancement
data- attributes are just fine. But remember this (emphasis mine):
Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
There’s a much more appropriate attribute for linking to a video. The href.
In the web front-end stack — HTML, CSS, JS, and ARIA — if you can solve a problem with a simpler solution lower in the stack, you should. It’s less fragile, more foolproof, and just works.