Accessibility issues with hotspot pop-ups
Jul 11, 2023
By
Sam Hill
I have identified one, maybe two issues with the pop-up windows that appear when selecting a hotspot.
Issue #1: There is a heading withing the pop-up window that is not using a heading level element and is therefore not identified as a heading to assistive technology such as screen readers.
Issue #2: The reading order doesn't seem right to me. Each pop-up reads as follows: Heading > Back arrow > Next arrow > Content. It seems unusual that the navigation between the hotspot pop-ups is sandwiched in between the heading and body content. I feel the more logical place for the Back/Next arrows would be after the body content: https://www.dropbox.com/s/f1j088bqw2i0rn9/2023-07-11_11-22-27.mp4?dl=0
4 Replies
Hi Sam,
I see what you're saying for the marker titles. I'll write that up for the team to have a look!
I'll find out more about the announcement order for the labeled graphic marker group. I notice that you can arrow down through the text, and either arrow down to the next marker group or tab to the previous/next buttons on the current marker group. I'll make sure that flow fulfills the meaningful sequence criterion.
Hey Sam!
Chiming-in and following up on issue #2 - reading order of the marker bubble contents. We used to do the order you described, essentially according to the perceived importance. However, through research and feedback we received, we went with the recommendation of following the natural reading order of top to bottom, left to right in consideration of users with cognitive disabilities that may be using screen readers to assist, where they might potentially get thrown off if the focus cursor would appear to jump around.
I hope it shed a little light in that regard. Your insights are valuable to us as we continue to improve our accessibility. Thank you for sharing it!
Cheers!
Marvie
Hi Marvie, it sounds like it has gone through some consideration and testing. It didn't feel like a natural experience for me using a screen reader, but I may be in the minority here.
My thought was that the order of appearance doesn't necessarily need to change, but the order order in the DOM could change, and then the elements positioned as they are now using CSS.
So, the DOM element order would be like this: Heading > Content > Back arrow > Next arrow, but the visual order could remain the same: Heading > Back arrow > Next arrow > Content. This would address any concerns of the focus order being thrown off, as it would not need to be manipulated using script.
We take this approach in courses we build where the visual layout may work better if they "appear" not to follow the natural order in the DOM. Hope that makes sense.
Absolutely, it does makes sense! This is exactly what we did before - visually, the design layout is preserved, and in the DOM it was ordered as Title > Content > Prev > Next. In this case, the screen reader would highlight them in the same order. But a user that has a learned reading pattern, or expectation of the typical sequential, natural order of left to right, top to bottom may throw them off if visually it highlights going down the marker bubble contents (which can be long, with text & media), and then back up to the previous & next buttons.
I appreciate this conversation! It make us a11y advocates better everyday!
Cheers!
Marvie