JM0
Use of aria-labelledby Attribute for Hover
Today, I received this email from La Redoute and was surprised to find it had working rollovers in Gmail. Really surprised.
I did a little digging and it looks like they use the aria-labelledby attribute to make rollovers work. Even in Gmail. Gmail doesn't strip this one out. It's not something I've seen before and just wanted to share it with the community. I don't know much about this attribute - not seen it used before in web or email. Can anyone forsee any problems that could arise from using this as a hook for CSS in email?
Hi Jaina ! This is a bit awkward… I actually worked on that email template ! (and last week was its very first use) I'm a big fan of using
aria-labelledbyin Gmail to compensate the lack of support forclassandid, and I've talked a few times about it here and there.The
aria-labelledbyattribute expects the value of anidfrom another element on the same page. One downside is that since I don't actually specify theidof another element on the page, the code is no longer HTML5 valid (with the W3C validator). A problem that could arise would be that a screen reader would not pronounce the content of the tag on which it's used because it's looking for an element that's not there. But from my tests on VoiceOver on OS X, this does not happen, and VoiceOver simply ignores the attribute in this case.So this is really hacky, and I wish we could simply use classes instead. But I think it's worth the shot. And I'm happy someone here actually noticed this, and I hope the customers will notice the rollover effects as well.
Awesome work Rémi! Thanks for sharing your knowledge on the accessibility side of things. I wonder just how many emails are HTML5 valid ;)
Going to try to introduce this little hack into my emails - anything to give the emails a little user interaction in gmail is a good step. Makes the email feel less like a simple flyer, and something more tactile, you know?
That is the ultimate thing - hoping the customers notice and appreciate it as much as email devs.
Thanks Jaina. This is exactly my point of view, too. And for recurring template like this one, spending a little extra time to add these kind of effects is paying off very quickly.
Hi Rémi - I coped the code from your email, in its entirety, into a blank template in our email tool, MailChimp, and sent it to myself just to verify that it works (which it did). I then tried pulling out one of the button elements and the corresponding css so that I can have a snippet of working code to use in my own emails. When I did this, I must have missed something because it no longer works. Do you have any thoughts?
Hi Brian. There is an extra
<style>tag in the<head>that contains all the:hoverdeclarations. Make sure to copy this as well.Hi Rémi,
I added the code to a MailChimp template that I customized and it still isn't working. Maybe you could take a look and see if you can get it to work (button hover isn't currently working in Gmail). Thank you for any help you can provide.
Hello Brian,
Gmail removes any
<style>tags that contains an@in a@rule. In your code, you have a lot of/*@editable*/comments in your@mediadeclarations. Thus, Gmail will remove all the content of your<style>tag. My advice is to use a secondary<style>tag with only your:hovereffects in it. Adding the following code on your template worked for me :Maybe you can take a look at my code and tell me what I'm missing:
Gmail doesn't support the
<style>tag in the<body>tag (which is implicit here). So you simply need to add a proper HTML structure around it, with the<style>tag in the<head>. I tested the following example and it works :