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 for Banner Images

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

Home Page Instructions

1. Click the “Multiedit” Button to display your banner options. 

  • The OU Campus horizontal options menu with the Multi-Edit button and yellow icon indicating checked out icon emphasized with a garnet rectangle, followed by a green Publish button with a dropdown arrow, an expand icon, and an ellipses icon for more options. To the left are four tabs for Preview, Edit, Properties, and Versions.
     

2. Select a “Banner Type,” large or small, and how many you wish to display. 

  • Banner Type screen. Shows the Banner Type and Show Banners sections emphasized by a garnet rectangle. Banner Type options include radio buttons for a Large or Small Home Page Banner (Small selected). Small help text says to Choose what type of banner you would like to appear on your homepage. The large banner is a 1140 x 580 px image that span the full width of the page and the smaller one uses a 680 x 430 px image with a garnet area beside it for a caption. Below, the Show Banners section provides checkboxes for selecting between 1 and 5 banners (1 selected). Small help text says Checked banners will be displayed on a randomized basis.
     

3. Insert your image for each slide using the image upload button. 

  • Slide 1 banner options screen. Shows the Image upload options emphasized with a garnet rectangle, with an empty filepath name field next to buttons for uploading a photo and clearing the selection. Below, the Description field shows placeholder text: Add a description for the image.
     

4. Add your alt text to the "Image Description" box.

  • Slide 1 banner options screen. Shows the Image Description field emphasized with a garnet rectangle and the placeholder text Add a description for the image. Above, an empty box for the Image filename path next to buttons for uploading a photo and clearing the selection.
     
Video Tutorial for Home Page Banners

Learn how to add alt text to a home page banner.


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.
     
Video Tutorial for Content Pages

Learn how to add alt text to a content page banner.


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.

©