7

We've recently begun using Google Tag Manager on our site, as well as using a tool that tests accessibility.

Running our site against WCAG 2.0 Level A results in an error (WCAG 2.0 Level A 2.4.1 and 4.1.2) when it comes to the iframe generated by Google Tag Manager.

<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

Frame titles are a little new to me, so what is the recommendation on the title for this element? HTML img elements allow for an empty alt/title attribute (<img src="cosmetic-image.jpg" alt="" />); can we do the same here, or does it impact accessibility for users?

To hopefully add a bit more clarity on what I'm looking for, for a user with accessibility needs, how can I denote that an iframe/frame provides no content the user would need to read/use?

My initial feeling was to put 'Google Tag Manager' as the title, but the average user isn't going to understand that, versus if there were content and I was putting 'Global Navigation,' 'Main Content,' or the like.

  • this might be outside the scope of UX and getting into the implementation details. – DaveAlger Dec 15 '14 at 15:37
  • 1
    Well, I know how to add a title onto the element, what I don't know is what, from a user's perspective, would be the best title text to put on it. If an image is purely cosmetic I know I can do something like <img src='blah.jpg' alt='' />, but I don't know what something like this would need. For a user with accessibility needs, how can I denote that an iframe provides no content the user would need to read/use? I'll append this onto my original question. – James Skemp Dec 15 '14 at 15:44
  • 1
    ok that's more clear thanks. good question and i don't know the answer :) – DaveAlger Dec 15 '14 at 15:46
  • What is the error you get? – unor Dec 16 '14 at 10:12
  • @unor I suppose it depends upon the tool used to check, but we're using SSB Bart's AMP and getting an 'Ensure frame titles are meaningful' error. It points to 2.4.1 and 4.1.2 in WCAG 2.0 Level A. Thanks! I'll get that added into the question. – James Skemp Dec 16 '14 at 13:41
6

(Ignoring the error your checking tool reported, which may or may not be an actual error.)

If you want to state that the iframe content is not meaningful (i.e., only decorative/presentational), you could use the presentation role from WAI-ARIA.

In HTML5, the iframe element can have one of these WAI-ARIA roles:
application, document, img, presentation.

As Ville Niemi points out in the comments, the aria-hidden state should be used instead (as you seem to hide the iframe with CSS). Adding a role is not needed then, as it doesn’t matter what role something has if it’s not perceivable in the first place.

  • 3
    Agreed. This is not strictly speaking correct semantically, but is probably needed for GTM to work. The title attribute should then be set to "Google Tag Manager". Also since it has visibility: hidden; there should probably be aria-hidden="true" attribute. I think aria-hidden is actually sufficient, since it tells accessibility to ignore this which is probably what is wanted. – Ville Niemi Dec 16 '14 at 15:38
  • @VilleNiemi: You are correct, thanks (I missed that OP hides the iframe via CSS). I updated my answer. – unor Dec 16 '14 at 16:08
  • @VilleNiemi That helps quite a bit, and from the docs appears to be exactly what I was looking for. Unfortunately, I did have to put the title attribute as well to satisfy the tool, but ... works for me! Thank you both! – James Skemp Dec 18 '14 at 21:34
  • @JamesSkemp There actually is a solid reasoning for requiring a title for iframes, as DaveAlger notes in his answer iframes are considered same as pages and pages are required to have titles, so iframes must also have one. In your case the title should identify the service being linked (as the actual content returned is not really a page). And since the iframe is not actually "content" it needs to be tagged so it is ignored. Browsers apparently follow css visibility rules, but other software or devices may not, so aria-hidden is needed. – Ville Niemi Dec 18 '14 at 22:03
  • @VilleNiemi It might be worth putting your two comments as an answer? You'd get at least an upvote from me, if not the accepted answer. :D – James Skemp Dec 19 '14 at 21:54
2

As far as browsers are concerned, the title of an iframe element <iframe title="Web Page Title"> is exactly the same as the title of any web page <head><title>Web Page Title</title></head>

You can find the information you are seeking in the following thread.

How should a website's title be structured?

  • In this case, the HTML of the page is as follows: <!DOCTYPE html><html><body></body></html> so the title would be blank. – James Skemp Dec 15 '14 at 16:11
  • From a UX point of view I would expect them to match so you should consider fixing the titles in the pages directly. Accessibility tools are their own beasts (software/hardware alike) It's possible that some of them handle iframe content in a more direct manner ignoring the title attribute of the iframe tag. – DaveAlger Dec 15 '14 at 16:28
  • Unfortunately these are provided by Google, as part of their Tag Manager. google.com/tagmanager It's basically a way to offload management of marketing-related JS and the like. For us we've mainly moved our Analytics code to this, instead of having it in the page. (It's a little unfortunate that the original title was modified, as it started with 'Google Tag Manager' in the question, whcih might have kept it clear it's really not for user consumption.) – James Skemp Dec 15 '14 at 16:32

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.