Image galleries are used to present a collection of images, usually in a grid of interactive thumbnails that can be launched into a modal or carousel view.
- Ensure each thumbnail image in a gallery is clickable.
- Consider providing a caption or attribution for each image in the gallery.
- Provide a touchpoint for returning to the grid-thumbnail view when the carousel/modal view is launched.
- A close button or thumbnail icon will suffice.
- Avoid placing text over images in an image gallery. The point is for users to see the full image without any alterations.
- For very large image sets in a gallery, consider presenting them in related groups, by categories, or using filter controls.
On an Android phone with TalkBack or an iPhone or iPad with VoiceOver active:
- Make sure that each image has an alt attribute. Swipe to each image, and listen to hear the screen reader read the text for each image on the full “gallery” view.
- When you swipe to each image on the gallery view, make sure that you see the corresponding focus outline. Both TalkBack and VoiceOver will show an outline around the content as it is read.
- In the gallery view, ensure that the screen reader indicates the image is interactive and will open a new view. TalkBack or VoiceOver should say “button” or “link” along with the alternative text.
- On the “detail” view, the user should be able to swipe to the “X” to close the window (and hear something like “close” or “cancel”). They should also be able to swipe to the image info (like, “1 of 18”) and the gallery icon. Make sure the screen reader explains what the icon represents. The user should also be able to swipe to the image to hear the alternative text and to the text below. Again, make sure that you see the corresponding focus outline – both TalkBack and VoiceOver will show an outline around the content as it is read.
- To check the accessibility of Android apps, developers can use the Accessibility Scanner from Google: https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor
- To check the accessibility of elements within iOS apps, developers can use the Accessibility Inspector from Apple: https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityiniOSSimulatorwithAccessibilityInspector/TestAccessibilityiniOSSimulatorwithAccessibilityInspector.html
|Date/Time of Change||Who Made the Change||Change Details|
|Jun. 04 2018 2:34pm||Initial content entry|