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.

Sign up for GitHub

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

Jump to bottom

Add alt text #9527

Closed
Tracked by #9495
atsansone opened this issue Oct 16, 2023 · 0 comments · Fixed by #10391 or #10504
Closed
Tracked by #9495

Add alt text #9527

atsansone opened this issue Oct 16, 2023 · 0 comments · Fixed by #10391 or #10504
Assignees
@parlough
Labels
e2-days Effort: < 5 days p2-medium Necessary but not urgent concern. Resolve when possible. st.triage.ltw Indicates Lead Tech Writer has triaged t.a11y Relates to an accessibility concern

Comments

@atsansone
Copy link
Contributor

atsansone commented Oct 16, 2023 •
edited
Loading

Add alt attribute to all images on the site. This violates WCAG H37.

Refer to the W3C’s alt Decision Tree and Axess Lab’s Ultimate Guide to Alt Texts for guidance.
@atsansone atsansone mentioned this issue Oct 16, 2023
Open
32 tasks
@atsansone atsansone added t.a11y Relates to an accessibility concern st.triage.ltw Indicates Lead Tech Writer has triaged p1-high Major but not urgent concern: Resolve in months. Update each month. e2-days Effort: < 5 days labels Oct 16, 2023
@atsansone atsansone self-assigned this Oct 16, 2023
@atsansone atsansone added p2-medium Necessary but not urgent concern. Resolve when possible. and removed p1-high Major but not urgent concern: Resolve in months. Update each month. labels Apr 3, 2024
@parlough parlough self-assigned this Apr 9, 2024
@parlough parlough mentioned this issue Apr 9, 2024
Merged
@parlough parlough mentioned this issue May 3, 2024
Merged
sfshaza2 pushed a commit that referenced this issue May 3, 2024
@parlough
Add alt text to images missing it (#10504)
a445e33 
Resolves #9527
parlough added a commit that referenced this issue Jun 5, 2024
@parlough
Optimize images as part of production builds (#10391)
551ffcc 
Use 11ty's first-party [image transformation
plugin](https://www.11ty.dev/docs/plugins/image/) to automatically
optimize images, convert them to `png`, `webp`, and `avif`, and then
transform the site HTML to use the [`<picture>`
element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture)
to select the best one for the user. This only runs in production deploy
builds to reduce serving time. Also applies lazy loading and async
decoding to all images, even when serving without optimizations. The
transform also adds a hash of the image, allowing us to expand caching
for images in Firebase hosting.

To account for the transformed HTML structure, some minor HTML and CSS
changes were needed as well.

Overall, this reduces page load time on pages that use images, and
reduces unnecessary downloads that were due to a relatively short cache
time for images. On a page with a few images, I saw lighthouse perf
score increases from 5-15 points.

Closes #6487
Closes #9527 as this plugin
also validates `alt` is always specified
@atsansone atsansone removed their assignment Jun 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@parlough parlough

Labels
e2-days Effort: < 5 days p2-medium Necessary but not urgent concern. Resolve when possible. st.triage.ltw Indicates Lead Tech Writer has triaged t.a11y Relates to an accessibility concern
Projects
None yet
Milestone
No milestone
2 participants
@atsansone @parlough