Fix inaccessible images

[SSPJ]

Expected Behavior

While working on #3855, I discovered that some pages need better alt text.

Actual Behavior

In some cases, alt text is empty. Screenreader software will ignore images with empty alt text. In a few cases, alt text is present but is wrong (copy/paste errors). In one memorable case, the alt text is a long random string of characters.

Steps to reproduce the behavior

• Use a screenreader to test what a page reads aloud.

This issue is done when

• All non-decorative images have descriptive alt attributes which describe what information a sighted user would gain from viewing the image
  • This includes images in figures -- if the alt attribute is missing or empty, some screenreaders will not read the figcaption!
  • Avoid using redundant words like "image of", "photo of", "picture of". The screenreader software already tells the user that it is an image.
• All decorative images (images which are not intended to convey a meaning) have an empty alt attribute
  • Best practice for images which perform functions is to describe the function. Example: "Go back" not "Blue arrow pointing to the left". In many such cases, text already exists on the screen to describe the function, so the image is redundant. In that case, use empty alt text.
• (optional) Alt text should be brief and describe only essential information. Shorten long alt attributes and move additional interpretations/explanations into a figcaption where both blind and sighted users will benefit.

[SSPJ]

As an aside, I implemented a few changes on this commit: f0e4726. (Not a full audit/remediation, just a few spots fixed up.) Feel free to use those, if they are helpful.

[nicoleslaw]

Sharing a few updates:

• Given the state of the site migration, I am starting with an audit and writing alt text in a spreadsheet rather than starting a branch or being blocked altogether.
• I reviewed the accessibility guide and @jasnakai shared two excellent how-tos for writing descriptive alt text from the 508 website and Cooper Hewitt. He offered to be a reviewer of the alt text as an accessibility guild lead.
• I will summarize my approach in a later comment and hope we can align on a style for the blog in particular, since the rest of the site changes less frequently.

[nicoleslaw]

I worked through the main site images and am trucking along with the 101 pages of blog archives! Related spreadsheet

[nicoleslaw]

I have about 700 images left to audit. Still working through this each day.

[nicoleslaw]

I'm still trucking away on this but have been juggling other priorities this week. I will be staffed to a project next week, but am comfortable keeping this as a lower-pri task on my plate if that's okay with everyone else.

[nicoleslaw]

@amandacostello @edwintorres I need to hand off this ticket. I was optimistic I would have time to chip away at it but that is proving to be unrealistic. Here's where I am at:

• Most the images are logged in this spreadsheet.
• @beepdotgov pulled the URLs for many of them. The hero images are not listed though, so I've been adding them as I go through archive pages in the blog manually to look at the images.
• I was going in reverse order of recency and got up to page 42 in the blog archives. All of the other pages on the site should be included hopefully.
• I logged related tickets already and mentioned them here.
• We discussed using this audit later to slurp in or copy/paste the alt text after the 18F site migration. I hope this is helpful! Feel free to ping me in Slack if you need more info.

[mel-keene-gsa]

updated spreadsheet with conditional formatting to indicate doneness

green row = done
blue row = current alt text is the same as the proposed alt text

[mel-keene-gsa]

some blog posts have slightly different dates in the URL -- just an fyi to whoever takes this ticket next, it's helpful to find the file by the name of the post, as opposed to the specific date

for example, https://18f.gsa.gov/2021/06/15/improving_the_way_the_u-s-_tax_court_engages_with_the_public/ is /workspaces/18f.gsa.gov/content/posts/2021-06-14-improving_the_way_the_u-s-_tax_court_engages_with_the_public.md

[mel-keene-gsa]

fyi that the above pull request should NOT close the issue, this is an interim pull request of all the alt tags i've fixed so far! still more to go!

[mel-keene-gsa]

i'm making new tickets for follow-on actions -- still more to do on this!

[mel-keene-gsa]

This has been split into a Content Audit ticket and a Front-end Dev ticket

[mel-keene-gsa]

Closing in a "not planned" status (as opposed to "Completed") because tickets #964 and #965 continue this work