You can improve your site's accessibility to people with disabilities by structuring the design and content in a way that's friendly to screen readers and other assistive software. These steps make it easier for visitors with vision and movement impairments to access your content.
Add alt text to describe your images
Screen readers and braille displays read descriptive alt text, helping visually impaired visitors understand your images. To learn how to add alt text to images, visit Adding alt text to images.
Alt text will only display on your site if images fail to load or a visitor hovers over an image. When writing alt text, a best practice is to briefly describe the image as you would to a friend over the phone.
Search engines also index alt text, so adding this can help your images appear in search results.
Here's some advice for making the most out of your alt text:
- Assistive technologies automatically identify items as images, so you don't need to include “An image of…” or “A picture of…”
- Due to restrictions in the popular JAWS screen reader, alt text should include no more than 125 characters.
- Many braille displays only present up to 40 or 80 characters at a time, so it's best to be concise as possible.
- If the image has a clickthrough URL or any other functional use, describe the function. For example: "A laughing couple. Links to Engagement Photos."
- If accompanying text on the page describes the image, avoid redundancy by using a short alt text description.
- Purely decorative images, like graphics separating content or abstract background images, don't require descriptions.
- For images that require detailed descriptions, like charts, graphs, or complex graphics, include a description of the image nearby in the text of your site. As an alternative, you can add a separate page containing a description of the image, then add a clickthrough URL from the image to that page.
Provide transcripts for audio
You can help visitors with hearing impairments access your audio content, like podcasts, by adding a transcript. To keep your pages organized, use a text link to a Not Linked page containing the transcript.
This text is also indexed by search engines and may help with SEO.
Enable closed captioning for videos
Structure your headings
Headings help users with screen readers navigate your content. Heading 1 designates major sections, while subsections can use Headings 2 and 3. This allows visitors using a screen reader to skip between major sections and quickly find the content that’s most relevant to their interests.
Add a Text Block, then select a heading from the drop-down menu. Using succinct, descriptive language helps visitors better understand that section of content.
Distinguish between colors
You can use text, alt text, and other contextual information to help visitors with color blindness understand content explained through color.
For example, if the chart below was a static image, visitors with color blindness probably wouldn't see which section represents New York. However, since this is a Squarespace Chart Block, we can add section labels on hover so color vision impaired visitors read context about each section of the chart.
For help with designing your site, Color Oracle is a useful tool that simulates how people with common color vision impairments see a page. Note that this is a third-party application that falls out of the scope of Squarespace support.