Material Box improvement: When zooming in we should add a closing button so users know how to exit zoomed in view clearly

[nh916]

When the user clicks on the image the image zooms in without telling the user an obvious way of how to zoom out. I think it would be very helpful if our framework added a white X button on the right corner that would clearly tell the user how to exit out of the zoomed picture, or something that would indicate that clearly.

We probably also need some aria labels for vision impaired users to have the assistive technologies tell them that they have zoomed in on an image and the X button should then be easily tabbed into to close the image. This way any user that has accessibility needs doesn't get stuck on the zoomed image and have a hard time tabbing out.

it could look something like this

It would be all the better if the X could somehow match the color of the image or be a mute color as to not distract away from the image that the user wants to see

[godalming123]

You could also add the image alt tag underneath

[LoganTann]

I think it would be very helpful if our framework added a white X button on the right corner that would clearly tell the user how to exit out of the zoomed picture, or something that would indicate that clearly.

When the material box is open, the cursor changes to tell the user he just have to click on the image to hide it. We could add a X button (eg: for accessibility), but in fact, clicking anywhere would close the material box

You could also ad the image alt tag underneath

There's already the data-caption attribute

[gselderslaghs]

Enhancements towards accessibility have been implemented in v2.2.1
Regarding the close button, it's something more custom to implement, you'd have to add a wrapper and add materialbox class to the wrapper instead of the image, next add a close button dynamically in the onOpenStart callback function, adding functionality that calls the materialbox close method, then remove the close button within onCloseStart custom callback
Hope this clarifies your issue, propose to close this for now

[gselderslaghs]

Closing this for now as we have addressed accessibility in the latest release, feel free to reopen if any additional concerns about this issue arise