Notifications

Government mail service may be affected by the Canada Post labour disruption. Learn about how critical government mail will be handled.

Part of Components

Galleries

Visual-centric component to display multiple photos in one interactive space on a page.

Overview

Galleries are used to display multiple related photos in a limited space, controlled by overlaid arrow buttons. While they can enhance visual engagement, they can create usability and accessibility challenges if not implemented thoughtfully.

Usage guidelines

  • Keep galleries concise – ideally 3 to 5 slides. Overloading users with too many options can reduce engagement and clarity.
  • Avoid using galleries in important content areas (like above the page introduction or overview) as galleries generally do not provide enough context by themselves.
  • Make sure all images used in a gallery are the same orientation (preferably landscape) and dimensions (750 x 422 px for most cases; 1200 x 675 px for spaces that require larger images). Having different sizes and orientations within a single gallery creates a clunky user experience where the container changes size and navigation buttons change location.
  • Keep image file sizes low to reduce load times (aim for 200 KB or less per image). Slow galleries harm user experience and accessibility.
  • Ensure images used follow the proper file naming convention.
  • Keep an eye on engagement metrics. Replace or remove galleries that have low engagement.

Content guidelines

  • Each image within the gallery should have a clear purpose such as adding clarity to the page, showcasing progress of a project or highlighting a service. Avoid using galleries as photo dumps.
  • Avoid illustrations or text as graphics (text naturally within the photo, such as signage, is fine).
  • Image captions and alt text should describe the photos accurately and add to the content.
  • Ensure all gallery photos comply with the Government of Alberta Visual Identity Manual and Digital Experience Standard.
  • In general, avoid filling galleries with stock photos.

Related