Skip to Main Content
Sustainable Web Design Logo
  • Home
  • Guidelines
  • Emissions
  • Ratings
  • Contact

◂ UX Design guidelines

2.19 Provide Suitable Alternatives to Web Assets

UX Design

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

  • A New Way To Reduce Font Loading Impact: CSS Font Descriptors
  • Alternative Text
  • Creating font subsets
  • CSS Font Stack (Web-Safe)
  • Digital Eco-Design: Downloadable documents
  • Digital Eco-Design: Fonts
  • Digital Eco-Design: Video and sound
  • Fast Load Times: Optimize WebFonts
  • [GPFEDS] 3.1 – Architecture (Impact Reduction) (PDF)
  • [GPFEDS] 4.6 – UX and UI (Informational Media) (PDF)
  • [GPFEDS] 4.7 – UX and UI (Media Choices) (PDF)
  • [GPFEDS] 4.12 – UX and UI (Impact Flags) (PDF)
  • [GPFEDS] 5.5 – Content (Video Alternative) (PDF)
  • [GR491] 2-4012 – Image Alternatives
  • [GR491] 3-4034 – Audio Alternatives
  • [GR491] 9-5064 – Image Text Replacement
  • Making a positive change: PDF to HTML
  • prefers-reduced-data
  • The Carbon Impact of Web Standards (PDF)
  • The performance cost of custom web fonts, and how to solve it
  • Tips for creating a transcript file
  • United Nations [SDGS] Goal 1 (Poverty)
  • Video Captions
  • W3C Web Accessibility Initiative: Transcripts
  • Web Almanac: Sustainability
  • Web Font Performance – How Your Fonts Affect Page Speed
  • Web Video Text Tracks Format (WebVTT)
  • Web fonts: when you need them, when you don’t
  • WebVTT: The Web Video Text Tracks Format

View the Guideline

Tags

Social EquityAccessibilityCompatibilityPerformanceUIUsabilityContentAssetsHTML

Share

More ux design guidelines

2.1 Undertake Systemic Impacts Mapping

UX Design

2.2 Assess and Research Visitor Needs

UX Design

2.3 Research Non-Visitor’s Needs

UX Design

Learn about W3C’s Sustainable Web Interest Group:

A global community advancing sustainability on the web.

Explore the group

This site is brought to you by

Mightybytes Wholegrain Digital
Website Carbon

This page loaded in 0.25 seconds and emitted just 0.5g of CO2

Visit Website Carbon
Ecograder

How green is your website?

Visit Ecograder
© Copyright Sustainable Web Design 2025. Privacy Policy.