How to Write Alt Text for Accessibility in Squarespace
Blog Overview: Alt text on Squarespace is like having a friendly guide to explain each piece of your website puzzle. It's short for 'alternative text,' and it's a game-changer for people using screen readers or those with visual impairments. When your website images have alt text, these tools can tell them what's going on, completing the online experience for everyone. So, by adding alt text, we're levelling the playing field, making sure everyone can enjoy your website and what you’re all about. In this post, I'll walk you through the three types of Alt Text and how to rock them on Squarespace.
First Up, What is Alt Text?
Alt Text is a descriptive sentence about an image that screen readers utilize to convey the context of an image on the page. This is critical for those that are depending on Accessibility features to understand what your website and the content is trying to convey.
If your Alt Text sucks, you're:
a) leaving out an entire % of people with visual impairments who rely on screen readers to understand your website.
b) not utilizing a key opportunity for Google to know what your website is about thereby helping you rank higher for your subject matter.
The Three Types of Alt Text
In general, there are 3 types of images on a website and Alt Text is treated differently for each type.
01/ Informational Images
This type of image, icon or illustration generally conveys more details or is closely related to a subject or topic which is nearby a descriptive text.
EG. This may be included to showcase the owner of a yoga studio and next to some descriptive text.
02/Functional Images
This type of image, icon or illustration contains a link to a new page or opens to new information.
EG. This may be an image linking to a new blog post or available service offerings.
03/ Decorative Images
This type of image serves no purpose beyond aesthetics. It contains no link and is often in banners or used in layering.
Note: decorative images should not have alt text added.
EG. This may placed as a background image in a banner with other images or text on top.
So, how do you write good Alt Text?
Consider its purpose and write with that in mind. Insert keywords you want to rank for where applicable, but don't stuff with jargon no one understands. #gross
Best Practices:
Be descriptive and helpful. How would you describe this image to someone who couldn't see it?
Keep the text short, typically twelve words or fewer
Optimize your text for search by incorporating keywords but don’t stuff > Learn more about keywords
Write in real sentences; don't use hyphens to separate words.
You can omit words like "the" and "a," and terms like "photo" or "picture." For example, instead of a picture of a yoga block, use yoga block
EXAMPLE: For the informational image below on my website next to my Custom Design services I wrote:
‘two women planning their business goals and website strategy while sitting casually on a modern sofa’
Note: as soon as you add a link to your image, it turns from informational to functional
If I had a link attached to the Informational image above, rather than on the button below some text, instead of writing ‘two women planning their business goals and website strategy while sitting casually on a modern sofa’, the Alt Text should now convey what action you want the user to take.
So I may instead write, ‘connect to begin your project’.
Where to Write Alt Text Using Squarespace Image Blocks, Auto Layouts, Galleries and Banners
Image Block & Layout Sections: in the alt text field
Gallery Blocks: the Title Field becomes the alt text
Background Image: there isn't one, so rely on your filename (.jpg) to do some heavy lifting for you
To summarize, Alt text on Squarespace is like giving a backstage pass to your visual journey. It's that little extra that makes a big impact. Just as I craft designs with care, alt text extends that care to everyone, ensuring your story reaches all hearts.
With Alt Text, your Squarespace site becomes a stage where everyone gets a front-row seat to your narrative, making inclusivity an integral part of your brand's experience.
Learn more about Alt Text and Accessibility Guidelines at W3C the Web Accessibility Initiative.
