Accessibility Alt Text for Background Images

What You'll Create

Section background images that include proper alt text descriptions for screen readers. This invisible but critical addition makes your decorative and contextual background images accessible to visitors using assistive technology.

The Problem It Solves

Squarespace doesn't provide a way to add alt text to section background images—they're treated as purely decorative. For sites needing ADA compliance or wanting to be inclusive to all visitors, this creates an accessibility gap that can affect both users and legal requirements.

Perfect For

ADA compliance updates, Accessibility audits, Government and education sites, E-commerce accessibility, Portfolio accessibility improvements

What Makes This Different

This technique programmatically adds descriptive text that screen readers can announce when a visitor navigates to a section with a background image. You define what each background image represents, and the code ensures that information is available to assistive technology. It's an invisible improvement that makes a meaningful difference for visitors who rely on screen readers.

Details

• Section Type: Fluid & Classic

• Code Type: JavaScript

• Prerequisites: Sections with background images, Custom alt text values defined in code

• Toolkit Title: Add Alt Text to Background Images

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support