Images | Civica design system

Introduction

Avoid unnecessary decoration. Only use images if there is a real user need.

Aspect Ratio

The aspect ratio for photographs should be 3:2.

For illustrations or representative imagery, if the image represents something physical, such as a letter, document or credit card then this aspect ratio should be used.

Alternative text

Alternative text, or alt text, is read out by screen readers or displayed if an image does not load or if images have been switched off.

DO	DON'T
Tell people what information the image provides. Describe the content and function of the image. Be specific, meaningful and concise. Use normal punctuation, like commas and full stops, so that the text is easy to read and understand.	Include the name of the photographer or person who created the image. Start with 'image of', 'graphic' or 'photo of' Repeat information from the page. Include extra information not on the page.

For image alternative text

Some images do not need descriptions. Use alt="" if the image is:

Decorative and does not include important content.
An icon that has a text label that the alt text would repeat.
Used in a link and the image is not needed to understand the link.

Use the Web Accessibility initiative alt decision tree to work out if the image needs alt text.

Avoid images that contain text, especially PNGs and JPGs as the text becomes unreadable when the user zooms in. If the image does contain text, use the SVG format as it remains readable when the user zooms in. The alt text should be the same as the text displayed in the image.