RE: ARIA: Buttons in listboxes and grids

Well this is a trigger on a list item creating another list item. Every list item when activated triggers things right, be it navigation or something else ? So this one is just special in a sense that it triggers another list item creation. This should be expressed in its label information and potentially using an aria-describedby to make its function clear and stating this is a different object type than the other list items (object creation instead of navigation).

But again, a better approach would be in this case to keep list maintenance separated from the list itself.

Regards
Stefan

From: Batusic, Mario [mailto:mario.batusic@fabasoft.com]
Sent: Tuesday, April 17, 2018 12:19 PM
To: Schnabel, Stefan <stefan.schnabel@sap.com>; Steve Faulkner <faulkner.steve@gmail.com>
Cc: wai-xtech@w3.org
Subject: AW: ARIA: Buttons in listboxes and grids

Hi Steve, Stefan,

@Steve: Here the data of my Developer Virtual Environment of our Fabasoft Cloud:

URL: https://vde.fabasoft.com/dev3/vm130/folio/

User: developer
Pwd: a11ytest

Please don’t try it with a mobile browser. We have to improve the environment for it.
After log on the focus is placed to the first item in the list (first option in a listbox according to ARIA). Keyboard navigation is working also according to the listbox but adapted for card view, something like a desktop navigation in windows, but better ☺.

From the last card item you focus the butoon “Create teamroom” with the arrow right.

Currently I break the ARIA definition and put this button directly in the listbox after the last option.

@stefan: Your first suggestion would be the best solution, but it is very complicated and error-prone if you will to display it as an item of the list. Think of scrolling through  long lists.

Have you some alternatives? Thanks in advance.

Ciao     Mario
Von: Schnabel, Stefan <stefan.schnabel@sap.com<mailto:stefan.schnabel@sap.com>>
Gesendet: Dienstag, 17. April 2018 10:56
An: Steve Faulkner <faulkner.steve@gmail.com<mailto:faulkner.steve@gmail.com>>; Batusic, Mario <mario.batusic@fabasoft.com<mailto:mario.batusic@fabasoft.com>>
Cc: wai-xtech@w3.org<mailto:wai-xtech@w3.org>
Betreff: RE: ARIA: Buttons in listboxes and grids

Not sure if an explicit “More” trigger ever should be a member of listbox items.

One pattern here is to move the button out of the list but keep in same container as the listbox control and make it keyboard accessible using e.g. arrow down key when on last element of listbox.

Another pattern is lazy loading. Being on last visible listbox item arrow down triggers load of more children. Here you don’t need any button or extra “More” item.


  *   Stefan

From: Steve Faulkner [mailto:faulkner.steve@gmail.com]
Sent: Tuesday, April 17, 2018 10:32 AM
To: Batusic, Mario <mario.batusic@fabasoft.com<mailto:mario.batusic@fabasoft.com>>
Cc: wai-xtech@w3.org<mailto:wai-xtech@w3.org>
Subject: Re: ARIA: Buttons in listboxes and grids

Hi Mario, can you provide an example of the code? a working example (codepen etc) would be ideal.

--

Regards

SteveF
Current Standards Work @W3C<http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>

On 17 April 2018 at 08:22, Batusic, Mario <mario.batusic@fabasoft.com<mailto:mario.batusic@fabasoft.com>> wrote:
Hello dear WAI People,

I have a question. I am accessibility engineer for our products and all of these are web apps.
We use extensively ARIA to implement an optimal UX and full keyboard access. Our lists (something similar to Windows Explore lists) we present as listboxes or in details mode as grids. My question concerns the button “Add entry” that is designed to be the last option in the listbox (or something in a whole last wor of the grid). Through putting the butten there I get a false list count because this button is not a valid list entry. How can I integrate this button here so that it does not disturb the list count and does not show up in a screen reader as for example 10 out of 10.

Thanks.

Ciao     Mario



Mario Batusic
Accessibility Engineer

www.fabasoft.com<http://www.fabasoft.com/>

Tel.:              +43 732 606162-0
E-Mail:         mario.batusic@fabasoft.com<mailto:mario.batusic@fabasoft.com>


[cid:image002.png@01D33D3F.50086DC0]

Twitter<https://twitter.com/fabasoft> | Facebook<https://www.facebook.com/fabasoft/> | Google+<https://plus.google.com/+FabasoftCloud?hl=de> | YouTube<https://www.youtube.com/user/FabasoftCloud>

Fabasoft R&D GmbH, Honauerstraße 4<https://maps.google.com/?q=Honauerstra%C3%9Fe+4+%0D%0A+4020+Linz,+%C3%96sterreich&entry=gmail&source=g>
4020 Linz, Österreich<https://maps.google.com/?q=Honauerstra%C3%9Fe+4+%0D%0A+4020+Linz,+%C3%96sterreich&entry=gmail&source=g> | Handelsgericht Linz, FN 190091x