WebAIM - Web Accessibility In Mind

E-mail List Archives

Gallery with expanded Images on Click

for

From: wolfgang.berndorfer
Date: Mar 23, 2021 12:04PM

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