USWDS-Site - Feature: Add guidance for using video/media in projects

[amyleadem]

Summary

Currently the site does not provide any guidance for using video or images in projects.

Here are a few examples of what we could include in our guidance:

• Document usa-embed-container
  • USWDS offers a .usa-embed-container class that is useful for embedding videos (See the monthly calls page for an use case example), but we do not offer any guidance on it in our site.
• Elevate docs for add-aspect utilities
  • USWDS offers add-aspect utiltities that can help with setting the aspect ratio on media, but information on that is a bit buried in the height and width utilities page.
• Guide users to next-gen image formats
  • There are new next-gen image formats like webp and AVIF that could help improve performance by reducing image file size. Related issue: #1665
• Add accessibility guidance
  • We could point to the image and multimedia accessibility guidance from 18F, or possibly write our own.

Next steps

1. We should assess if we want this information documented on our site.
2. If we want to include any or all of these items, we should decide where it should live in our information architecture.

[finekatie]

Hi @amyleadem , if we don't currently have any guidance at all for video or image use, it makes general sense to me that we should. These questions came up for me:

• Have users been asking for it regularly?
  • Specifics, or just general guidance?
• Are you/we seeing instances within sites that use USWDS where guidance would have improved the video/media experience?

If our colleagues already have a11y guidance that we think covers it, we might just crosslink. That keeps things consistent in terms of message and information. I'd defer to Amy C on that, of course.

Look forward to discussing further. @sarah-sch what do you think?

[amycole501]

18F offers multimedia advice but it could be more robust with tutorials, links to WCAG criteria, etc.

Digital.gov resources: 508 Accessible Videos—Why (and How) to Make Them 508 Accessible Videos – How to Make Audio Descriptions 508 Accessible Videos – How to Caption Videos 508 Accessible Videos – Use a 508-Compliant Video Player Making Multimedia Section 508 Compliant and Accessible

Full list of resources are here on Section 508's website

Our goal for our site would be to provide context in how to implement videos into pages. For example, how and where to add a video embed or where and how to add text transcripts. It'd be good to share examples within templates and designs for people to follow especially when sizing video embeds for mobile.