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.