2.19 Provide Suitable Alternatives to Web Assets

Media, images, fonts, and documents enrich the Internet. The problem is that people may not want to watch a video, listen to an audio file, look at an image, or use a specific application. By providing alternative formats to anything you embed, you ensure the widest possible audience can benefit from it (and reduced carbon output will occur as the alternative text will induce less consumer hardware thrashing than its rich media alternative).

Criteria

Open Formats: All proprietary file formats (such as PDF) are offered in HTML for accessibility and to ensure future availability.
Font Subsetting: All custom typefaces (using font-display) are subsetted and offered as part of a font stack with a system font as a backup.
Alternative Text: All images provide meaningful alternative text for screen reader users (or when images fail to load) accessibility.
Audio Alternatives: Audio provides text transcripts of conversations as an alternative to playing the media.
Video Alternatives: Video provides text transcripts (at minimum), subtitles (using WebVTT), and for accessibility best practice, offer closed captions and sign language options.

Impact

Medium

Effort

Medium

Benefits

Environmental:
Offering low-impact alternatives to media formats reduces the amount of battery-draining hardware processing required for visitors to find the information they require.
Social Equity:
Not every visitor will be in a situation where they can watch a video or listen to audio; therefore it makes sense to have a plaintext alternative.
Accessibility:
Certain accessibility barriers can prevent media from being consumed, as such it’s important to offer different ways of viewing a site’s content.
Performance:
Reducing the interactivity of a website doesn’t mean a lesser experience, it can help visitors access what they need quicker.
Economic:
Media is costly to produce and host, text is cheap and takes little data to download, it can help reduce your hosting costs to serve a media-free setting within pages.
Conversion:
Text alternatives (like transcripts) to media can be indexed by search engines, this can allow your project to be found easier.

GRI

materials: Medium
energy: Medium
water: Medium
emissions: Medium

Example

Code:

font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;

System Font Stack.

Resources

View the Guideline