Technology Services

Feature Slide Best Practices

Your home page Feature Slides are often the first things someone sees when they visit your site. As part of the Web Accessibility guidelines, these should have strong color contrast and be completely legible. Other tips for creating effective feature slides include:

  • Do not include informative text as part of the image; instead, use the caption field. Using text as a design element embedded in the image is fine (e.g. a word cloud).
  • Keep the caption text short, ideally less than 120 characters.
  • Provide a URL (web address) to which the feature slide can link. In this way you can keep the caption short and provide much more content and details (additional text, images, PDFs, video, etc.) on the page to which the slide links. Note that you can link to any page on your site (such as a course, event, or basic page) or any external site provided the URL is valid.
  • Keep the total number of slides to a minimum; ideally 5-6 slides in total. Remember, each slide can link to a different page providing the user with additional images and content.
  • Change out the slides as frequently as possible; ideally once every few months.
  • Include alternative text for the feature slide image (required). This does not have to duplicate the caption, but can be a description of the image. For example, if you are using a feature slide to promote an event at Duke Chapel, the alt text may be "Duke Chapel." while the caption is the title, date, and location of the event: "KISS Performs Live! April 1, 9:00pm at Duke Chapel".

Image resources

Finding images that work well in the landscape aspect ratio can sometimes be a challenge. Below are some resources for qualtiy images that are large enough to meet the size restrictions of the feature slide image. Care should be taken to provide a photo credit when required.

There are many other sources for non-Duke images, such as Shutterstock (a pay service) and Unsplash (free, but may require attribution). A list of freelance photographers available for hire can be found on the Duke Style Guide website.

Feature Slide Examples

Incorrect use of a feature slide

Incorrect Use of a Feature Slide
  • Informative text is embedded in the image; apart from not being readable by screen readers and search engines, this text is:
    • too small
    • of Insufficient contrast

Incorrect Use of Feature Slide
  • Informative text is embedded in the image; apart from not being readable by screen readers and search engines, this text is:
    • lost on the image
    • an obstruction of the main visual element

Correct Use of Feature Slide
  • By using the caption field, you can add information without distracting from the image or violating Web Accessibility guidlines.
  • The slide can be linked to a page with more information about the event.
If you have any questions regarding your Feature Slide and if it passes Web Accessibility standards, contact Trinity Web Support.