Is Your Website Excluding Visitors? Fix It with These Accessibility Tips!
Table of Contents Show
Accessibility is a really important topic to me!
It’s high on my list to make sure that the websites I design are welcoming and can be accessed by everyone, regardless of abilities.
Fun fact - I attended an accessibility conference a few years ago, back when I was a corporate event planner, and learned A TON. I’m grateful for all the resources out there that help us better make our little corners of the world a more welcoming place.
In this post, you'll learn the basics of web accessibility, the legal requirements, and practical tips to make your Squarespace website more inclusive and welcoming of ALL visitors. Whether you're just starting or looking to improve your existing site, this guide will provide you with helpful tips and actionable steps.
Disclaimer: I'm not an expert in web accessibility. This blog post is meant to provide general information and tips based on available resources. For specific advice and to ensure your website fully complies with all accessibility laws and standards, please consult with a professional web accessibility expert.
What is Website Accessibility?
Website accessibility is the practice of designing and developing websites so that people of all abilities can use them.
This includes people with disabilities as well as those with situational restrictions.
That’s basically it in a nutshell.
Accessibility is important because it makes sure that everyone can perceive, understand, navigate, and interact with what they need on the internet. I’d argue that an accessible website is a social responsibility, and bonus – it also improves user experience for all visitors.
Legal Requirements: ADA & WCAG
ADA
The Americans with Disabilities Act (ADA) requires businesses to make their websites accessible to people with disabilities. Non-compliance can lead to legal consequences and fines (more info here on ADA’s website).
WCAG
The Web Content Accessibility Guidelines (WCAG) are the international standards for web accessibility. These guidelines have three levels:
Level A: Basic accessibility.
Level AA: Mid-range accessibility, commonly referenced in regulations.
Level AAA: Highest level of accessibility, very comprehensive, harde to achieve for smaller solo businesses.
Want examples? I got ‘em right here for ya:
Level A: Basic Accessibility
Example: Providing text alternatives (alt text) for images so that screen readers can describe the images to users who are visually impaired.
This is a fundamental requirement to make sure that basic and essential content is accessible to people with disabilities.
Level AA: Mid-Range Accessibility
Example: Making sure that text and background color combinations have a contrast ratio of at least 4.5:1 (e.g., dark text on a light background) to be readable by people with low vision.
This level addresses more common barriers to accessibility and makes the website usable for a larger group of people, including those with moderate disabilities.
Level AAA: Highest Level of Accessibility
Example: Providing sign language interpretation for all pre-recorded audio content in videos.
This level includes the most comprehensive accessibility features, making the content accessible to the widest range of users, but can be challenging to implement fully.
What Does Web Accessibility Mean?
Web accessibility means making your website usable for everyone, regardless of their abilities. This means designing with various abilities in mind and making sure that all content is perceivable, operable, understandable, and robust.
Principles
Perceivable: Website visitors must be able to perceive the information being presented (e.g., text alternatives for images).
Operable: Website visitors must be able to operate the interface (e.g., keyboard accessibility).
Understandable: Information and operation of the interface must be understandable (e.g., clear instructions).
Robust: Content must be robust enough to work with current and future technologies, including assistive technologies.
Who is Web Accessibility For?
Web accessibility benefits and improves the experience for everyone, but is especially important for people with:
Visual Impairments: including blindness, low vision, or color blindness.
Auditory Impairments: including people who are deaf or hard of hearing.
Cognitive Impairments: including people with difficulties in memory, problem-solving, attention, and comprehension.
Motor Impairments: including people who cannot use a mouse or keyboard, or have other physical limitations.
Designing an Accessible Squarespace Website
Color Contrast
Use high-contrast color palettes to ensure readability. WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text.
Use tools like WebAIM’s Contrast Checker or The Color Palette Studio’s free color contrast checker to test your color schemes.
Or do what I did, and buy their Color Palette Builder, an easy, interactive online tool that helps you create semi-custom, ready-to-use accessible color palettes. (Dude. I love everything this duo creates and have purchased everything to date for them. I love ‘em and can’t recommend them enough!)
Alt Text for Images
Add descriptive alt text to images helps screen readers share info to visually impaired visitors.
Example: Instead of skipping over an unknown image, the screen reader might say, for example, ‘Bar chart showing website traffic increasing from 10,000 to 50,000 visits over six months’ or ‘Smiling woman wearing glasses and a blue shirt’.
Keep your alt text short, clear, and descriptive.
Do NOT keyword stuff with SEO keywords.
If the image is decorative, abstract, or a background image, you can use an empty alt attribute (alt="") to make sure screen readers can just skip over them.
In Squarespace, you can add alt text after you upload your image in the edit field.
Captions and Transcripts
Captions and transcripts for videos and audio content help those with hearing impairments and those who prefer reading. (They also improve SEO.)
Keyboard Navigation
Make sure your website can be navigated using a keyboard alone, without a mouse. Read this What is Keyboard Navigation? (Squarespace Website Accessibility Guide) post to learn more.
Clear Content Structure
Use headings and subheadings (H1, H2, H3, H4) to organize your content. This helps screen readers interpret the structure of your page. Use only one H1 per page, since a H1 indicates the title or headline, and use heading levels in order, rather than skipping from a H2 to a H4, for example.
It’s tempting to get visually creative with headings and paragraphs in Squarespace, but that throws screen readers into chaos.
Legible Fonts
Choose fonts that are easy to read and avoid decorative fonts for large text blocks.
Make sure font sizes are large enough to be legible: Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
Note: There’s a trend going around right now of using teeny tiny fonts in designs and on websites. Yes, it looks chic & minimal & vibe-y, but no, it’s not great for accessibility. If you’re considering itty bitty font, I urge you to reconsider and use a larger font instead.
Descriptive Links
Use informative text for hyperlinks. For example “How to Optimize Your Images In Squarespace” instead of “Read More” or “Click Here”.
Benefits of an Accessible Website
Broader Audience Reach
An accessible website reaches a wider audience, including people with different abilities.
Improved SEO
Accessible websites are more likely to rank higher on Google, Bing, etc, searches, which typically improve your SEO results.
Legal Compliance
Compliance with accessibility laws avoids legal issues and potential fines. Obviously a no brainer there!
Just Being Cool 😎
A commitment to accessibility shows that you care and can elevate your brand's reputation. But also, it’s just good to do and you DEFINITELY get brownie points from the universe.
Tools to Test Accessibility
WebAIM’s Contrast Checker: Test color contrast.
WhatFont Chrome Extension: Check font size.
accessWidget by accessiBe: Automated accessibility checks and adjustments.
WAVE (Web Accessibility Evaluation Tool): Evaluate web content.
Color Contrast Checker: Ensure correct color contrast.
Resources
WCAG Guidelines: Detailed guidelines for web accessibility.
W3C’s Stories of Web Users: Personal accounts and insights on web accessibility.
Inclusive Design Principles: Tips for designing with accessibility in mind.
Government Resources: Guides for ADA, Section 508, and AODA compliance.
Hope this blog post helped get ya started in making your website as possible. It’s an ever-changing landscape for sure. This guide is meant to get you started, but I recommend hiring an accessibility specialist if this is an important part of your business or website strategy.
