E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 2 (In chronological order)

From: wolfgang.berndorfer
Date: Tue, Mar 23 2021 12:04PM
Subject: Gallery with expanded Images on Click
No previous message | Next message →

How to optimize an image gallery with functionalities to magnify each image?



1. Each image in the gallery magnifies the image on click and sets the focus
back to the image when ESC is pressed. So, the trigger with the image is
rather a button than a link.

2. The triggers must be embedded in a list so that a SR user gets an idea of
the number of items.



Now my questions:



A) Alt-Text:

Is the semantic of a button enough to describe the functionality or should
the alt-text get some adjacent prefix/suffix to the description of the
image?

Examples: alt="Angry dog" / alt="Magnify: Angry dog" / alt="Angry dog |
Click magnifies image"



B) ARIA

Is there an aria-attribute available which covers the functionality? Didn't
find anyone convincing.



And what, if in the magnified status of any image, arrow-left/right lead to
the next image in a magnified status?



Thanks for ideas and best practice examples!

Wolfgang

From: glen walker
Date: Tue, Mar 23 2021 2:43PM
Subject: Re: Gallery with expanded Images on Click
← Previous message | No next message

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.