WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Gallery with expanded Images on Click

for

From: glen walker
Date: Mar 23, 2021 2:43PM

Conceptually, you could probably use aria-expanded. It doesn't exactly
match but is pretty close. You are kind of expanding the button to display
more info (a magnified picture) and when you escape or close the image, the
button is now collapsed.

I like being able to arrow left/right within the magnified picture to get
to the next one rather than having to close it, navigate to the next one,
then expand it. Just make sure that when you escape from the image, the
focus returns to the button associated with that image and not necessarily
to the button that was originally expanded. And make sure aria-expanded
gets set back to false.

With aria-expanded, you don't need extra text in the alt attribute. Plus,
if you had info in the alt about it magnifying the image, that info would
be repeated in every image and would get monotonous and annoying. You
could have a statement somewhere on the page that says selecting the button
will magnify the image.