Create content style guide article for alt text

[laflannery]

Description

In an effort to educate editors and provide them with resources to create better alt text for images added to the CMS, a dedicated page for alt text will be added to the content style guide.

Acceptance Criteria

• [x] Create article content for alt text recommendations and guidance
• [x] Send to Sitewide Content team for review and approval

[laflannery]

This is just the phase one article, very basic for what editors have access to and are able to do in the CMS now. I will add to this in the future as functionality changes. Link to article

[laflannery]

I checked in with Danielle and this is on her list to review this week

[DanielleThierryUSDSVA]

Hi, @laflannery! Thanks so much for this. Quick note that we can't use Google docs on gov computers. I grabbed the content quickly from another computer and am pasting it here so we can work in the ticket. For future, we can also work in a Word doc or in a shared doc on the VA network.

The guidance is great! Here's revised content with my edits. And here's a brief description of my edits:

• VA.gov content style guide and plain language edits
• Edits to provide more context or clarity in some places
• Added subheads to break the content into the smallest chunks possible for scanning and cognition
• Brought the reason we must provide quality alt text images on VA.gov up higher to provide that context and grounding up front and strengthened the language a little there for emphasis
• Broadened the description of who alt text is for. Added that it also helps people who turn off images on their device because they have low internet bandwidth, as these folks are also an important audience who we serve.
• Made the tips numbers rather than bullets and put "5 tips" in the header for cognitive ease and to make it clear to people using screen readers how many tips to expect
• Shifted all of the tips to the positive rather than a mix of positive/negative for consistency

One more thought: We often provide "like this"/"not like that" examples in our style guide entries. Could you create 1 that demonstrate each of these 5 points? I think that would really help people understand what we're telling them to do here. We can add these in as an iteration so no rush on this.

Thanks again for drafting this guidance. Let me know if you have any questions/concerns on the edits. And then we can get this into the style guide!

Alternative text for images

What alternative text is

Alternative text (also called "alt text") is a written substitute for a visual image on a screen. Alt text provides the content and purpose of the image to people who can't perceive the visual image.

Why we must provide quality alt text

We must provide relevant and meaningful alt text for images on VA.gov. This helps us make sure that everyone gets the same information—no matter how they interact with our site.

For example:

• People who are blind or have low vision can listen to the alt text description of an image on their screen reader.
• People who've turned off images on their device because they have low internet bandwidth can read the alt text description instead.

How to create quality alt text

Follow these 5 tips to create relevant and meaningful alt text:

1. Provide the same meaningful information the image provides. Use clear, descriptive text to describe what the person needs to know from the image. Be sure to consider the context of the image within the surrounding page content as well.
2. Be concise. Use as few words as possible to tell the person what they need to know. Aim for no more than 150 characters. Concise content allows people to focus on the most important information.
3. Avoid duplicate page content. Only include unique information that's not also in page content near the image. Repeating information can cause frustration or confusion.
4. Skip phrases like "image of", "photo of", or "graphic of." Screen readers already announce that each image is a graphic. So you don't need to add this context.
5. Leave the image file name out of your alt text. File names don't provide useful information and can cause frustration or confusion.

[laflannery]

Thank you @DanielleThierryUSDSVA! These all make sense to me, I appreciate you making all these edits. I do have some questions so I sent a meeting for Wednesday (9/28)

[EWashb]

@laflannery will this stretch into next sprint?

[laflannery]

@EWashb - Yes, if we want to expand this to include publishing the article, we will need to continue into this sprint.

[EWashb]

@laflannery since we arent the ones that have to do the publishing, I think our part on this one is done. I'll close this out and we can open another ticket if need be

[laflannery]

@DanielleThierryUSDSVA below is a note for decorative images:

Some images, if they are used as decorative images, would not require alt text. An image is considered decorative if it:

• does not provide important context to the page, and
• is not used as a link to direct users to additional information

Let me know if you feel more information is needed here. I will also work on the like/not like examples

[DanielleThierryUSDSVA]

Thank you so much, @laflannery! I'll incorporate this into the entry and will let you know when this is live. And then just let me know how the examples feel like they're working as you go with those. Great working with you on this!

[laflannery]

@DanielleThierryUSDSVA I have some Like this/not this examples for you. A few possible options....

There are a couple points that I still had a really hard time creating an example for because it really is so dependent on the page content, I just couldn't wrap my head around what an example would like like without context. That being said here's what I came up with:

Option 1: Individual examples:

I do not have examples for meaningful information or duplicate page content.

Be Concise

Like this An aerial view of the medical center campus. The main building is on the left and the remaining buildings spread out on the right.

Men from the Saluting Branches organization, wearing hard hats and reflective vests, are standing in a park and holding a banner welcoming volunteers.

Not this An aerial view of the medical center taken by a drone from the south. From this angle building one is clearly visible while many more buildings are partially visible behind the cover of green trees and vegetation on the 140 acre campus.

The Saluting Branches Volunteers pose for a photo at the Fort Harrison VA Medical Center in 2021. The volunteers not only pruned and trimmed trees on campus, they also provided education on the health of the campus' trees. (MTVAHCS photo by Katie Beall.)

Skip phrases like "image of", "photo of", or "graphic of”

Like this A man sits next to a woman in an office reception area.

A group of people walking down a neighborhood street.

Not this Photo of a man sitting next to a woman in an office reception area.

This is an image of a group of people walking down a neighborhood street.

Leave the image file name out of your alt text

Like this A Mobile Vet Center is parked in front of a building.

Aerial View of Birmingham VA Medical Center.

Not this MVC

BVAMC-6-3

Option 2: Combined examples :

I combined the points into more general guidance for the examples. In this way, without a 1:1 match up, it wouldn't look as odd if some points don't have a corresponding example. This pattern of combing guidelines into examples seems to be used on the links page and the bullets page so that was my basis for this option

Like this

Provide detailed information, and be concise An aerial view of the medical center campus. The main building is on the left and the remaining buildings spread out on the right.

Men from the Saluting Branches organization, wearing hard hats and reflective vests, are standing in a park and holding a banner welcoming volunteers.

Not this

Avoid unnecessary, duplicate content An aerial view of the medical center taken by a drone from the south. From this angle building one is clearly visible while many more buildings are partially visible behind the cover of green trees and vegetation on the 140 acre campus.

The Saluting Branches Volunteers pose for a photo at the Fort Harrison VA Medical Center in 2021. The volunteers not only pruned and trimmed trees on campus, they also provided education on the health of the campus' trees. (MTVAHCS photo by Katie Beall.)

Like this

Provide meaningful information A group of people walking down a neighborhood street.

Aerial View of Birmingham VA Medical Center.

Not this

Avoid file names and redundant phrases This is an image of a group of people walking down a neighborhood street.

BVAMC-6-3

Let me know what you think - if you think these are on the right track but need more work feel free to give me your thoughts and send it back to me for more work!