E-mail List Archives

Search E-mail List Archives for

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

From: Isabel Holdsworth
Date: Wed, Oct 24 2018 4:12AM
Subject: List of buttons triggers MENU role
No previous message | Next message →

Hi all,

I'm creating a drag-and-drop scenario, in which items across the top
of the screen can be dragged to one of two or three areas underneath.

I wanted to mark up the draggable items as buttons so screenreader
users know they need to be pressed for something to happen. But when I
encapsulate the buttons in a <ul> or <div role="group"> either JAWS or
the browser (not sure which) seems to assign a MENU role to the whole
group, which is something I don't want.

I can mark up the items as links, in which case the component works
beautifully. But that would be semantically incorrect and I'd like to
avoid this if possible.

Does anyone know how to disable this annoying automatic role assignment?

Thanks as always, Isabel

From: Steve Green
Date: Wed, Oct 24 2018 4:48AM
Subject: Re: List of buttons triggers MENU role
← Previous message | Next message →

I have built a test page with two groups of buttons as you have described, and JAWS 2018 does not announce either of them as a menu. It seems that there must be something else in your code that is contributing to the behaviour you are seeing. Are you able to share a link?

Steve Green
Managing Director
Test Partners Ltd

From: glen walker
Date: Wed, Oct 24 2018 12:43PM
Subject: Re: List of buttons triggers MENU role
← Previous message | Next message →

As a bit of an aside, anytime I encounter a drag and drop interface that
needs to be accessible, the first thing I do is make sure the same
operation can be done with a keyboard. You don't necessarily have to be
able to drag something with a keyboard as long as whatever you're trying to
accomplish can be done with an alternate interaction. For example, when
inserting shapes onto a slide in powerpoint, I can get to the shapes menu
with the keyboard and after arrowing to the shape I want, hitting
Ctrl+Enter will insert the shape into my slide. I can then use the arrow
keys to move and resize the shape to where I want it. I didn't have to
drag/drop anything.

That doesn't mean you can't have an accessible drag and drop. With
voiceover in safari on my ipad, I can press/hold on a tab and then drag the
tab to reorder the tabs in the browser. Voiceover gives feedback on where
the tab is being dragged. It's pretty sweet.

However, speaking to your original question, as Steve noted, you might have
some other code that is causing the menu announcement, such as
aria-haspopup, or the role on a parent item.

Glen

From: Isabel Holdsworth
Date: Thu, Oct 25 2018 8:42AM
Subject: Re: List of buttons triggers MENU role
← Previous message | No next message

Oh my goodness Steve, you're correct. My component must have inherited
something from up the tree. Thank you - this is very helpful. I'll
take it out of the setting it's in and test it in isolation.

Glen, I'm offering keyboard users an alternative, whereby when they
activate the item they want to drag, a menu pops up containing the
names of all possible drop areas. It works beautifully, apart from
this menu issue, which I now know is down to inheritance and can be
fixed.

Thanks both, very useful indeed.

Cheers, Isabel

On 24/10/2018, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> As a bit of an aside, anytime I encounter a drag and drop interface that
> needs to be accessible, the first thing I do is make sure the same
> operation can be done with a keyboard. You don't necessarily have to be
> able to drag something with a keyboard as long as whatever you're trying to
> accomplish can be done with an alternate interaction. For example, when
> inserting shapes onto a slide in powerpoint, I can get to the shapes menu
> with the keyboard and after arrowing to the shape I want, hitting
> Ctrl+Enter will insert the shape into my slide. I can then use the arrow
> keys to move and resize the shape to where I want it. I didn't have to
> drag/drop anything.
>
> That doesn't mean you can't have an accessible drag and drop. With
> voiceover in safari on my ipad, I can press/hold on a tab and then drag the
> tab to reorder the tabs in the browser. Voiceover gives feedback on where
> the tab is being dragged. It's pretty sweet.
>
> However, speaking to your original question, as Steve noted, you might have
> some other code that is causing the menu announcement, such as
> aria-haspopup, or the role on a parent item.
>
> Glen
> > > > >