Backstory:
I have a long list of items grouped by categories. There is a button control for each category and also one for "show all".
Visual Example:
[button show all] [button 001] [button 002] [button etc]
Category 001
item 01
item 02
Category 002
item 03
item 04
Category etc
item 05
item 06
I'm testing with Google Lighthouse and I keep getting dinged for
[aria-*] attributes do not have valid values
This is clearly because there is no "show all" group of elements, rather the button simply shows all of the available grouped elements.
Question:
What is the accepted value for an "ARIA-controls" property on a button that "shows all"? Or do I leave it out for this element?
Note:
All the individual category buttons and groups are fine, their ARIA properties are all set correctly to the group ID, no errors from Lighthouse. Only the button for "show all" is the issue
After reading the material in the comments I have come to the conclusion that there isn't any value I can set for ARIA-controls that will be both a valid ID and also be useful to the visitor using ARIA.
I could set all the IDs of all the elements, this would be technically valid, but this would not be functionally useful for the visitor.
The best option for this is to make sure the button itself is explanatory and then leave the ARIA out for this one button element.
Google Lighthouse testing confirms that having no ARIA-controls on this element is better than having an incorrect setting.
Related
I have a list of options from which one can be selected. For all intents and purposes HTML's <select> element covers this. Since we need a different visual presentation, I'm looking at using WAI ARIA role="listbox". I'm unclear on how to use aria-activedescendant, aria-selected and aria-checked.
Questions regarding focus/active state:
If I use aria-activedescendant on the listbox to point to the [role="option"] that is currently active (has "virtual focus"), I would use [aria-selected]. How would best I tell the option element itself that it is active (has "virtual focus") to represent that visually? (:focus is on the listbox, after all)
an [role="option"] can have [aria-checked] and [aria-selected]. I guess I need [aria-selected] but don't see what I'd use [aria-checked] for.
Is there a trick to avoid having to put IDs on every option simply so it can be referenced by aria-activedescendant?
Questions regarding keyboard interaction:
"Checkbox - Space toggles checkboxes, if the list items are checkable" - how do I figure out if they are checkable or selectable?
Questions regarding validation:
If the listbox has [aria-required="true"] some sort of validation has to be performed. specifically if an option has been selected (or checked).
when do I trigger the validation? is on blur sufficient?
when invalid, what do I have to do besides setting [aria-invalid="true"] on the listbox?
aria-checked is indeed more something for a list of very closely related options with actual visible checkboxes that can be toggled on or off. This is most common in the Windows world. Explorer can be set to such a pseudo multi-select mode, or some apps use that to activate or deactivate a set of accounts. On the Mac, you can think of the list of accounts in Adium, which can be either checked (active) or not. A selection will always be there, and one or more of their checkboxes can be checked or not.
aria-selected is always the right one to indicate the selected state of an option. E. g. when traversing the list with the arrow keys, aria-selected="true" moves from item to item, while the others must then get aria-selected="false". As Patrick said, you can use this to also generate some nice looking CSS.
As for keyboard interaction: arrows up and down will select an item, and if the items are checkable, too, space will toggle the checked or unchecked state of the currently selected item.
In a true multi-select, like html:select #size>1, and multiselectable being true, the interaction would be:
Arrow keys select a single item.
Ctrl+Arrow keys would move focus from item to item, but not select the item yet.
Ctrl+Space would select the item.
Shift+up and down arrows would select contiguous items.
This is, again, standard Windows paradigm, can be observed in Explorer in Details view, for example.
As for validation: onBlur is sufficient, or you could dynamically do it via changes in selection/focused item, make sure at least one item is selected, or whatever validation you need.
aria-invalid="true" is sufficient for screen readers to know, but an error message and possibly a visual indication would be nice for everyone to know what's wrong.
How would best I tell the option element itself that it is active (has "virtual focus") to represent that visually?
Generally, you'd add aria-selected="true" and then craft some CSS that takes care of it using attribute selectors, e.g. div[role=option][aria-selected=true] { ... }, or add a css class dynamically?
[aria-checked] and [aria-selected]
This is more of a philosophical question I guess. aria-selected more closely matches what you'd have with a select...but then again (particularly for multi-select widgets) you can imagine the listbox actually being a series of checkboxes, and in that case you'd use aria-checked. there's no definitive right or wrong about either one (something you'll find a lot once you dive into more complex ARIA widgets).
Is there a trick to avoid having to put IDs on every option simply so it can be referenced by aria-activedescendant
Hmm...perhaps you could dynamically generate IDs for all options on page load via script? Or - but not tested - you could have something like a "roving" ID that moves around the options depending on which one is active (adding/removing the ID to the relevant option).
I have some elements in my View (realized with the View module). Let's say a list of Events. Events are grouped in the View by year (with the View option grouping by 'field_year'). Let's say we have events related to 2014, 2013 and 2012. I want the events about the current year to be showed plain and the other hid, having a sort of dropdown button allowing to show or hide the events related to a certain Year.
Something like:
2014
- Event 1
- Event 2
2013 ->
2012 ->
It is possible using Views?
EDIT: maybe "dropdown" is not the right term... What i mean is kind of a div showing and hiding.
I think the views accordion module can solve your problem. Check the grouping options and don't forget to select the checkbox "Use the group header as the Accordion header " to avoid duplicate headers.
I have a form that contains a drop-down selector for someone to choose from one of three items to make a payment. I am trying to add a fourth item so that someone can specify their amount on the initial web page before clicking the "pay with paypal" button I created.
The ID of my text input box for the "other amount" is: amount1
Is it possible to use the advanced variables section of the Paypal button generator to have the value for the amount be set to the value from this text input box.
option_amount3 is the variable name that refers to the fourth option in the drop-down selector, so can I do something like: option_amount3 = [some way to grab the value typed into the text input box]
Here's a link to the page:
http://freeonlinetherapy.net/index_dave.html
Please advise.....
I am running a .net web application on IE10. The issue seems to be with the way the items are being displayed in the dropdownlist. In IE10 if an item is chosen from the list which happens to be in middle (say you are choosing the 3rd item out of 5) and then again click on drop down list then the list spans as 2 elements above this value and 2 below. Also if you choose the very last item and then again click on the drop down the list is displayed as all the items above the last item and then the last item in the field (list is displayed upwards).
So the issue appears when these items are displayed after choosing them and clicking again on the control just to see all the items.
In IE8 and 9 it is like the item chosen is displayed in the field
and then the whole list follows below this.
Please help...
I also meet this problem.
But when I search here, it is said be design. I don't know if it is true, but I couldn't find anyway to fix it.
I've created a views of node and I've selected the "fields" option in order to select which fields to display and in which order.
Is there a way to group such fields ? It would be very useful to have parent divs in my html code.
thanks
There's a simpler way to do it: http://www.arsnova.cc/web-development-articles/2012-07-27/grouping-fields-together-drupal-views
Let's say you want to group fields 1-3 together within a div.
First, exclude fields 1 and 2 from display. (By "exclude", I do not mean to delete them from the views display; rather, click on the "exclude from display" button within each field's options.) The fields you exclude from display must come before the other field for this to work. If they don't, rearrange them so they do.
Go to field 3, and rewrite the results, inserting the token for each of fields 1-3.
That's all you need to do. Fields 1, 2, and 3 will now appear within field 3's div. If you want, you can also add additional markup within the "rewrite results" area.
Recently found the best way for my needs and apparently for the needs of many people:
Use views_fieldsets module https://drupal.org/project/views_fieldsets, it allows yo to create a grouping div to put fields inside.
Grouping is built into Drupal 8 Views. So no need for any extra modules. Here's how:
Edit your view (be sure it has fields)
Click Format's Settings
A box will pop up with all your selected fields
Look right underneath all the field names, there should be "Grouping field Nr.1"
Select the field you'd like to group by
Click Apply
If you want to subgroup with a second field, just go back to 2 then you'll see "Grouping field Nr.2"
That's it.
Yes, click on the gear next to the Style option (under Basic Settings) and set the Grouping field. Keep in mind, the grouping field needs to be added to the view, but you can check the Exclude from display option to hide it, if needed.
I'm pretty sure that would give you a parent div. If not, you could add the parent div, by overriding the default templates (look to the Theme: Information section, under Basic Settings, for more information).