Versions Compared

Key

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

...

Info

Patterns can contain or reference other patterns

Basic patterns

Image properties

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

...

How this works

  1. Select the radio button under Image location to indicate if your image is internal (i.e., exists in Cascade as part of your site) or external (i.e., will be referenced from some other website).

  2. Select / reference the image

    1. Use the asset choose for internal images

    2. Provide the image URL for external images

  3. Provide alternative (alt) text.

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 describe the purpose and function of the image, not necessarily the content 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 designed or highly 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.

Link properties

This pattern is used whenever an element in a Data Definition is linked.

...

How this works

  1. Select the radio button under destination type to indicate if the link points to an asset (i.e., a page on your site in Cascade), or a URL (i.e., a page not part of your site).

  2. Use the asset chooser to select the destination asset, or provide the destination URL

  3. If you want to point to a particular anchor on the destination page, provide the anchor ID in the Anchor text field (for asset links) or include the anchor in the URL for URL links.

  4. Select the corresponding radio button radio button under Open link in to indicate where you want the link to open.

Info

The choice to open a link in a new tab/window vs. the same tab/window has accessibility implications. In most cases, opening link in the same window is the correct and appropriate choice. Only in rare cases is it appropriate to open a link in a new tab/window (e.g., to preserve the state of page being linked from).

Text

This pattern is used whenever special accessibility considerations need to made for text elements.

Complex patterns

Custom CSS

Custom JavaScript