Aldrich: Image properties pattern
- Todd McGill
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
Only displayed when Image location is set to ‘Internal’.
Use the asset chooser to indicate the desired image in your Cascade site.
Image URL
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.
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.