Images

• Use photos in which the subject is clear and easy to understand.
• Use photos that have good natural lighting.
• Use a variety of subjects and locations, especially if using multiple images.
• Try and include more diversity and more candid, organic, and natural portraits.
• Include a description of the information in a graphic with text (i.e. a graph or chart communicating complex content) below the image for legibility and accessibility. We recommend limiting the use of graphics with text; they should be used only when necessary.

What to avoid

• Don't use graphics or event posters as images.
• Don't include text or use photos with text on an image. This is inaccessible to screen reader technology.
• Don't stack logos over an image to communicate the brand. Logos over an image might reduce legibility of the logo and image, or reduce the impact of the main logo within the website header.
• Don't use imagery with people that are displaying exaggerated emotions.
• Don't use photos with too many focal points.
• Don't use photos taken exclusively at a single location or public event.
• Don't use stock photos with white backgrounds or abstract image concepts (i.e. synergy, a picture of a puzzle, or an object cutout).

Accessibility

Offer text-based alternatives for image content (called 'alt text') to ensure all users can access the information. For complex images, such as charts or infographics, provide detailed descriptions either in the main text or as a caption.

Tips for writing alt text

Alt text should convey the content and function of the image while keeping context in mind. Keep in mind when writing alt text that you are 'someone's eyes'.

1. Be Descriptive and Concise: Clearly describe the image in a few words or a sentence. Aim to be succinct while conveying the essential information.
2. Context Matters: Tailor the alt text to the context in which the image is used. Consider what information the user needs to know about the image in relation to the surrounding content.
3. Avoid Redundancy: Do not repeat information that is already provided in the surrounding text. The alt text should add value and not be redundant.
4. Omit "Image of": Avoid starting with phrases like "Image of" or "Picture of." Screen readers already announce the presence of an image, so this is unnecessary unless specifying the type of image is essential (e.g., "Diagram of, painting of").
5. Include Relevant Details: Focus on the important details that convey the purpose or message of the image. For example, if an image shows a person smiling at a dog, the alt text could be "Person smiling at a golden retriever."
6. Complex Images: For complex images like charts, graphs, or infographics, provide a brief summary in the alt text and a more detailed description elsewhere on the page.

Learn from others! Check out some examples and suggestions from Harvard University's web page on how to write helpful Alt Text.

If you would like to add an image to your web page, you have two options.

1.  You can add ask Webdesk to import an image from Brandhub. Simply share the Brandhub link with Webdesk along with details about which page you'd like to use it on. Webdesk will import your image into the media library and related page. 
2. You can request a new image by completing the image upload form with all the necessary information. This will notify Webdesk and allow staff to then add to Brandhub and the website for you.

Before you submit an image, consider what type of information it helps convey and create a description that can be used as alt text.

Adding multiple images

A straightforward way to send several images to Webdesk to be added as a carousel is to log into Brandhub and create a collection. Share the link with Webdesk along with details on where you want them added to the page as well as any captions you wish to add.

Webdesk steps

Please see the page related to the IntelligenceBank integration for instructions.

If you need to edit/replace an image from Brandhub, send the updated image file or details to Webdesk. Once the file is replaced in IntelligenceBank it should automatically update on the website.

Do not edit the image in the Drupal Media Library.

You can also delete media items from the media library.

Once you navigate to the media library, you can use the search or filter items to find the media you wish to delete. Once you find it, select Delete in the Operations columns. If you want to delete multiple media items, you can select them using the checkboxes and perform a group action.

Once you select Delete, you will be given a confirmation page, to ensure you mean to delete the item.

If you receive an error when attempting to delete a file from the media library, it could be that the item is in use elsewhere. If you have updated the links or files in the live version of the page, the old media link could be present on a previous page version. Drupal hangs on to these media items in case you want to revert to a previous page down the road. In order to properly delete the file, you must also remove it from previous versions of the page, or delete old versions of the page.