how to handle WAI ARIA role="listbox" - accessibility

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).

Related

What accessibility pattern for filter/sort "dropdown"?

I have a design that displays a list of content that you can filter by different categories. Each filter is displayed in a dropdown menu that lets you choose one or more options, which when activated (either through click or keyboard), will update the results on the page. The page url does not change in response to the filter and there is no "submit" button to apply the filter.
I'm confused which ARIA pattern to use: Menu (with menu/menuitem roles) or Combobox (with listbox/option roles).
In my opinion you should go with a combobox.
Otherwise, it should be a menubar rather than menu:
A menu that is visually persistent is a menubar.
Managing focus
Aside from the question which role to use, you need to decide whether to manage focus or not. It is recommended (should) for menu and menubar, which would mean that the whole bar only has one tab stop, and navigation between the single dropdowns is done via arrow keys.
Website or application?
This depends on how much your site feels like an application overall. If it’s more of a website, keyboard users in general are more accustomed to tabbing than to managed focus. For users it is sometimes a surprise that you need to navigate within components by means of arrow keys.
If there are other composite widgets as well that manage focus, you absolutely could do so for this part as well.
Responsive Design
A menubar should allow left and right arrow keys to navigate the filters, and up and down to focus the options. Managing focus would get complicated with Responsive Design: Once items wrap, it becomes less obvious how to navigate to them.
Actions vs Selections
A menu is usually used for actions. To quote some references (emphasis mine):
A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.
– Menu or Menu bar pattern
The WAI ARIA standard defines an actual `nole="menu"' widget, but this is specific to application-like menus which trigger actions or functions.
– Bootstrap
Since the filters only allow choosing options, and not executing commands or functions, I would rather go with combobox.
Searchability
Combobox also implies that it’s a flat list of options, maybe grouped. This is immediately known. A menu can potentially have sub menus, so it’s less clear what to expect when opening a filter list.
Since combobox is a flat list, users can type Printable characters to directly jump to a list item. This is not the expectation for menus.
Show the user’s selection
Since the filters close once a selection is made, it is best practice to display the chosen value or values in the closed item. Also known as the Visibility of System Status.
A combobox will do so, and screen readers would even announce the current choice without opening the list. A menu does not have that behaviour.

Custom behavior with radio buttons and/or checkboxes. Accessibility ( WCAG 2.0 )

I want to reveal some hidden text/elements(whatever) when some checkboxes/radio buttons are selected(assume there is a list of checkboxes/radio buttons to choose from).
What should I do to meet the WCAG 2.0 AA standards?
And how exactly radio buttons/checkboxes are understood by AT users, because obviously this isn't the supposed behavior of checkboxes/radio buttons.
Thanks!
Your last statement gives me pause: "And how exactly radio buttons/checkboxes are understood by AT users, because obviously this isn't the supposed behavior of checkboxes/radio buttons."
If you have non-standard behavior for your radios/checkboxes, will the sighted user be confused too?
With 'normal' behaving radios/checkboxes, the AT user will understand them just like a sighted person does - experience. You learn that a radio is a group of mutually exclusive choices whereas a list of checkboxes allows multiple choices. The screen reader will read the role of the object so the AT user will know what to do.
Now, if you're hiding/unhiding objects based on those selections, the AT user needs to be notified. That's typically done with aria-live. By default, an aria-live region will be read if the text changes or an object is added to the DOM which should include being unhidden if you're doing it via display:none. If you unhide by moving an offscreen object to onscreen, or changing the clipping rectangle, or changing the size of the object, aria-live will not help.
Also look at aria-relevant. By default, it's value is 'additions text', which is the behavior I mentioned above. If you need the aria-live region to be read on other conditions, look at the other values of aria-relevant.

How to: Allow for a ListBox to have no selection

I am wanting to allow for a user to deselect all values in a ListBox. Normally, when the user deselects all but one item, that one item cannot be deselected. I want to make it so it can be.
Thanks
Essentially I'm aware of two ways of doing this:
Add an empty item to the list. You can even name this item "None" or something similar. Using a text has the additional advantage that it informs the user.
Use JavaScript to unselect the item that is clicked if it is the last item.
Note, either way, you change the default behavior of the listbox, which is what users are accustomed to. Changing the default behavior is generally not a good idea, which is why I would go for option (1) being the clearest towards your users.

Disable highlighting in an HTML SELECT box

I have a select box, <select multiple=true, that the user populates with values via a Picklist mechanism. I would like to disable highlighting in this box because, by definition, the values in this box are the selection.
Just to clarify, I am NOT referring to text selection, which is what ::selection operates on. I'm talking about the usually blue highlighting that the browser applies to selected line item(s) when the user clicks on them.
I'm not worried about the user blindly clicking around, because I am auto-selecting all items onsubmit so that all the values get sent.
Why not just list the items in their own div instead of a select element? You aren't having the users interact with them anyway, right?
Then, you can have a select element w/ all the values you want, but make it hidden via CSS so that the user won't ever see them. It'll just be there in your form so that you can grab those values on your submit.
If I'm reading you correctly, it sounds like you're using an accumulator model where you have a "source" box (or list or select or something) and a "selected" box. Rather than accumulating into a [select], maybe use a div? If you must use a select, you could try disabling it, but that carries other visual baggage. You could also try styling the select color, but that's definitely not going to be cross-browser.
Make it disabled?
<select disabled="disabled">
This would gray it out, unfortunately- the other option might be some javascript to unselect any selections.
if i understand you correctly, the user does not actually selects the items? then why not either disable it or if customer still interacts with it, you might need to go with some JS code to help yourself

How can I disable an individual item in a combo box in Flex so that it is not clickable?

I want to create a combobox in flex which will take three values, Available, Unavailable, and Busy. The constraint is, I should not allow user to go directly from Unavailable to Busy. So when a User is selected Unavailable, I should keep the Busy item disabled (unselectable), but a user will be able to go directly from Available to Busy. I chouldn't find a straight forward way to disable an item in combobox in Flex. How can I do that?
Have you considered using radio buttons rather than a combo box? It's clear how to do this for radio buttons, for one thing. Also, it can often be friendlier to present the available options without requiring a click to reveal them. (Especially if, as in this case, you are adding the possibility that an option is "available, but not possible for you right now for some reason not shown in this combo-box item").
If you really want a combo-box, you can use the click event to display it in a non-standard fashion by probably changing its style; and then, if clicked anyway, Then, in the selected event, reject the choice (hopefully with an indication of why),
Or, if you want to simply remove it from the list, you can have the click listener event repopulate the source list each time, based on conditions. But that might be confusing to the user, too.
You can also have a look at
www.stoimen.com/blog/2009/03/05/flex-3-combobox-disabled-options/
which references
wmcai.blog.163.com/blog/static/4802420088945053961/
(note for NoScript users you must have 163.com and 126.com at least temporarily allowed to be
able to properly see this page)
it works very well even though I added the code for being able to properly handle keyboard
events in the dropdown list
Full self working example available at
http://olivierbourdon.homedns.org/OpenSource/combos.zip
Thanks again for the good work

Resources