Summary

The google_tag module injects the stock noscript information immediately after the body opens. From an accessibility standpoint, the element presents itself (and descendants) as containing content, when it should not be interpreted by anyone.

Setting the style attribute on the iframe to display:none helps, though this still leaves the noscript tag hanging, and it does so outside of a marked region. Because of the way google_tag injects this content, it is not possible for themers to easily wrap their own solutions around it.

Proposed Solution

Applying aria-hidden="true" to the noscript tag will correctly mark this content as being hidden to all users.

Patch to follow soon.

Comments

davidwatson created an issue. See original summary.

solotandem’s picture

Would you elaborate on

Because of the way google_tag injects this content, it is not possible for themers to easily wrap their own solutions around it?

Is this going to cause more grief with the google verification service?

alexiswatson’s picture

StatusFileSize
new560 bytes

Patch attached.

alexiswatson’s picture

@solotandem I wouldn't expect it to, though review and feedback is welcome!

EDIT: I was originally working on a back version of the module, and I now see this has been refactored to allow google_tag_snippets_alter(). Although module developers can go in and implement this hook, having an accessible default is still desirable.

alexiswatson’s picture

Assigned: alexiswatson » Unassigned
Status: Active » Needs review
ttamniwdoog’s picture

Status: Needs review » Reviewed & tested by the community

Tested. Thanks @davidwatson!

solotandem’s picture

Title: GTM noscript needs aria-hidden state » Add aria-hidden state to GTM noscript snippet
Category: Bug report » Feature request

Does anyone have an answer to second question in #2?

solotandem’s picture

  • solotandem committed 5acf280 on 7.x-1.x
    Issue #2878894 by davidwatson, solotandem Add title and aria-hidden...
solotandem’s picture

Status: Reviewed & tested by the community » Fixed

Thanks for reporting this.

Also added title attribute and content.

andrewmacpherson’s picture

Adding aria-hidden="true" was overkill in this case. The iframe was already being hidden using display:none and visibility: hidden. Using either of these CSS property declarations is sufficient to hide content from assistive technology. Their effect is not solely visual, but also removes content from the accessibility tree information used by assistive technology.

mgifford’s picture

Worth re-opening?

andrewmacpherson’s picture

It's not doing any harm, just overkill. I mentioned it to raise awareness that display:none is sufficient, but it's not in need to reverting as such.

solotandem’s picture

@andrewmacpherson and @mgifford

I am game to revert this commit if it makes sense.

Do you disagree with the statement in the issue summary? Setting the style attribute on the iframe to display:none helps, though this still leaves the noscript tag hanging

One commentator online suggested using the HTML5 hidden attribute along with display:none in case a browser did not implement the former. But there does not seem to be one consensus answer. What is your opinion on this?

alexiswatson’s picture

@#13:

See #0 (emphasis mine):

Setting the style attribute on the iframe to display:none helps, though this still leaves the noscript tag hanging, and it does so outside of a marked region. Because of the way google_tag injects this content, it is not possible for themers to easily wrap their own solutions around it.

In other words, the iframe isn't the problem, but the noscript tag can be interpreted as a node with no content, which is silly and confusing.

andrewmacpherson’s picture

@davidwatson - Is the empty noscript element actually causing a problem for any assistive tech?

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

liam morland’s picture

Why did this issue add a title attribute and content if the goal is to hide it? The content is now causing HTML validation errors in the W3C validator.

andrewmacpherson’s picture

@liam Good catch - the changes here do introduce a HTML validation error. The error comes from the iframe content. @solotandem added the iframe content in #10, but there was no explanation for it.

The iframe content should be removed. The validation error is "Error: Text not allowed in element iframe in this context."

We can't re-open this issue because we aren't maintainers. @liam Can you open a follow-up issue?

liam morland’s picture

joegl’s picture

This is now actually causing issues: https://www.drupal.org/project/google_tag/issues/3199758

Error: The aria-hidden attribute must not be specified on the noscript element.