Refine By

Image gallery

  • Contents:

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.

Guidelines

 

  • Ensure standard grid guidelines and carousel guidelines when presenting an image gallery.
  • Include a number to show how many images are in the gallery.
  • Provide alt-tag for each image in the gallery
  • 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.

Accessibility Guidelines

 

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.

Resources:

Related Elements

Related Components

Version History

Date/Time of ChangeWho Made the ChangeChange Details
Jun. 04 2018 2:34pm Initial content entry