There is a contact form and when submitted it is not directed to a different page, it acts on the same page and gives a flash message that the forum has been sent.
<span class="form-submitted">Thanks For Submttied</span>
The form-submitted class is unique class and only appears when the form is sent.
I need to track, when this element appears on page.
How I can track the measurement?
If I understand correctly, the element is displayed once the form is submitted. For that, GTM has a "Visibility trigger", that can trigger tags when the display property of the element is changed, or when it is dynamically inserted into the page.
Go to "Triggers", create a new trigger, select "Element Visibility" as trigger type, change "Element Selector" from "id" to "CSS Selector" and enter the class of your element.
If your element is inserted dynamically rather than made visible via CSS styles, you need to check the "Observe DOM changes" checkbox. Checking for DOM changes is an expensive operation, so you will get a warning that this might affect performance (although in my experience this is more of a theoretical concern).
Caveat is that the element needs to be visible to the user, i.e. inside the viewport. If it appears outside the viewport (e.g. in a small browser window) the trigger will not fire.
Related
Is it possible to force a screen-reader to read the alt-attribute instead of the text inside a button?
Example html: <button alt="user menu">DrKawashima</button>
When testing this with the built-in accessibility screen-reader in MacOS, I found that it only said "DrKawashima", and the alt-attribute was never used.
Is there a way to hint to screen-readers that I would rather have it say "user menu"?
Yes, it's possible - but beware of completely overriding the visible text of a button.
tl;dr - I recommend approach 4 here.
Your question addresses screen readers, but there are other types of assistive technology to consider. In particular, sighted people using speech control (e.g. Dragon Naturally Speaking). Take care to address WCAG Success Criterion 2.5.3: Label in Name.
Assistive technology deals with the computed accessible name of an element:
Screen readers will read the computed accessible name. Remember that the basic purpose of of a screen reader is to read what's on the screen - beware of trying to present a different interface to screen reader users.
Confusion can arise when a blind screen reader user and a sighted person are both talking about the same screen. For example, a telephone tech support person might say "Click on the button which says DrKawashima". But if this is overridden, the screen reader says the button is called "User menu", and the user can't find the button they're being told to press.
Sighted people also use screen readers. For example, someone with dyslexia may like to have stuff read out to make life easier. When the computed accessible name differs from the visible text, the screen reader is effectively lying to the user about what it says on the screen.
Speech control will try to match what a user says, to the computed accessible name. If a button has visible text, it's important that this text appears inside the computed accessible name of the element. The expectation is that a speech control user can activate a button by saying the visible text. In your example, saying "Click DrKawashima" should activate the button. This won't work if the computed accessible name is "User menu".
There's a work-around for this. Dragon Naturally Speaking has a tool to highlight all buttons using numbers: say "Click button", look for the number, then say "Choose 2". However this is a multi-step process, requiring extra effort from the user.
Note that the computed accessible name and the visible text do not have to match exactly. Rather, the visible text must form part of the accessible name.
Let's look at some examples:
Your example with an alt attribute on the button simply won't work, because buttons don't have an alt attribute. This isn't valid HTML:
<button alt="user menu">DrKawashima</button>.
The visible text is "DrKawashima"
The computed accessible name is "DrKawashima". The alt attribute had no effect.
This passes WCAG "Label in name", because the visible text and the computed accessible name are exactly the same.
However it doesn't manage to inform a screen reader user about the purpose of the button; sighted users can probably infer this from an accompanying icon or avatar image.
The aria-label attribute can be used to completely over-ride the button content: <button aria-label="user menu">DrKawashima</button>.
The visible text is "DrKawashima".
The computed accessible name is "User menu". The aria-label attribute completely overrides the button content.
This approach FAILS WCAG "Label in name", because the visible text doesn't form part of the accessible name. A speech control user can't activate the button by saying "Click DrKawashima".
The aria-label attribute can be used to completely over-ride the button content, whilst duplicating the visible text: <button aria-label="DrKawashima, User menu">DrKawashima</button>.
The visible text is "DrKawashima".
The computed accessible name is "DrKawashima, User menu". The aria-label attribute completely overrides the button content, but it duplicates the visible text.
This passes WCAG "Label in name". The button can be activated saying "Click DrKawashima" because the visible text is inside the computed accessible name.
This approach is simple, but may be fragile because you have to manage two strings.
Include some visually-hidden text, to give screen reader users some additional context. For example, using HTML5Boilerplate's .visuallyhidden class, or Bootstrap's .sr-only class:
<button>DrKawashima<span class="visuallyhidden">, User menu</span></button>
The visible text is "DrKawashima"
The computed accessible name is "DrKawashima, User menu". This results from the button content.
This passes WCAG "Label in name". The button can be activated saying "Click DrKawashima" because the visible text is inside the computed accessible name.
This is the simplest solution, very robust.
The aria-labelledby attribute can build an accessible name, by referencing 2 element IDs:
<button aria-labelledby="user-menu-visible-label user-menu-suffix"><span id="user-menu-visible-label">DrKawashima</span><span id="user-menu-suffix" class="visuallyhidden">, User menu</span></button>
The visible text is "DrKawashima"
The computed accessible name is "DrKawashima, User menu". This results from concatenating the two elements refernced by aria-labelledby.
This passes WCAG "Label in name". The button can be activated saying "Click DrKawashima" because the visible text is inside the computed accessible name.
This is robust, but a bit more work to implement because you need to manage the ID references.
'alt' is not an allowed attribute within a button element. The alt attribute works with area, img and input type="image". Check out more on the topic https://www.w3.org/TR/html5/dom.html#translatable-attributes and https://www.w3.org/TR/html5/dom.html#global-attributes-2
Your best bet is to use a styled <span> tag inside the <button> with aria-hidden
<button aria-label="screen reader text">
<span aria-hidden="true">Visual Text</span>
</button>
Edit: As discussed in comment this isn't the best approach.
As a speech control user can't activate this button.
andrewmacpherson's answer provides a more inclusive solution to this.
We're doing a WAVE scan of our application to detect accessibility issues. One that I'm looking at now is the "Device dependent event handler". These are shown on the asp:Menu controls. What seems to be the relevant messages says: "an onmouseover event but not an onfocus event". When I look at the page source I do see the generated html like:
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" id="ctl00_MainMenun4">
This suggests to me that it needs an onfocus event handler that does the same as the onmouseover handler. Am I correct in this assumption. Is there a way to get asp.net to generate this or can/should I look at a way to manually inject this? If the latter, any suggestions?
Thanks for any help!
Adding an onfocus event handler is not sufficient to make the table cell accessible. Table cells are not focusable elements. (Focusable elements are usually a elements with an href attribute, link elements with an href attribute, button, input when type is not "hidden", select and textarea.)
In order to make other elements focusable, you should set the tabindex attribute to "0". This will put the td element in your example in the tabbing order and make it reachable with a keyboard. If it can receive keyboard focus, it will also be able to fire the focus event that your listener will be waiting for.
I found the answer. See this MS article. For the asp:Menu controls I needed to set the Menu's RenderingMode to MenuRenderingMode.List and change the pages element in the web.config controlRenderingCompatibilityVersion="4.0".
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" id="ctl00_MainMenun4">
This suggests to me that it needs an onfocus event handler that does the same as the onmouseover handler. Am I correct in this assumption. Is there a way to get asp.net to generate this
It depends on what is inside your td
For instance, you can perfectly have:
<td onmouseover="func_somewhat()">Click</td>
Putting onfocus and tabindex on the td element will lead to accessibility problem due to the fact that the element itself contains a tabable element.
And this code might be plainly accessible, as long as selecting the inner link with the keyboard permit to achieve what you are expecting.
If the element inside the td does not have any focusable element, then you may add the onfocus event handler on the td itself but you have to satisfy more conditions :
the td should be focusable (tabindex)
the td should be indicated as being a role=button or role=link depending on the lead action
the table should have a presentation role if it's used for presentation (which is apparently the case here)
A scenario has risen where I am trying to track button clicks. (There are several on the page as they are toggable filters).
Each button has a class relevant to it IE .filter .Dogs , .filter .Cats
When someone toggles a filter, the button's parent element gains the class "selected". I tried to track this, using the match css selector option of .selected>.filter
Unfortunately GTM doesnt seem to detect the "selected" class appearing, so I thought would it be possible to disregard the event click if the element was clicked twice and also limit the amount that the element could be clicked.
Thank you
I want to trigger a tag when a link with a certain css class is clicked. I create a trigger based on Clicks > Just Links, but when I go to select the variable, I just get "Page Hostname, Page Path, Page URL, Referrer, New Variable"... no "Click Class" as one would expect.
All the online help shows an outdated version of GTM that don't match the options I see. Even the GTM help docs are outdated.
How does one trigger by css class? (I tried using a custom variable, but didn't work either, and honestly the options didn't make much sense either).
Update: It works if I create a new custom variable "DOM Element has CSS selector" and then go to Trigger, select my custom variable, select "Equals" and enter the text of the link.
But this doesn't make much sense to me, all I want is trigger based on css class, not by the text contents of the tag.
Turns out GTM's "Click Element" built in variable (and many others) is off by default, that's why it was missing from the trigger dropdown. One has to go to Built In Variables > Configure > and tick the "Click Element" variable.
Why would they turn this off by default and offer no clues in the UI, I have no idea.
I have a gallery of products that each belong to a specific brand. In order to track down how many impressions/reach the brands generate I was thinking about using GTM, having a trigger on DOM load or pageview, and have it read a specific class "brandlink" for the text inside this element. This way if the page loads products from Amazon, eBay and Walmart, each pageview would trigger multiple events, one for each brand, with the label = their_brand_name.
In a very similar fashion as to how ads are tracking the number of impressions they generate.
I can clearly see the "Click classes" variable, but not something that reads the text inside a class, without a click being necessary.
Pointers? Different approach? Thank you!
One method would be to create a trigger that uses the DOM Element variable type.
You can see how the Variable configuration uses the element ID (alternatively, you could use CSS selector method). And then in the Trigger configuration, you can it to fire on DOM ready if that particular DOM element exists and has a certain value (if you have more than one value, you could use a regex matching pattern).
It's nice to use DOM variable if you want to select click element by special css-selector, just write {{variable}} instead this selector in css-match input field