Alt text on states
Mar 22, 2024
I have added alt text to the states on my buttons so that they read collapsed and expanded as per aria expanded standards.
I cannot figure out why the four buttons in this story are behaving differently. All four buttons have the same states, triggers and alt text.
Sometimes narrator reads the alt text on a state twice. Why?
Buttons one and two display the visited state but buttons 3 & 4 do not. Why?
Admittedly this course was built by an external company, and I am trying to make it accessible, I feel as though there is some hidden information that is beyond my experience as I cannot understand what is happening. Can someone have a look for me and explain where I am going wrong?
3 Replies
Hi Marie,
One thing you can do to improve this, is to add the buttons to a button set. This ensures that only one button is selected at a time.
To add the buttons to a set, select all the buttons > right click > Button Set > Button Set 1.
I would also recommend adding a comma before the button state. This helps users differentiate between the button labels and it's state, for example "1) Legislation, expanded". The comma adds a short pause to the screen reader.
The other issue is that when you close any of the layers using the (x) close button, the button you have just selected remains selected. This would need to be reset. I would actually consider removing the close layer button as it seems to be sending the reading focus back to the top of the slide. It will be a better experience for screen reader users without the close button.
In the example I have provided, I've also hidden the "selected" button from the base and added a duplicate of the button to the open layer with the "selected" state showing. This ensures that when the layer is opened, it will read the "expanded" state of the button.
Hope this helped you out. It can be difficult figuring out the best way to structure content for accessibility in SL.
Cheers,
Sam
Hi Sam
Thank you so much for the advice above. The following comment "In the example I have provided, I've also hidden the "selected" button from the base and added a duplicate of the button to the open layer with the "selected" state showing. This ensures that when the layer is opened, it will read the "expanded" state of the button."
I know how to remove something from the focus order, but feel like I am missing something around how we get alt text on states to appear and hide in the focus order. My alt text that I place on the selected state does not seem to automatically appear in the focus order even though I am ticking the box "Object is visible to accessibility tools."
Hi Marie, the "selected" state should work, but what I have found with interacting with elements using a screen reader is you tend not to get the updated state announced until you navigate away and then back to the element. What about other states such as "visited" or any custom states you develop? Do you have the same problem with those? I don't have any issue with states being read by screen readers, only the issue I mention at the start (updated state not being announced when the element still has focus).