Buttons interaction accessibility
Nov 08, 2022
Hi all,
I am trying to find answers regarding how button interactions should behave so that they are not a barrier for screen readers.
In a course developed by our LED team, on a slide with three buttons, once the pop-up pertaining to the first button is closed, the user returns to the beginning of the slide. To get to the second and third buttons, a screen reader user would have to go through the whole slide again. To me, that's poor user experience and a barrier.
Is there any way to adjust the focus order so that once the close button of the pop-up window is used, the screen reader will return to the initial button that would now be announced as "visited"?
My LEDs want to know if returning to the beginning of the slide after each pop-up window will render the course inaccessible.
To me, having to navigate the slide all over again after each pop-up window is closed is frustrating and it prolongs the time a screen reader user will spend on each slide, but I can't point them to where in WCAG it says this is a definite fail.
I would really appreciate your help with this issue. Thank you!
12 Replies
What should be happening is that you set the focus order so objects on each layer are after the relevant button so it then moves onto the next button.
if you want it to go back then you can set the layer to prevent users clicking pin the base layer which will then move the focus back when you hit the close button.
Are you hiding objects on the base layer? As that maybe why you are having to revisit all objects.
I am not sure why your second answer to me shows as reported, Phil, I apologize for that.
I am not a developer but I can certainly ask my team if we are doing that!
Thanks a lot!
Hi Andreea and Phil,
Our team monitors flagged or reported posts for false positives and releases them to the community as soon as possible. I've unflagged Phil's post so you should be all set now!
Thanks, Kelly, Phil's answers were really helpful!
@Phil, Just making sure I understood this the right way: If they lock the base layer, that would move the focus order to the next button and its own pop-up window and so on until all the buttons are read.
What would hiding objects on the base layer do, in that case?
It really depends on how the interaction works.
If you have buttons that open layers and the layers are like popups and have a close button then you should set each layer property to prevent user from clicking on the base layer. Doing this the user will click a button the focus will switch to the layer and cycle through in the order on the focus order and then when you press close it will jump back to the previously selected button.
If however it is more a tabbed interaction without a close button then you shouldn't prevent user clicking on the base layer, but in the focus order ensure each layer is after its corresponding button and then the focus order will go, button, layer content, next button, etc...
If you hide the objects on the base layer there is a possibility that each time you return to the base layer it starts reading from the beginning (In never use this option so have not tested)
Hi Phil,
I'm the LED that is developing the course Andreea is referencing. I do have the text layers/close botton following each selected button. When the user closes the layer, I don't want the title or base text to be read again. I have attached a screen shot of the focus order.
I also hide the base layers in each layer and does not seem to resolve me issue.
June
I wouldn't hide the base layer.
I would set each layer so it prevents clicking on the base layer. Focus order seems OK, hiding the base layer maybe breaking it.
Thanks Phil! Something that I have spent so much time on and it was as simple as preventing the users from clicking (not hiding) the base layer!
Thank you!
June
Glad you got it sorted
Phil, thank you so so much! This is my great win for today! Many Thanks!