Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SPIKE] Opportunities for Improving Alt Text Training within CMS Alt Text Field #17452

Closed
6 tasks done
Tracked by #17443 ...
srancour opened this issue Mar 7, 2024 · 18 comments
Closed
6 tasks done
Tracked by #17443 ...
Assignees
Labels
CMS Team CMS Product team that manages both editor exp and devops

Comments

@srancour
Copy link
Contributor

srancour commented Mar 7, 2024

User Story or Problem Statement

As the accessibility lead, I need to gain a better understanding on what the current state of the alt text field in the CMS.

Steps for Implementation

  • Audit current state
  • Investigate error logs
  • Produce report detailing findings, next steps, and recommendations

Acceptance Criteria

  • We have a direction to update the alt text field support content from the Accessibility standpoint.
  • All research and recommendations is documented in this ticket.

Team

Please check the team(s) that will do this work.

  • CMS Team
@srancour srancour added Needs refining Issue status CMS Team CMS Product team that manages both editor exp and devops labels Mar 7, 2024
@srancour srancour self-assigned this Mar 7, 2024
@srancour
Copy link
Contributor Author

Interesting Sentry notification from today where the editor is pulling alt text from a caption of the image from another site (Stars and Stripes) to create their alt text instead of using the alt text the site used. Stars and Stripes has the alt text for the image set as "Marine Lance Cpl. Nathanial Fink (left) and Lance Cpl. Garrett Camacho dispose of trash in a burn pit in 2012 in Afghanistan." and has a caption below it that reads "Marine Lance Cpl. Nathanial Fink (left) and Lance Cpl. Garrett Camacho dispose of trash in a burn pit in 2012 in Afghanistan. (Alfred Lopez/U.S. Marine Corps)" which is the alt text that was originally submitted for the image on the VA website.

Chrome with inspect tools open showing the image and link to the article that is on the VA site and the alt-text associated with it This screenshot shows the alt-text that finally got through without error on the VA site.

Chrome with inspect tools open showing image and caption from the Stars and Stripes article along with the alt-text associated with the image This screenshot shows the image and caption that is on the Stars and Stripes article.

@srancour
Copy link
Contributor Author

srancour commented Apr 1, 2024

Editors are putting graphical images with text and then not describing what they actually have in them. An editor posted this news story with this road construction plan which had the alt text of "McLeland Rd access onto main campus" which does not describe the context of the image.

Screenshot of the road construction plan submitted with chrome inspect tools showing the alt text.

The article reads "Great news! The long-desired west roads improvement project starts April 8, 2024 weather permitting.

This project will take several months. Everyone is asked to understand the plan and that detours and some alternate parking plans will be required.

During Phase 1 in April and May, 2024 the inner roadways behind Bldg. 48, 49 and 50, and the east-west road from the 4-way stop to just in front of Bldg. 116 will be closed. Veterans accessing Bldg. 116 will need to enter campus via McLeland Rd. As a reminder, Bldg. 116 may only be entered from the south door. All parking lots will be available but may use temporary access points."

Had the article explained more of the graphic's content this could be enough alt text, but as it currently stands, visual users are getting more from the image than screen reader users can.

@srancour
Copy link
Contributor Author

srancour commented Apr 4, 2024

Editors aren't understanding what a screen reader user will hear with the alt-text. The sentry notification showed the editor tried putting in the information that is shown under the description of the event as the alt-text:

Representatives will be on-site to answer questions about VA Eligibility and Enrollment, PACT Act, Federal and State VA Benefits, Filing Claims, and MyHealtheVet.

For Onsite Enrollment: Bring you DD214 and previous year’s tax statement. Please call (269) 966-5600, ext. 36212 with any questions.

The editor finally submitted the alt-text to be a repeat of the title and the teaser. This will make the screen reader users hear "VA Coffee With Campers" 3 times in a row, which is over redundant. It would have been better to have something like "Flyer for the VA Coffee with Campers event". This alt-text is appropriate because all of the text information found in the image is found below, thus the image is decorative.

Screenshot of the event page with chrome tools open showing the alt-text for the image

@srancour
Copy link
Contributor Author

Related, it seems that editors aren't understanding how their image will be represented on the event pages. Sighted users aren't understanding about events either that screen reader users may have better understanding.

The Wheels and Warriors event at the West Palm Beach VA is a perfect example. The image has alt text that explains the event details shown on the image (Rev up your engines and show off your wheels!
Join us with food trucks, fancy cars, community partners, and more in honor of Veterans.), but the image gets cropped on the actual page that the vets can get to which cuts away all of the details. The only extra details added to the event is the date and time. All fields for the event aren't being used.
Wheels and Warriors event page which includes a title for the page, an image that's cropped to just show the bottom of the title and a car, and the date and time of the event

@gracekretschmer-metrostar gracekretschmer-metrostar changed the title [SPIKE] Alt Text Field - Discovery for Accessibility [SPIKE] Opportunities for Improving Alt Text Training within CMS Alt Text Field Oct 9, 2024
@srancour
Copy link
Contributor Author

srancour commented Oct 14, 2024

Some editors are using portrait to get around the rule of not using “image of”, “photo of”, “graphic of”, or “picture of” like some of the images on the leadership page in Coatesville

@srancour
Copy link
Contributor Author

srancour commented Oct 14, 2024

I wonder if we should just make all staff images used on the leadership and biography pages decorative (i.e. ideally use alt="" or, if not able to, use aria-hidden="true") because both pages have the person's name directly after in context and the image isn't adding additional context or functionality much like the Functional image example on WebAIM's page about Alt text. This could be an opportunity to get rid of useless redundant alt-text on those 2 types of pages. I do suggest leaving the alt-text attached to the images in Drupal in case they are used elsewhere that the alt-text isn't redundant.

Thoughts from the rest of the accessibility specialists:

  • There is more information sighted folks get from photos, so should we include that. Maybe, maybe not.
  • We could educate editors to describe what someone looks like.
  • Brea (mobile team): Middle ground, describe people in customer service roles but not people who aren't on frontline roles.
  • Jaime: Why are they on the page? Answer that.
  • DK: Sounds like it's an education problem. Maybe they shouldn't write alt text, stick to decorative.

@srancour
Copy link
Contributor Author

srancour commented Oct 14, 2024

Some editors are using graphic showing to get around the rule of not using “image of”, “photo of”, “graphic of”, or “picture of” like the image on the Atlanta Veteran observes U.S. Marine Corps Reserve Birthday news story.

@srancour
Copy link
Contributor Author

Some editors are just taking off the file extension so they don't trigger the Alternative text cannot contain file names. error, but leave the rest of the alt-text as the file name like the image on the Navajo Nation Fair Veterans Resource Event

@gracekretschmer-metrostar

Move forward into sprint 22.

@srancour
Copy link
Contributor Author

srancour commented Oct 25, 2024

There exists a js library called Tippy.js that already exists inside of our instance of Drupal. This is what the sitewide team is using for the tooltips that they have in the Vet center pages. The tooltips are causing accessibility errors though as they populate the aria-describedby field only on focus, so we would need to look into either improving the accessibility of Tippy or find another tool. Screenshot of a question mark tooltip with a message showing saying Why can’t I edit this? VHA keeps this content standardized to provide consistent messaging for Vet Center sites nationwide.

The sitewide team is also using links to the KB directly in the text on the edit screen in the section Editing this contentScreenshot of the Editing this content section showing a link to How to edit Vet Center pages (opens in a new tab)

@srancour
Copy link
Contributor Author

Some editors are using graphic showing to get around the rule of not using “image of”, “photo of”, “graphic of”, or “picture of” like the image on the Atlanta Veteran observes U.S. Marine Corps Reserve Birthday news story.

Some editors are also just saying image without saying of. We could put in place a warning to make sure they aren't saying image because of it being redundant for screen readers. We could do this for all versions of "image", "photo", "graphic", "picture", etc. There are instances where using those words would still make sense in alt-text like, as an example, if someone is showing a picture to someone else or is posing with a photo.

I do wonder if we should roll back the error on "image(etc.) of" since it's not really making a difference. If we changed it to a warning instead of an error, we may be able to do a better job at explaining the meaning of when they shouldn't be using those words. We could also potentially add a link to an explanation in the KB in the warning.

@srancour
Copy link
Contributor Author

Something we could potentially do is have a check against the file name of the image and the alt-text submitted, and if the filename and alt-text are the same, except the file extension, we could put an error up. We could also potentially do a warning state if the two are very similar.

@srancour
Copy link
Contributor Author

Something I have noticed in looking through the alt-text, is that there is the same or similar alt-text for very different images. I wonder if we could use this along with checking the name of the image to check if the user wants to replace an old image or upload a new one. This may prompt them to write different alt-text if it's a different image or to catch that the image they need already exists.

@srancour
Copy link
Contributor Author

The link, Learn more about alt text guidelines (opens in a new tab), under the Tips for Alternative text button dropdown goes to How to add or edit alternative text instead of the KB article Alternative text for images page that would make more sense in this context.

@srancour
Copy link
Contributor Author

srancour commented Oct 30, 2024

The description under the Alternative text heading Adding a clear and meaningful description of the image is important for accessibility. can use some work to be more descriptive in case editors don't open the dropdown button.

Something like Describing the image within the context of the page is important for users of screen readers and when the image doesn't load for a veteran. It should describe the extra information someone who can see the image gets from the image and shouldn't repeat any information that's already available elsewhere on the page.

The previous team had found in their research that editors didn't know how to balance descriptiveness and brevity under point 1 of Details of Findings that this can also help with.

@srancour
Copy link
Contributor Author

We should stop editors from being able to add in line breaks because:

  1. The alt-text comes out in a single line with no formatting
  2. Even if a line break existed in the alt-text field, it would give nothing to a screen reader user.

@srancour
Copy link
Contributor Author

We should add a best practice bullet for images with text. Something like: If the image has text in it, the alt-text should include this information unless it it captured somewhere else on the page

@srancour
Copy link
Contributor Author

srancour commented Nov 5, 2024

@srancour srancour closed this as completed Nov 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CMS Team CMS Product team that manages both editor exp and devops
Projects
None yet
Development

No branches or pull requests

2 participants