8

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.

Improve this question
5
  • this might be outside the scope of UX and getting into the implementation details.
    – DaveAlger
    Commented Dec 15, 2014 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
    Commented Dec 15, 2014 at 15:44
  • 1
    ok that's more clear thanks. good question and i don't know the answer :)
    – DaveAlger
    Commented Dec 15, 2014 at 15:46
  • What is the error you get?
    – unor
    Commented Dec 16, 2014 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
    Commented Dec 16, 2014 at 13:41

2 Answers 2

Reset to default
7

(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.

Improve this answer
5
  • 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
    Commented Dec 16, 2014 at 15:38
  • @VilleNiemi: You are correct, thanks (I missed that OP hides the iframe via CSS). I updated my answer.
    – unor
    Commented Dec 16, 2014 at 16:08
  • 1
    @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
    Commented Dec 18, 2014 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
    Commented Dec 18, 2014 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
    Commented Dec 19, 2014 at 21:54
3

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?

Improve this answer
3
  • 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
    Commented Dec 15, 2014 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
    Commented Dec 15, 2014 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
    Commented Dec 15, 2014 at 16:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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