Forum Discussion
Transparent Shapes and States
I like the idea of the accessibility checker, but I am having problems deciding how to do what it is telling me. I am also having issues with the flow because some items are on the base layer and some on layers. How do I set the order when the layers are meant to be popup information?
I am building a game that needs to be accessible. The problem is it has transparent shapes that bring up images on hover. Those images have a lot of text that is too much for Alt Text. The Shapes also have a Selected State that shows a check mark when selected.
This all works great of sighted people but how do I handle them with keyboard and screen reader? How do I help the keyboard or screen reader tell the person what is going on?
The Accessibility Checker tells me I have to have the video controls on, but I do. It shows me things that I have working, why are they appearing on the list?
Hello JeffreyRiley-9e
I'll start by saying, it's hard to fully understand what you're experiencing without seeing the project file, but I'm happy to share some initial thoughts on each of the concerns listed here.
Having problems deciding how to do what it is telling me.
The accessibility checker flags potential issues and directs how to resolve them. Which issues are you having difficulty with?
How do I set the order when the layers are meant to be pop-up information?
We do have some information on making layers accessible. Are you having a specific issue with the focus order?
The problem is that it has transparent shapes that bring up images on hover.
You're right, hover-only interactions won't work for keyboard or screen reader users. Have you considered turning them into buttons or using triggers instead of hover?
Those images have a lot of text that is too much for Alt Text.
Are you describing images with text? That's generally not a good idea for accessibility. If the information is too much for alt text, you may want to consider a text box that can be accessed by all learners.
How do I help the keyboard or screen reader tell the person what is going on?
Based on your description, create an alternative to hover states, consider text boxes instead of images with text, use clear focus indicators, and provide clear instructions for all learners.
The Accessibility Checker tells me I have to have the video controls on, but I do.
Do you mean that the accessibility checker is flagging this as an issue you think is resolved? It would be great if we could take a look.
It shows me things that I have working, but why are they appearing on the list?
Resolved issues can still be displayed if not filtered out, and the checker doesn't always know if you've resolved the issue differently, which is why the skip option is available.
When you share your file, let us know which flagged issue you're referring to so we can examine it more closely
3 Replies
I'm still learning a lot of this as I go. And it seems LeslieMcKerchie has done a bit of solid response. But I'll go over them as well from someone who is currently trying to make slides super dynamically visual while adhering to keyboard users.
Changing orders of layers does nothing for focus. It all comes down to when they are called on.
So for example if you have a button called "frog button" on the Base layer that says "click here to learn about frogs" and then then that reveals a layer called "frogs". Your focus order is "frog button" followed by "frogs" It won't screen read any layers that are hidden, so a user won't hear the information unless they click the "frog button". Basically you could have 100 layers in between 2 buttons on the base layer, but none of them will be accessed by a screen reader/keyboard user until they are shown.
You can have the hover button also be a click button. That way it works for mouse users the way you wanted and also for keyboard.
If the images are important to the game then try to keep the text as minimal as possible, but if that is not possible, remember the alt-text text length is recommended only.
Also each state has its own alt-text. So normal state might be "bob is sitting" and then on hover it can be "bob is standing". Also make sure any state you don't want read out is not ticked in the alt text field.
With the video controls issue, I can't see the issue, so I'll just come off sounding like an idiot, but here goes. Within the Player Settings, make sure what controls you want one are ticked on, and then with each video under OPTIONS you must select what style of Video Controls you want to see. If this isn't selected then the controls are not active which might be why the Accessibility Checker is reporting a problem.
Leslie you have given me some great ideas on things I had not considered. I am going to apply these and see how they work. I can always reply and include a sample project.
Thank you.
Hello JeffreyRiley-9e
I'll start by saying, it's hard to fully understand what you're experiencing without seeing the project file, but I'm happy to share some initial thoughts on each of the concerns listed here.
Having problems deciding how to do what it is telling me.
The accessibility checker flags potential issues and directs how to resolve them. Which issues are you having difficulty with?
How do I set the order when the layers are meant to be pop-up information?
We do have some information on making layers accessible. Are you having a specific issue with the focus order?
The problem is that it has transparent shapes that bring up images on hover.
You're right, hover-only interactions won't work for keyboard or screen reader users. Have you considered turning them into buttons or using triggers instead of hover?
Those images have a lot of text that is too much for Alt Text.
Are you describing images with text? That's generally not a good idea for accessibility. If the information is too much for alt text, you may want to consider a text box that can be accessed by all learners.
How do I help the keyboard or screen reader tell the person what is going on?
Based on your description, create an alternative to hover states, consider text boxes instead of images with text, use clear focus indicators, and provide clear instructions for all learners.
The Accessibility Checker tells me I have to have the video controls on, but I do.
Do you mean that the accessibility checker is flagging this as an issue you think is resolved? It would be great if we could take a look.
It shows me things that I have working, but why are they appearing on the list?
Resolved issues can still be displayed if not filtered out, and the checker doesn't always know if you've resolved the issue differently, which is why the skip option is available.
When you share your file, let us know which flagged issue you're referring to so we can examine it more closely
