I’ve been notified of a bug with the text reveal component that I’m unsure how to fix. My client has reported that when they shrink their browser screen to a certain point, the plus icons that appear when hovering over the text reveal buttons are out of alignment. I’ve tested this on Chrome, and it’s happening to me as well. It’s also doing this on the mobile landscape preview, so I’m wondering if it’s an issue when the browser size hits specific breakpoints. I’ve attached some images so you can see what we’re seeing. Any advice, signposting, etc., is welcome!
Update: Could it be related to the captions expanding to three lines during shrinkage? It’s only happening on these text reveal icons …
I appreciate it’s not ideal but one solution would be to have the text as part of the graphic
I want to avoid that if possible. Images with text aren’t advised from an accessibility point of view.
I’ll provide feedback to my client. Perhaps we can condense the caption to a single keyword and include the entire question in the pop-up; that might work.
Yeah I guess it would be fine for screen reader users as they could use the image alt text - but less good for people with other vision issues who don’t use a screen reader.
Two other ways we’ve handled that “issue” are:
In theme: make the markers massive and transparent. That way the user can click any part of the artwork to trigger the reveal.
Rebuild as infographic: Advantage is the artwork can have two states to signpost clicked/not clicked. Disadvantage is scaling on mobile makes it a little tricky to get font size correct. We add a “Best viewed in landscape on mobile devices.”
Thanks @Andy_Moorman for the suggestions. The first option is an interesting idea, so I’ll look into it.
Unfortunately, rebuilding as an infographic isn’t an option for the reasons you’ve stated and because the component is not accessible. I try to avoid adding caveats to pages unless I really have to, but then again, that’s what accessibility statements are for.
