Using images in components with text overlaid
There are several components available across AEM that have text overlays on images or the option to overlay text on images.
- C08 Hero Carousel (Hero with CTA)
- C09 Hero
- C10 Full Width Photo CTA
- C12 Navigation Tiles
- C37 Article Hero
- C67 Timeline
- C73 Audio
- C82 Homepage Hero
- C84 Article Gallery
- C104 Hero - Featured Collection (PORTAL)
- C116 Globe (List View) (PORTAL)
Naturally, text will be harder to read on images that look visually busy, have a lot of content, or have a wide range of hues and varying brightness/contrast levels. Therefore, we have suggestions on what images would best work that have text overlaid.
If you are using a text overlay component, such as the C10 Full Width Image with Text and CTA component, keep in mind the following:
Keep the visual simple
Imagine the images used as backdrops for purely decorative purposes. Avoid using images that are people oriented or have subject oriented content. Users will try to read into the image if there are a lot of identifiable subjects in the photo, such a photograph with lots of animals, or one with a rich and complex composition. This could be distracting and deter users from focusing on the text that is overlaid.
Look for photos that are more abstracted or use textured patterns that stick to a limited color palette. See the examples below that use such styled photos:
Other photos that could work well for this component are ones with a soft blurred background. These photographs are shot with a wider aperture, creating a sharper focus on the zoomed in subject and blurrier background. The blurriness helps abstract the background more allowing text to appear more legible.
TIP: When using purely decorative images, set the alt text to be empty by adding a single space in the alt text field. This tells search engines and screen reading devices to ignore the image and, instead, read the text.
If you are using the C12 Navigation Tiles, keep in mind the following:
Use content in the image to frame the text
When using the C12 Navigation Tiles component, you will want to find images that could pair well with the centered text link. This may involve some experimentation in finding images that can compositionally frame the text well. The easiest way to achieve this is to find images that have a midsection where there is an 'empty space', meaning there is no important subject content positioned in the center of the photo.
Similar to finding photos for the C10 Full Width Image Text component, you can look for photos that are purely decorative and have a pattern fill. See the examples below that demonstrate how certain compositions of photos frame the text.
If you are sourcing images for the hero component:
Consider the visual composition
The Hero component can be a lot more flexible with different types of imagery. There is a lot more visual space to work within the hero components that allows for text to display clearly. To echo some of the design principles above, you want to make sure that the text can be framed well against the composition of the image, and that the image does not have too many elements to focus on. Avoid using photos that show too much detail or have a lot of texture. You want the text to be positioned in a space that is not visually distracting. See below some google examples of images used in the hero component:
Hero Component
Alt Text
Alt text in an image describes what the image actually shows. If you close your eyes and someone reads the alt text to you, you should have a really good idea what the image shows. Screen reading devices read alt text out loud to those who are blind or visually impaired so they can know what the image is. If there's no alt text, the screen reader will read the file name (which is usually something unhelpful like img_M546901.jpg). Google and other search engines also read the alt text to understand the image.
In most cases, an image's alt text will not change based on how it's used. An image of a piping plover chick could be used on a page that discusses habitat conservation efforts, a page about endangered species, and a page about piping plover reproduction, all with the same alt text describing the chick. Each of these use cases would use a different caption, but the alt text would not need to change.
Alt Text in Aprimo DAM
All new images uploaded to the Aprimo DAM are required to have alt text. Take care when writing alt text for any images you upload, as that is what will be seen every time the image is published on a page.
How to find an image's alt text on a published page
- Right click on image (command + click or 2-fingered click for Mac users)
- Select "inspect" from the menu
Depending on your browser, you should see the code of the image highlighted. Alt text will be marked with alt=, like this example: alt= "Closeup of the Baptism River at Tettegouche State Park".
Try it out on the image to the right!
Alt Text on AEM
Within AEM, the alt text is its own field in any image component. Simply open the page in AEM, select the image component, and find the alt text field. If the field is empty, it means the image is using the description field from the DAM as alt text, which is likely to be poorly written and non-descriptive. We recommend always writing a descriptive alt text when the field is blank.
How to write alt text
Alt text should briefly and specifically describe what the image shows, and include any relevant or important elements in the image that you'd miss if you couldn't see it. For example, "dog playing with a ball" is short and does sketch out a picture, but "border collie carrying a ball through a grassy meadow" paints a much more vivid picture.
Take a look at the media gallery below - all three photos show a dog playing with a ball. Only one can be described as a border collie carrying a ball in a grassy meadow.
"A dog playing with a ball"
When deciding what to include in your alt text, pay close attention to what's in the image. Does the image show a specific animal or plant species? Is it a specific and obvious time of day, is there visible weather (such as a lightning storm, snow, rain, powerful wind), or is it clearly a certain season? Do these elements matter to understanding the image? Is the landscape a specific or recognizable location, especially a historical or Indigenous location? Is the image an underwater or aerial photography shot? Are there people and do you know their names and/or titles (and are you approved to use them)?
Alt text fields in most AEM image components have a character limit of 175 characters. This should be plenty of space to write a good alt text!
Look through the photos below for examples of Alt Text.
Alt text best practices
- Use specific descriptions of the image or graphic - describe the image as if to a person who can't see it (which is what alt text does).
- If a graphic or image includes text, reiterate that exact text in the alt text. For example, when writing alt text for an image of a quote include the whole quote in the alt text using single quotation marks (').
- If the image is used for a specific purpose, such as a link, the alt text should describe the action and/or destination (such as "The Nature Conservancy of Illinois Facebook page").
- Include the name and title of a person if it's known, especially for headshots and especially for recognized individuals (Lynn Scarlett, Jennifer Morris, etc.).
- End alt text with a period. Alt text doesn't have to be a complete sentence, but a period causes screen reading devices to pause after reading the alt text out loud, which provides a helpful distinction between alt text and the next sentence on the page for people who with visual disabilities.
What doesn't belong in alt text
Alt text doesn't need to show how the image is relevant to the article. In fact, alt text will usually be the same regardless of where the image is used or in which context. To reiterate with our piping plover chick image, the image could be used on a page that discusses habitat conservation efforts, a page about endangered species, and a page about piping plover reproduction, all with the same alt text describing the chick. To place the image in the unique context of the page it's on, customize the image caption.
Don't include in the alt text:
- "Image of" or "photo of", as this is redundant to screen reading devices and search engines. The exception is if there is something important to state about the image, such as it's an aerial or underwater view, a vector graphic, or a hand-drawn illustration.
- The photo copyright or photographer name.
- The perceived age, race, gender, or sex of people in the photo unless it's legitimately important to understanding the photo.
- Double quotation marks ("). If your alt text includes an actual quote, such as in an image that includes text, use single quotation marks (').
- Information about how the image relates to the specific page - that's what the caption is for.
Alt Text
Two people stand among rows of hundreds of ponderosa and Douglas fir tree seedlings in a greenhouse.
Caption
Native species, such as ponderosa and Douglas fir trees, are already adapted to the climate and help maintain species diversity and resiliency in forests.
Image uses on TNC sites
We use images for a variety of purposes on TNC websites. Images include headshots for bio pages, images that tell a story, hero images, images on related article components, infographics, hand drawn sketches, graphics of text, even images that are used to link to another page (such as our logo and social media icons).
"What about if I just need a landscape header photo that isn't related to the page content?"
There is one use case for images that is treated differently: images that are purely decorative. Purely decorative images don't add any meaning to the page other than a pretty visual, and it wouldn't matter to a reader if they couldn't see it. If an image is used for purely decorative purposes, it doesn't need a descriptive alt text or a caption. Instead, simply add a space in the alt text field (literally one space-bar tap!). This is a signal that both search engines and screen reading devices understand. Search engines know that this space means the image is decorative, and screen readers know to skip the image rather than reading the caption or file name out loud. Remember to do this in the image component, NOT in the DAM, as this is a specific use case and it's unlikely that any image will always be purely decorative. You can also leave the caption fields blank on purely decorative images.
Captions
Image captions place the image in the unique context of the article. Screen reading devices read image captions out loud (along with the alt text) to those who are blind or visually impaired so they can understand the context in which the image is used. Search engines also read image captions to better understand the image.
Just as importantly, all readers love our image captions! Heatmap and scroll data shows that people linger on images longer than the surrounding text. We think this is at least in part due to people reading the image captions when scanning articles.
How to write image captions:
In AEM, our captions have two parts: titles (in bold text) and descriptions (in plain text). Caption titles and descriptions should be separate and distinct. They are not read together by either screen readers or search engines and should not be written to go together. Many of our images are older and were migrated over from a system that treated these elements as the same. Now, however, they look a bit off when part of the caption is bold and the rest is in plain text. Remember to check your captions before publishing an image!
On the left, here's an example of a caption that treats these two elements separately. On the right, here's an example of a caption that treats these two elements the same.
On the left, the caption will be read: "Piping plover chick. A federally endangered species, piping plovers are dependent on the sandy beaches of alkaline lakes to lay their eggs."
On the right, the caption will be read: "Alkaline lakes. At TNC's John E. Williams Preserve in North Dakota." Notice where the break is? The caption is not a complete sentence now.
If the image includes words or other text be sure to reiterate those words in the caption. For example, when writing a caption for an image of a quote include the whole quote in the caption. This might feel a little redundant but it's very helpful for people with visual and/or learning disabilities. Plus, we know that people tend to linger longer on images, and reiterating any text in the captions is helpful for everyone.
Image caption best practices:
A caption should be customized to the article it's used on, not reused over multiple articles.
A caption should be customized to the article it's used on, not reused over multiple articles. This may involve describing element(s) of the image or they may simply be used to illustrate a concept.
An image of a piping plover chick might have the following caption on a page about a preserve: "John E. Williams Preserve in North Dakota supports one of the largest breeding concentrations of piping plovers in the world." But on a page about habitat restoration, the caption might be: "Piping plovers nested at the Zetterberg Preserve at Point Betsie for the first time in several decades, thanks to the tireless work of hundreds of volunteers who restored the sandy shores over the course of many years." A different page about piping plovers might have this caption: "Piping plovers are a federally endangered bird species that nest along the shorelines in sand." The same image is used to convey different information through the different captions.
What to include in captions:
- Caption titles and descriptions in AEM image components should be written separately and not reference one another. They are read separately by screen readers and search engines.
- Captions should stand alone and not need to rely on nearby paragraphs to understand why that image is used. Don't assume someone has read the surrounding paragraphs when writing your image caption - in fact, you're encouraged to use the caption to reiterate a point from the surrounding text.
- Captions should be interesting and attempt to captivate readers who scan pages.
- If the image is a photo of a person and the page introduces that person by name, include their name in the caption (and title, if relevant).
- Skip the caption for purely decorative images.
- If a graphic or image includes text, reiterate that exact text in the caption.
As a reminder, the copyright and the copyright symbol are pulled from the DAM and added to captions automatically.
Image captions should also be interesting. This can help capture the interest of readers who scan articles and tend to linger on image captions.
Image captions should also be interesting. This can help capture the interest of sighted readers who scan articles and tend to linger on image captions. Interesting, well-written captions can persuade them to actually read the rest of the article (or at least the paragraphs around the image). But did you know that blind or visually impaired readers can also skim articles? Using assistive devices, these readers can jump ahead to different page elements. If the screen reader reads an interesting caption, they can also go back and read the rest of the article.
Try to make your image captions stand alone as much as possible, and not need to rely on surrounding paragraphs.
Try to make your image captions stand alone as much as possible, and not need to rely on surrounding paragraphs. Image captions should be brief summaries and help to illustrate why you're using that specific image in the article.
File names
Whenever possible, image file names in the AEM DAM should indicate what the image shows in some way. If other elements like alt text and/or captions are not included in an image, screen readers (and search engines) will read file names to understand what the image shows. File names like img_56783125.jpg don't tell us anything about the image. A better file name would be piping-plover-chick.jpg.
When uploading new photos, do your best to make the file names unique. Since we have lots of photos that look very similar across multiple BUs and regions, adding the region in the file name can help distinguish it (such as piping-plover-chick-new-jersey.jpg).
File name best practices:
- Indicate what the image shows, similar to how URLs indicate the page content.
- Include the file type (.jpg, .png).
The following images represent examples of images found across nature.org, how the alt text and/or caption could be improved, and what is already doing a good job.
Alt text: Person in overalls stands among trees and basks in the sunlight.
Caption: At Peace: Reynaldo Holmes is the Greenspace Manager for HABESHA Inc.
In this image, neither the alt text nor the caption reference identifying characteristics such as sex, gender, race, or ethnicity. In both cases, this information is not crucial to understanding the image. It's a person enjoying the sunlight while surrounded by trees, and the caption provides some context for the page, which is about a workforce development program. Plus, if we have not asked Reynaldo we might misidentify their pronouns or ethnic background.
Alt text: Jennifer Morris headshot.
Caption: CEO: Jennifer Morris is the Chief Executive Officer (CEO) of The Nature Conservancy.
For headshots and portraits, especially those on biography detail pages, the alt text should say the person's name and headshot. You can include their title, but this should go in the caption. If a headshot is used on an article page, the caption should address how the person is involved in the page topic.
Alt text: Dr. Mark Anderson, Director of Science, Eastern United States.
Caption: Mark Anderson: As Director of Conservation Science for the Eastern United States, Mark Anderson led the mapping work that identified areas resilient to climate change.
The alt text on the published image makes one mistake: it begins with "Photo of". This is not necessary because both screen reading devices and search engines understand when a photo is on the page. Screen readers even announce images, so this would be heard as "Image: Photo of...", which is redundant (and can be annoying when repeated frequently). An alternative would be the example above.
While the caption is fine for a biography detail page (though we recommend including a person's title as well as their name), here it makes the mistake of not relating why this portrait is used in this article. Mark Anderson is heavily featured on this page, but anyone looking at just this image wouldn't know that. This is important because we know our readers like to scan pages and often linger on image captions. To make the connection more obvious, the caption should share that Mark Anderson is TNC's Director of Conservation Science for this region and led the mapping work discussed in the surrounding paragraphs.
Alt text: Map of the Cumberland Forest Project area showing 253,000 new acres of protected forest in Kentucky, Virginia & Tennessee.
Caption: Conserved Areas of The Cumberland Forest Project: The Nature Conservancy is managing 253,000 more acres of forest across Kentucky, Tennessee & Virginia through the innovative Cumberland Forest Project.
The alt text on the published image is empty. This should not be the case because this map is important for visualizing the extent of this protected area, and those with visual disabilities should have the same benefit as typical sighted people.
The caption is very similar to the recommended alt text, and does a good job of explaining the significance of the map for all readers. While it may feel redundant to state the name of the project more than once, especially across both the alt text and the caption, these fields are used differently and should not omit crucial information.
This is how this same map would appear on a mobile device. As you can see, the map is far smaller and has less definition. If this page is promoted on social media, email, or text messaging (which was actually the case!), it would be difficult for visitors to properly understand the scope of this map. Always check how your maps and other graphics appear on smaller screens before publishing.
Our websites are responsive, which means everything is shown to all visitors regardless of device. Some elements, such as images, are resized or otherwise altered to fit different screens. Alt text and captions are the same on mobile.
This is again that same map, only this time in black and white instead of color. This is to show how the map might appear to someone with a visual disability such as color blindness or who uses browser settings to display images without certain colors.
When publishing maps or any image that uses color as a way to distinguish areas and other information, be sure that it's still possible to understand the image without that color. Here, we can see the Cumberland Forest Project area is a far darker gray than the surrounding shades. But if you have many colors with shades of gray that are close to one another it can be very difficult if not impossible to distinguish areas. This is especially true on a mobile device, which has a smaller area.
Alt text: Report titled, Financing Nature: Closing the Global Biodiversity Financing Gap.
Caption: n/a
The alt text on the published page for this report was originally "Photo of trees and waterfall with title of report". There are a few issues with this:
- It starts with "Photo of", which is redundant for both screen reading devices and search engines.
- It describes the visual of the image, not what's actually important about the image (which is that it's the PDF report thumbnail).
- It fails to include the title of the report, and instead references only "title of report".
- The alt text doesn't end with a period, causing screen reading devices to run on into the next readable sentence.
Alt text: Infographic: Ecosystems benefits of aquaculture. Illustration of how shellfish & seaweed farming help ecosystem recovery.
Caption: Benefits of Aquaculture: Shellfish and seaweed farming, when done right, can help ecosystems recover by mitigating pollution, provide habitats, support fish populations, and reduce local climate change impacts.
It might feel redundant to reiterate so much of the text in the infographic in the caption and surrounding text, but this is very important for anyone who has difficulty viewing or understanding the graphic. Those who can't see the infographic still deserve to know what it says. Plus, this helps our graphics in search engine results.
Also, remember to check how infographics look on mobile devices. Horizontal infographics with lots of text may look fine on desktop (where you're editing the page), but if this page is going to be shared on social media, email, text message, or any other channel where your audience is most likely to be viewing on a phone, it will not have the same impact. Whenever possible, design infographics to be vertical so that when they're resized in our responsive website design they are just as handy as on a large screen.
This image is impossible to read on mobile devices and other small screens. The text is far too small, the image is low resolution, and it appears as though four separate charts are grouped in one image. This screenshot illustrates other issue, as well. First, the caption title (in bold text) and description (regular text) are written together. However, screen reading devices and search engines understand these two fields differently. Caption titles and descriptions should be written separately. Second, the bottom of the image is cut off on the published page. This means that even if a person wanted to go the extra mile to view this image and zoom in, they would not be able to see the entire contents.
This would have been much better for all readers if each graph was uploaded separately. They're already vertical, which is ideal for mobile screens.
