Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This pattern is used whenever an image is included as part of a Data Definition.

...

How it works

Image location

...

Selection

What this means

What this triggers

Internal

Indicates the image file is located in Cascade as part of your site.

Causes the Image file Data Definition field to display.

External

Indicates the image file is located somewhere on the web, not in Cascade as part of your site.

Causes the Image URL Data Definition field to display.

Image file

Note

Only displayed when Image location is set to ‘Internal’.

...

Use the asset chooser to indicate the desired image in your Cascade site.

Image URL

Note

Only displayed when Image location is set to ‘External’.

...

Enter the full URL of the image in the text field.

Alternative text

...

Enter the image’s alternative text in the text field.

Info

Alt text is the text-equivalent of the image and is used when when the image can’t be displayed by the browser or can’t be perceived by the user. It is super important for accessibility.

Some tips:

  • Use alt text to provided the content and function of the image.

  • When an image is used as a link, the alt text should indicate where link will take the user.

  • When an image is used to display stylized text, the alt text should represent that text exactly.

  • Alt text longer than ~100 characters is likely too long. Maybe what the image is meant to convey should be more thoroughly described in the main text of the page.

  • Alt text can be pretty nuanced. Consider reading WebAIM’s article on alt text.