E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 5 (In chronological order)

From: Yoandry Collazo
Date: Tue, Dec 18 2018 12:25PM
Subject: How should work an accessible List
No previous message | Next message →

<ul>
<li>
<button> a </button>
</li>
<li>
<button> b </button>
</li>
<li>
<button> c </button>
</li>
<li>
<button> d </button>
</li>
</ul>

I have a list of n buttons when I press TAB the first element of my list is
focused (button a is focused), how should I move inside the list, with
arrow keys or with TAB key?
Any documentation?
Best regards,
Yoandry

From: Brian Lovely
Date: Tue, Dec 18 2018 12:34PM
Subject: Re: [External Sender] How should work an accessible List
← Previous message | Next message →

I would expect the list to behave like a list (navigated with the virtual
cursor) and the buttons to behave like buttons (tabbable).

On Tue, Dec 18, 2018 at 2:26 PM Yoandry Collazo < = EMAIL ADDRESS REMOVED = >
wrote:

> <ul>
> <li>
> <button> a </button>
> </li>
> <li>
> <button> b </button>
> </li>
> <li>
> <button> c </button>
> </li>
> <li>
> <button> d </button>
> </li>
> </ul>
>
> I have a list of n buttons when I press TAB the first element of my list is
> focused (button a is focused), how should I move inside the list, with
> arrow keys or with TAB key?
> Any documentation?
> Best regards,
> Yoandry
> > > https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=nA3L5qBjLdo-DJ8qQBz88lq5Xb3jw-WFZTeJjcwjLdE&m=SpovepNeOl2wMhvtC_gtRsFSpP42I2_qdrKvtV_8xAU&s=OxFGfnzGzJzbJXE8C7-xqVHz2NBz2MNkWuo9Z844-2c&e=
> List archives at
> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_archives&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=nA3L5qBjLdo-DJ8qQBz88lq5Xb3jw-WFZTeJjcwjLdE&m=SpovepNeOl2wMhvtC_gtRsFSpP42I2_qdrKvtV_8xAU&s=aaW5kDuWpPappumG0KgFBzos0A_wtf0TOK7CsfpFAys&e=
> >


--
*Brian Lovely*
Digital Accessibility
804.389.1064

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: glen walker
Date: Tue, Dec 18 2018 12:59PM
Subject: Re: [External Sender] How should work an accessible List
← Previous message | Next message →

Given the limited information, I agree with Brian.

However, if the code is being used to create a toolbar of buttons (
https://www.w3.org/TR/wai-aria-practices/#toolbar), then the arrow keys
would be used to move between buttons. But in that case, your list would
have a role of "toolbar" and your listitems would have
role="presentation". Since that was not specified in the example, I'm
guessing this is not a toolbar but wanted to toss that out there just in
case.

Glen

From: Isabel Holdsworth
Date: Wed, Dec 19 2018 3:21AM
Subject: Re: [External Sender] How should work an accessible List
← Previous message | Next message →

Hi Yoandry,

What are the buttons being used for? Are you creating a toolbar or a
menu of some kind? If so then you might need to allow the arrow keys
to change the focus, but you'd also need to use ARIA to let
screenreaders and other assistive tech know what type of controls they
are and how to use them.

If you give us some more info, then I'm sure we can point you in the
right direction.

Cheers, Isabel

On 18/12/2018, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> Given the limited information, I agree with Brian.
>
> However, if the code is being used to create a toolbar of buttons (
> https://www.w3.org/TR/wai-aria-practices/#toolbar), then the arrow keys
> would be used to move between buttons. But in that case, your list would
> have a role of "toolbar" and your listitems would have
> role="presentation". Since that was not specified in the example, I'm
> guessing this is not a toolbar but wanted to toss that out there just in
> case.
>
> Glen
> > > > >

From: Mark Magennis
Date: Thu, Dec 20 2018 10:29AM
Subject: Re: [External Sender] How should work an accessible List
← Previous message | No next message

If it's just a list of buttons (or links or mixed), it should not be a menu in the sense of the aria menu role which is for pop-up menus. It could be a menubar but I can't see much point in using menubars. They only add complication, require telling sighted user that they are menubars and how they work, and in most cases don't save much TABing in getting past them (particularly when placed immediately after a skip link).

Mark Magennis
Skillsoft | mobile: +353 87 60 60 162
Accessibility Specialist

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Isabel Holdsworth
Sent: 19 December 2018 10:22
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] [External Sender] How should work an accessible List

Hi Yoandry,

What are the buttons being used for? Are you creating a toolbar or a
menu of some kind? If so then you might need to allow the arrow keys
to change the focus, but you'd also need to use ARIA to let
screenreaders and other assistive tech know what type of controls they
are and how to use them.

If you give us some more info, then I'm sure we can point you in the
right direction.

Cheers, Isabel

On 18/12/2018, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> Given the limited information, I agree with Brian.
>
> However, if the code is being used to create a toolbar of buttons (
> https://www.w3.org/TR/wai-aria-practices/#toolbar), then the arrow keys
> would be used to move between buttons. But in that case, your list would
> have a role of "toolbar" and your listitems would have
> role="presentation". Since that was not specified in the example, I'm
> guessing this is not a toolbar but wanted to toss that out there just in
> case.
>
> Glen
> > > > >