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
Comment #2
solotandem commentedWould you elaborate on
Is this going to cause more grief with the google verification service?
Comment #3
alexiswatson commentedPatch attached.
Comment #4
alexiswatson commented@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.
Comment #5
alexiswatson commentedComment #6
ttamniwdoog commentedTested. Thanks @davidwatson!
Comment #7
solotandem commentedDoes anyone have an answer to second question in #2?
Comment #8
solotandem commentedComment #10
solotandem commentedThanks for reporting this.
Also added title attribute and content.
Comment #11
andrewmacpherson commentedAdding
aria-hidden="true"was overkill in this case. The iframe was already being hidden usingdisplay:noneandvisibility: 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.Comment #12
mgiffordWorth re-opening?
Comment #13
andrewmacpherson commentedIt'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.
Comment #14
solotandem commented@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?
Comment #15
alexiswatson commented@#13:
See #0 (emphasis mine):
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.
Comment #16
andrewmacpherson commented@davidwatson - Is the empty noscript element actually causing a problem for any assistive tech?
Comment #18
liam morlandWhy 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.
Comment #19
andrewmacpherson commented@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?
Comment #20
liam morlandCreated #3009268: Remove iframe content and @title.
Comment #21
joegl commentedThis 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.