Skip to Content

Digital Accessibility

Banner Images

All banner images will need alt text, and how you add it depends on whether it appears on a home page or content page.

Adding & Replacing Alt Text to Banner Images

Consider alt text every time you add or replace a banner image.

Home Page Instructions

1. Click the “Properties” tab to access the "Custom Settings" for displaying your banner.

  • The horizontal options menu with four tabs, Preview, Edit, Properties, and Versions. Properties is emphasized with a garnet rectangle. To the right of the tabs are two buttons, one featuring a check mark and the other featuring a small box. To the right of the two buttons is a button with a yellow lightbulb icon in the middle, surrounded by a garnet rectangle for emphasis. On the far right is a green Publish button with a dropdown arrow and a small gray circle with a question mark in it.
     

2. Check the "Display Banner Image" box, if necessary, and insert your image with the "Banner Image" option.

  • A screen with heading Custom Settings. The Display Banner Images section is surrounded by a garnet rectangle for emphasis and includes a Yes radio button selected and the italicized text Uncheck to hide banner image. The Video Banner Image section shows a Yes radio button and the italicized text Uncheck to double video banner image. The Banner Image section is surrounded by a garnet rectangle for emphasis and includes an empty text field with two buttons, one with a paper icon and another that says Clear. The section also includes italicized text Choose banner image. The section Banner Image Text includes an empty text box and italicized text Enter banner image alt text. The Video URL section includes an empty text field with two buttons, one with a paper icon and another that says Clear, as well as italicized text that says Enter the URL from the embed code to play a video from the banner image. Leave blank if a video is not needed. The Intro section has a Show intro radio button that is selected, and italicized text Choose whether to display the intro content region. The Right column section includes a Show Right Column radio button that is selected and italicized text that says Choose whether to display a right column for callouts. A final section called Secondary Context has a radio button Show secondary content region, as well as italicized text Choose whether to display a secondary full-width content region before the maincontent.
     

3. Add your alt text to the "Banner Image Text" box.

  • A screen with heading Custom Settings. The Display Banner Images section includes a Yes radio button selected and the italicized text Uncheck to hide banner image. The Video Banner Image section shows a Yes radio button and the italicized text Uncheck to double video banner image. The Banner Image section includes an empty text field with two buttons, one with a paper icon and another that says Clear. The section also includes italicized text Choose banner image. The section Banner Image Text is surrounded by a garnet rectangle for emphasis and includes an empty text box and italicized text Enter banner image alt text. The Video URL section includes an empty text field with two buttons, one with a paper icon and another that says Clear, as well as italicized text that says Enter the URL from the embed code to play a video from the banner image. Leave blank if a video is not needed. The Intro section has a Show intro radio button that is selected, and italicized text Choose whether to display the intro content region. The Right column section includes a Show Right Column radio button that is selected and italicized text that says Choose whether to display a right column for callouts. A final section called Secondary Context has a radio button Show secondary content region, as well as italicized text Choose whether to display a secondary full-width content region before the maincontent.
     

Content Page Instructions

1. Click the "Properties" tab to access the "Custom Settings" for displaying your banner.

  • The horizontal options menu with four tabs, Preview, Edit, Properties, and Versions. Properties is emphasized with a garnet rectangle. To the right of the tabs are two buttons, one featuring a check mark and the other featuring a small box. To the right of the two buttons is a button with a yellow lightbulb icon in the middle, surrounded by a garnet rectangle for emphasis. On the far right is a green Publish button with a dropdown arrow and a small gray circle with a question mark in it.
     

2. Make sure the "Banner Source" is set to "Custom" and insert your image with the "Single Image" option. 

  • A screen with heading Banner. The Banner Source section is surrounded by a garnet rectangle for emphasis and includes three radio buttons, Inherit, Custom, and Hide (no banner image), with Custom selected. Next is the italicized text Choose whether to display a banner and where it should come from. Choose ‘Hide’ for no banner image, ‘Custom’ to select it, or ‘inherit from parent folder’ to inherit the banner image specified in the ‘_section.prop.pcf’ file at this level of the directory tree. Below this text is the Single Image section, which is also surrounded in a garnet rectangle for emphasis. It includes a blank text field with two buttons to the right, a paper icon and Clear, as well as the italicized text Navigate to a previously uploaded banner image (825 x 350 px) by clicking the image button. Leave blank for image slideshows. The next section, Single Image Alt Text, includes a text box with the words Banner Image in it and italicized text Provide ‘ALT’ text for the single image for screen readers. Leave blank for image slideshows. The next two sections, Caption Headlines and Caption Description, each include an empty text field. The section Caption Link or Video Link include the empty an empty text field with two buttons to the right, the first a paper icon and the second Clear. The last section, Video Banner, include an Enable video checkbox option and italicized text Select this checkbox to create a video banner image.
     

3. Add your alt text to the "Single Image Alt Text" box.

  • A screen with heading Banner. The Banner Source section includes three radio buttons, Inherit, Custom, and Hide (no banner image), with Custom selected. Next is the italicized text Choose whether to display a banner and where it should come from. Choose ‘Hide’ for no banner image, ‘Custom’ to select it, or ‘inherit from parent folder’ to inherit the banner image specified in the ‘_section.prop.pcf’ file at this level of the directory tree. Below this text is the Single Image section, which includes a blank text field with two buttons to the right, a paper icon and Clear, as well as the italicized text Navigate to a previously uploaded banner image (825 x 350 px) by clicking the image button. Leave blank for image slideshows. The next section, Single Image Alt Text, is surrounded by a garnet rectangle for emphasis and includes a text box with the words Banner Image in it and italicized text Provide ‘ALT’ text for the single image for screen readers. Leave blank for image slideshows. The next two sections, Caption Headlines and Caption Description, each include an empty text field. The section Caption Link or Video Link include the empty an empty text field with two buttons to the right, the first a paper icon and the second Clear. The last section, Video Banner, include an Enable video checkbox option and italicized text Select this checkbox to create a video banner image.
     

 

Marking Images as Decorative

It is not an option in these snippets to mark an image as decorative. You will need to write alt text for each banner image on your site, even any you might normally mark as decorative on another platform.

Challenge the conventional. Create the exceptional. No Limits.

©