In my web application I present the user with a set of options, of which they are allowed to select a variable number. What is an accessible way to prevent the user from selecting too many items?
My markup looks like this:
<h3>Option Name</h3>
<p id="xyz">Select up to 3 items</p>
<div role="group" aria-describedby="xyz">
<div role="checkbox" aria-checked="true" > ... </div>
...
</div>
Initially I wanted to use aria-invalid="true" on the checkbox divs if the user tries to select an additional option beyond the maximum, but the spec indicates that aria-invalid is for a value that has been entered, whereas checking or unchecking options may not be considered entering a value.
I also considered using the aria-valuemax set of attributes on the parent group div, but like with aria-invalid the spec defines this in terms of values that are entered into the element, rather than state which is toggled by the actions of the user.
Currently, my thinking is to apply aria-disabled="true" to all non-selected checkbox divs if the user has selected the maximum, but I'm not sure if there's a way to indicate the reason for the aria-disabled attribute in the same way as you would for an aria-invalid element with an aria-errormessage.
I appreciate any feedback, thank you all for your time.
Notes:
explicitly associate both the group label and the instruction with
the grouping element. (you can use multiple sources to make up the
accessible name for the group).
aria-labelledby is used as aria-describedby on role=group without an acc name will not be announced.
once the maximum number of checkboxes have been checked set aria-disabled=true on remaining.
suggested code:
<h3 id="grouplabel">Option Name </h3>
<p id="xyz">Select up to 3 items</p>
<div role="group" aria-labelledby="grouplabel xyz">
<div role="checkbox" aria-checked="true" > ... </div>
...
</div>
When 3 items have been checked, I suggest using aria-readonly(this property shows that an element is operable but cannot be edited). When one or more items of the selection have been unchecked, then all the checkboxes should become editable allowing users to edit or reselect items. I suggest that you also add a javascript alert when maximum selection has been attained so users know the reason behind making the options noneditable.
Related
I'm trying to improve accessibility on a site and I can't seem to solve a problem with NVDA screen reader and loading the results of a search page.
I've created a StackBlitz example which uses Angular and AG-Grid.
The result grid is not initially visible. When I load the results for the first time, it reads out the screen-reader-only texts, then it starts reading the whole table. I would prefer if the table was not read out loud, but that's not the issue.
The problem is when I load results again, simulating another search, the reader behaves very weird. It reads something random, and says numbers like 1 1 3... which I assume are part of the pagination. Sometimes it reads the table again, sometimes it doesn't.
On the search form I'm using aria-controls="queryResultRegion" and the target has role="region" and aria-live="polite" to make the reader aware that there's dynamic content
<form action="." aria-controls="queryResultRegion">
<button (click)="loadResults()">Load result</button>
<button (click)="noResult()">Load no result</button>
</form>
<div role="region" aria-live="polite" id="queryResultRegion">
<my-grid [rowData]="rowData"></my-grid>
</div>
On the result component I the class="sr-only" elements conditionally say either the number of results or just "No results".
<ng-container *ngIf="rowData">
<h2 class="sr-only" #resultHeader>Search Result</h2>
<div *ngIf="rowData.length < 1; else elseBlock" class="sr-only">
No results
</div>
<ng-template #elseBlock>
<div class="sr-only">
Number of results: {{ rowData.length }}
</div>
</ng-template>
<ag-grid-angular style="width: 100%; height: 200px;" class="ag-theme-alpine" [rowData]="rowData"
[columnDefs]="columnDefs" [gridOptions]="gridOptions">
</ag-grid-angular>
</ng-container>
Are you sure that a live region is the right thing for the results table?
I can understand the use of a live region to tell you "X results" or "No results", but not for the results themselves, which (I would expect) would be a browsable list containing a brief abstract and hyperlink for each entry.
If you mark up your results table correctly (with rowheaders and column headers) NVDA and other ATs will be able to browse it using special keyboard shortcuts. No need for a live region around it. This in itself might resolve (although not explain) your problem with 'weird' announcements.
A few more points:
aria-controls is not that useful. The spec gives no idea how it should actually behave, although the semantic is clear enough. AT support for it is currently poor. On the other hand, it does no actual harm, and makes a semantic relationship explicit. So... while I recommend that you keep it, don't expect it to do much (yet) either. I hope the community will work out a proper interaction pattern for aria-controls, because it would be handy in cases like this, and if you've already added it, it will 'just work'.
Region roles require an accessible name. One obvious way to do this is to use
aria-labeledby pointing at the id of the heading for the region, or if you don't want it to be visible, use aria-label.
If you want to offer the user some way of 'jumping' from the search field to the results (which is what aria-controls is supposed to facilitate), consider adding tabindex=-1 to the results element, as this will allow you to call focus() on that element when the results have arrived. The accessible name will be announced (if you add it), and then the AT user can use table-navigation keyboard shortcuts to browse through the results.
Trying to check a specific check box in a dynamic grid. The only uniqueness for the targeted checkbox is it's value. The surrounding div is created by the grid object and is not really related to the value of the checkbox.
<div class="ricoLG_cell ricoLG_evenRow" id="ex2_2_0">
<input onclick="wasChecked(this);" name="regids" type="checkbox" value="184685">
</div>
The xpath evaluates to :
//*[#id="ex2_2_0"]/input
which is not predictable. The value is predictable, but I don't know how to reference it.
Any help will be appreciated.
If the value is predictable, reference it like any other attribute - like you did with the id:
//input[#value="184685"]
I'm trying to track all outbound links that contains the target=_blank, and after many hours of testing I realized that each click variables (in the debug mode) seems to be empty. I guess this is because there's a span element within the anchor. On some clicks the variables contain the full URL and attributes etc, but most of the time they don't - and there doesn't seem to be any constistency in this behavior.
Does anyone have any idea what's wrong here? Thanks!
DOM for the link:
<div class="elementor-button-wrapper">
<a href="#" class="elementor-button-link elementor-button elementor-size-sm" target="_blank" role="button">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">Se priset</span>
</span>
</a>
</div>
The problem is, that you are using click trigger for all elements, which captures the exact element clicked, which is the span.elementor-button-text
You should use just "Click - Just links" type of trigger, and specify the links you would like to track. This will ensure, that the clicked element is the a tag, regardless of its child elements, that can get clicked.
You can set your trigger to capture only links with target=_blank attribute as {{Click Element}} matches CSS selector a[target="_blank"]
E.g.
EDIT:
Based on your relevant code part, the Link Click event should look like this:
Using the source code below, I need to track text values of clicked links.
How can I track this and whether page load rule or event based rule is beneficiary for it?
How to code this using dtm?
<div class="afgfj">
<section class="asked-questions">
<div class="g-bp-row-gutter p-comp-spacinottom p-rb">
<h2 class="p-heading-02 p-component-title">
Frequently Asked Questions
</h2>
<dl class="p-faq-main p-accordion"
data-ctn="S9031/26">
<dt class="p-top-10 p-faq-chapter p-active">
<span class="p-top-10-global">Top-10 FAQs</span>
<span class="p-top-10-local">Top 10 FAQs</span>
</dt>
<dd class="p-top-10 p-faq-list p-active">
<ul class="p-bullets">
<li class="p-faq-item" data-lang="ENG">
<div class="p-magnific-popup-launcher" data-comp-id="magnificPopupLauncher"
data-type="iframe"
data-title="Frequently asked questions"
data-close-label="Back"
data-href="//www.org.com/cgi-bin/oleeview?view=aa12_view_body.html&dct=QAD&refnr=0073544&slg=ENG&scy=GB&ctn=S9031/26">
How long does it take to get?
</div>
</li>
<li class="p-faq-item" data-lang="ENG">
<div class="p-magnific-popup-launcher" data-comp-id="magnificPopupLauncher"
data-type="iframe"
data-title="Frequently asked questions"
data-close-label="Back"
data-href="//www.org.com/cgi-bin/oleeview?view=aa12_view_body.html&dct=QAD&refnr=0020591&slg=ENG&scy=GB&ctn=S9031/26">
Can I recharge the appliance?
</div>
</li>
This is a perfect time to use an Event Based Rule. You'll also need to create a data element to hold the text value.
The main obstacle that I can see from your code would be identifying the A tag correctly.
First the Data Element: in DTM Rules, within Data Elements click Create New Data Element.
Enter a name, specify the type (CSS Selector seems the most appropriate here) then within the CSS Selector Chain list state how to reach it. My guess is for your code it would be "div.p-magnific-popup-launcher a" but you would need to test this. You can tell by opening a Inspect Element (F12) in Chrome or similar debugging gadget. There's a good blog about doing this from Adobe here.
You should also specify which part of the A tag to save. From your question you I believe you need 'text' which would capture items like "How long does it take to get?"
Under Event Based Rules within DTM click Create New Rule.
When you're happy with the settings on this page click Save Data Element.
Populate your name, and category if applicable. The Event Type should already be set to 'click'.
Within Tag you then have to set how to find the A tag through CSS, similar to above.
That's the basics, but you'll also need to set Criteria (what pages this should fire on). Furthermore, under the Adobe Analytics section you should set whether a pageview is incremented or not, and which eVars, Props and Events are populated as a result of the click. This is also where you can use the value from your Data Element. Under Link Tracking, choose Custom Link. Within Link Name, enter a percent sign (%) and your data elements should appear. Use the name you specified earlier.
Note: you should match up your populated eVars and Events etc. with your settings under Report Suites in the Analytics interface.
I am assuming you are attempting to get the text of an <a> element when it is clicked on.
Such as in the one below, you would want to get "How long does it take to get?":
How long does it take to get?
To do this, create an event based rule with the event type "click", set the element tag to "a". (See image below)
Next you will want to configure the Adobe Analytics section of the rule.
You will set the Tracking to s.tl() ,since you do not want to create a pageview when someone clicks the link (the page they view should already do that).
Then set an eVar and/or Prop to %this.text%. This is DTM notation to grab the text of the element that triggered the rule to fire.
Finally, set an event to trigger on this rule.
See image below for the configuration
This should track when an <a> element is clicked and store the text in an eVar
I have my webpage, where I have 10 rows, and in every rows is input field (checkbox). I want to create button with title 'Detail'. When I click on this button, my webpage open new page only with checked rows.
Task is, that I need to send every checkbox into detail button, and I don´t know, how much rows will be displayed (depend on database). I need to create function with input flexible parameters (name_array and value_array). But when I create this function, my arrays are empty. What I´m doing bad? Thank you for your response.
I dont have any form, I want to do that without form element.
This is my checkbox:
<input type="checkbox" id="id_netnum_5356963" netnum="5356963" />
And this is my button to detail:
<a href="!cpc2.pkg_fe_netnum_gui.p_detail_numbers">
<button>
<span class="btn-green-small btn-w130">Detail</span>
</button>
</a>
You should use flexible parameter passing
http://docs.oracle.com/cd/B12037_01/server.101/b12303/concept.htm#1005765