The Accessible Squarespace Website
Jonar Sabilano
Ready to take your Squarespace website to the next level of accessible web design with inclusive user experience (UX)?
Implementing universal web accessibility principles is always vital for inclusivity of all website visitors and eCommerce buyers. Website owners should integrate clear language in an organized website layout and structure with inclusive text formats and color contrast. But instead of focusing on general web accessibility principles, this blog post zooms in on specific guidelines, tips, and best practices that will help Squarespace website owners take accessible web design and development to new heights.
In this blog post we’ll take a head-on, deep dive into some of the unique Squarespace website design and development options prioritizing and fostering inclusivity. Researching the Squarespace help center, we discovered some of the exclusive Squarespace website design and development features, functions, and elements driving digital accessibility. By implementing them, Squarespace websites can engage and broaden their audience, increase traffic with improved SEO ranking, all while unlocking revenue potential with more sales.
Learn how you can create accessible web page layout with the primary Squarespace website builder, Fluid Engine. Discover how to integrate inclusive video, GIFs, and images, while engaging and selling to users of all abilities on any device with a responsive, mobile-friendly Squarespace website. Find out why keyboard navigation and inclusive website navigation play a key role in reaching every possible website user of your accessible Squarespace website.
Squarespace even prioritized accessibility of website owners, designers, and developers with options that can be implemented with keyboard shortcuts.
Lastly, but certainly not least, online shopping has become a default option for buyers of diverse needs and lifestyles. We’ll share some of the key accessible web design and development options that Squarespace offers to drive more and better sales, with inclusivity at the heart of the online shopping experience.
UI & page layout: inclusive Squarespace website design
Driving web inclusivity with a clean, clear, fluid user interface (UI) layout is foundational to creating an inclusive website for people with visual and cognitive disabilities. But these fundamental principles for inclusive web design also support people with lower level computer skills, along with screen size and functionality of various mobile devices.
For an accessible, readable, usable and more easily navigable Squarespace website, create a logical, simple structure to navigation menus. All buttons, links, and anything with URLs should be formatted to be identifiable and compatible with assistive technology like screen readers. Squarespace makes it pretty straightforward for website owners to do all of the above. Plus, they’re help center article on overall inclusive design shares that including page footers and portfolio sub-pages is good practice for site navigation, along with SEO hygiene and ranking.
Editing content using Fluid Engine – navigable & accessible
Fluid Engine is the main Squarespace content editor supported on version 7.1 sites, making it easier to edit everything from page types, portfolio sub-pages, footers, and block sections. The grid within which design elements can be added, edited, and combined using the Squarespace primary website creator is composed of blocks. Below we look at some Squarespace website design tips and best practices using and positioning blocks to provide a barrier-free and enhanced UX for all website visitors.
Accessibility tips powered by Fluid Engine, the Squarespace website builder
- Avoid block overlap: ensure blocks don’t overlap so content is universally accessible, visible, readable, and usable.
- Clear functionality & usability of block elements: consider the potential interactions between various block elements. A good practice would be to avoid positioning a button block directly on top of a form block. This way website visitors can clearly identify which button should be clicked to submit a form. Positioning the button directly underneath or to the side of the form aligns with inclusive design principles and intuitive UX.
Fit or fill blocks: a Squarespace website design option driving inclusive design
Fluid Engine, the primary Squarespace website creator, allows users to arrange and choose the padding in between image blocks and button blocks, with the option to fit or fill a block.
How do the Squarespace website design “block fit” or “block fill” options work?
- Blocks that fill the image or button will do just that: take up the entire block space, to the very borders of the image or button. This means these blocks could have no space between adjacent ones. Provided the outcome isn’t a cluttered UI layout and design, this can be an effective technique for creating a collage or narrative with multiple images side by side, or aligned vertically.
Always consider what each block is intended to relay and the action it’s meant to drive. Based on the content of a block, make sure there’s sufficient spacing around blocks and between them so content is easily readable, understandable, and universally accessible.
- Setting a block to fit will provide additional space around the image or button. Again, this can be critical for universal usability of your Squarespace website design.
Squarespace website creator tip: you can create and edit your Squarespace website with either Fluid Engine or the classic editor. But many of the most advanced and innovative features for inclusive and engaging web design are exclusively offered with Fluid Engine. See a detailed breakdown of the differences between the two Squarespace website builders and identify which one works best for your needs.
Inclusive visual & audio Squarespace website design & content
Including visual and audio media in your website can enhance and liven up UX. But visual and audio content should be integrated in a way that considers individuals with hearing, visual, cognitive, and other disabilities and impairments for optimal accessibility levels.
Images – alt text that conveys value of pictures
Images can do everything from magnifying the value of your content or product, to breaking up the layout of text to ensure easier navigation. But it’s important to ensure maximal engagement with visuals like pictures or even GIFs. Write clear and direct alt text just how you would describe a picture to a friend in a conversation. Keep it simple, include keywords but avoid keyword stuffing, and your alt text will help all users gain the added value an image can deliver.
To learn more about how to add alt text on your Squarespace site, access their help center article on adding alt text to images.
Best practice: keep alt text to a maximum of 120 characters, and ensure that the key messages images are meant to convey transpire. Website visitors with visual disabilities using assistive technology like screen readers and braille displays can more easily understand the value of images with clear and concise alt text. It allows assistive technologies to scan and relay insights in alt text without interruptions, fueling frictionless UX for greater inclusivity and interactivity.
Want to learn more about how to create well-written, accurate image alt text? Check out this article with a breakdown of alt text best practices and insights.
GIFs – animation & engagement with inclusivity prioritized
Squarespace website design options allow users to include animated GIFs on most pages or sections of them. Keep GIF flashing to a maximum of three times within one second to minimize the possibility of seizures for website visitors with conditions like epilepsy. GIFs can be fun, stylish, and add a touch of life to your website. But, it’s important to consider the implications of including them, and the possible reactions they can trigger for users with motion sensitivities. We’ll look at this in more detail later.
Squarespace website design tip: if you’re using version 7.1, site visitors can adjust device settings to turn off certain animation features, reducing motion. Mac users can do this to animations website owners enable for background image effects or art.
Audio – transcripts for accessible podcasts on your Squarespace website
Website visitors with hearing impairments or those who are deaf should be able to gain value from audio content like podcasts. Including audio transcripts is a great means for inclusion of users with hearing disabilities, and the Squarespace website creator allows website owners to add transcripts as pages that are not linked. Alternatively, you can provide transcripts as downloadable document files, like PDFs.
Individuals using assistive technology like braille displays will be able to access valuable insights of audio content with transcripts. Plus, more content written means increased opportunities for appearing in search engine results. In other words, transcripts help maintain a healthy SEO level and can elevate ranking, traffic, and even sales.
Video can bring your Squarespace website to life
Similarly to audio content, you’ll want to make sure that users with hearing impairments and disabilities can access video content with closed captions of audio. People with learning or cognitive disabilities, along with conditions like ADHD can also benefit from closed captions, allowing them to follow along more easily. This also goes for anyone who simply needs to or wants to mute the sound and prefers reading closed captions.
You can learn how to enable closed captions for YouTube and Video videos you embed on their websites.
Accessibility tip for video on your Squarespace website: keep background videos to a maximum of two per page to minimize motion for users with conditions like epilepsy, vestibular disorders, or any motion sensitivities.
Motion made accessible
Your Squarespace website design can come alive with video and audio content. Elements that move can add a dynamic and attractive effect to the look and feel of your website. But moving and flashing images can also be off putting to anyone with motion sensitivities, like individuals with epilepsy, visual impairments, vestibular disorders or other conditions.
Keep flashing content below general flash and red flash thresholds, both of which can vary. Red flashing content is known to have noticeably more impact than other colors.
Keep your Squarespace website engaging and innovative while still prioritizing accessibility by subtly integrating motion. The parallax effect, for example, is when the speed of motion of background and foreground elements differ. It can create an interesting and attractive visual. But, the parallax effect can also pose challenges for website visitors when they take up a lot of space, are in the background of text, (making it difficult to read), or when appearing several times on a web page.
Accessibility tip for inclusive moving visuals: the Squarespace website creator allows website owners to turn off background image effects. You can also adjust the speed and direction of motion, and image size. Squarespace’s Help Center thoughtfully directs website owners to use the Trace Center’s Photosensitive Epilepsy Analysis Tool to test for seizure risk and flash thresholds.
Accessibility of mobile versions using Fluid Engine
We touched on the powerful features of the Fluid Engine above, the primary Squarespace website builder. Let’s take a closer look at how it can help website owners create inclusive, interactive, responsive online experiences for mobile. Creating a mobile-friendly or responsive website is paramount for users of all abilities on any device with any screen size to gain the full experience your online venue offers.
What are some of the functions the Fluid Engine enables to support inclusivity with responsive design for mobile?
- Simple execution – users can drag and drop blocks in one dashboard to support accessible Squarespace website design for desktop and mobile.
- Mobile design customization – the mobile grid shows identical content to the desktop version. But, users have the option to customize mobile UI by rearranging block layout independently of the desktop version.
The following design elements can be adjusted and customized to ensure your mobile version is accessible with a logical and organized structure:
- Row count – setting the number of rows in the section’s grid is the only style option with distinct mobile vs desktop settings. Choosing the minimum number of rows depends on how many blocks you have in your grid, and the way they’re arranged.
- Spacing (gaps per Squarespace) – allows you to control the spacing between units and blocks for a clean layout with sufficient gaps or spacing, both vertically and horizontally.
- Fill Screen – An ideal option for website designers and developers who want more control over the height and alignment of content. This feature can drive maximal accessibility of mobile sites. You can adjust the spacing and height outside the section grid, with built-in settings offering everything from small to large height, or even custom measurements. The alignment function allows you to move content to the top for padding below that area, center it for padding to ensure sufficient padding below and above, or align content to the bottom for sufficient padding (space) above it.
Importance of keyboard navigation for your Squarespace website
Your Squarespace website should provide equal access to users surfing the web through keyboard navigation. Some users are unable to use a mouse due to visual, cognitive, motoric, or other disabilities. Inclusive Squarespace website design that ensures keyboard accessibility is also important for website visitors with visual disabilities who depend on assistive technology like screen readers.
Built-in focus outline – inclusive links & forms on Squarespace websites
Squarespace websites created on version 7.1 have a built-in focus outline feature that highlights navigation links and form fields.
The focus outline is standard across all sites and pages, and customizing line color or thickness isn’t an option. With the integration of an AI-powered web accessibility widget, website owners can empower online users with visual impairments or conditions like ADHD. The solution can highlight links in a bright color for visual emphasis, so that they’re more easily recognizable and accessible to these users.
Squarespaces’ Focus outline is automatically visible when users press the “Tab” button on their keyboard.
Important note: browser versions should be up to date to ensure the focus outline appears.
- The first time you press the “Tab” button, a “Skip to Content” message appears.
- Press the spacebar to skip the site header and navigation, and go directly to the website’s content. Or, continue pressing “Tab” to navigate to other content.
Keyboard Shortcuts for Squarespace Website Editing
Not only does Squarespace recommend accessibility with keyboard navigation, but they also offer vast ways to manage and edit your website with keyboard shortcuts. Some of the keyboard shortcuts to edit a Square website include:
- Site navigation and search – navigate, search, and find sections of your website to edit, (but for specific products or panels, like Profiles, Email Campaigns, or Scheduling, users must be editing or viewing them directly).
- Navigate panels and specific website content – select elements and adjust.
- Using Fluid Engine, the primary Squarespace editor for site versions 7.1 – select, move, delete, or duplicate blocks and elements of the grid, and much more.
- Formatting text – adjust and format headers, paragraph structure, font format like bold, italics, or align, bullet, or indent content and more.
- Page editing – add products like a blog post, product or other item and must be used directly within the Pages panel. You can also use this function to find a specific block, or resize an image in increments.
- Style changes – find and adjust colors using HTML names and other color code naming formats in the Design panel. Plus, search for adjustable style settings, like padding or navigation in Squarespace 7.0.
- Acuity Scheduling – navigate and adjust scheduling functions. For example, users can view the left menu, and grant website visitors the ability to block off time, schedule new appointments, or open and view a client’s scheduling page.
You can access the specific commands and buttons in Squarespace’s help center article on keyboard shortcuts and tips. Note that the keyboard shortcuts and commands may differ between Mac and Windows users.
Accessibility for SquareSpace eCommerce Sites
Inclusivity of a Squarespace eCommerce website will broaden potential buyer reach. An accessible online shopping experience will help unlock the potential for more and better sales. The Squarespace Help Center breaks down the critical accessibility factors that can foster accessible online shopping experiences, with tips worth tuning into.
Product images – attract buyers with accessible visuals
The Squarespace website builder allows website owners to include product images, with all of the pictures laid out in a grid on your eCommerce website’s store page. Images should be particularly inclusive of individuals with visual impairments to maximize their purchasing power and result in improved sales. With the right sizing, spacing between, and padding around product images, buyers with visual impairments can buy products with greater ease.
Always include alt text, and abide by key principles like highlighting the critical value of products, articulating just what a buyer would see in looking at the picture. If there are words that offer insight on your featured product images, make sure they’re included in image alt text to help ensure optimal screen reader access. The same goes for Including color descriptions that can help an online shopper imagine what a product looks like.
Think of what will trigger potential buyers to click on the cart icon and check out. Outline key selling points in direct, short language.
Accessibility tip to drive sales on your Squarespace eCommerce website: Remember that well-written alt text can also increase site traffic by elevating SEO ranking. With strong image alt text of production descriptions, the online searchability of your products is optimized, increasing opportunities for buyers to reach your site and buy.
Product descriptions – simple language that sells to all users
There couldn’t be a more relevant place online for simple, straightforward, and concise language than a product description on your Squarespace eCommerce website. To gain more website visitors that convert into loyal customers keep product descriptions to the point but attractive, highlighting key values of your offering.
Keep formatting clear, organized, and easy to read, and include keywords and features in bullets for better SEO that drives traffic. Other general guidelines are particularly applicable to product descriptions, like avoiding jargon, complex terms, and acronyms.
Additional product information: small details can make a big difference
There are certain product features eCommerce websites may want to profile and customize. Squarespace website design options in their product editor allows online merchants to add blocks to a product page in the Additional Info section. Sometimes it’s important for buyers to be aware of product details, like product and package dimensions for shipping and delivery.
Some online clothing merchants find that a video of models wearing products can increase sales. Service-based product pages and descriptions might also drive better sales results with “how it works” or customer testimonial videos. If your video includes audio, remember that closed captions can help with buyer inclusion and maximize sales by increasing audience reach.
With international sizing discrepancies, adding a size chart can help a buyer identify what size clothing item they should select. This can boost customer satisfaction levels and reduce returns, refunds, or negative online reviews.
Squarespace accessibility tip for size charts: size charts generated in an image file format can’t be accessed by screen readers. To integrate size charts that are accessible to screen readers, the Squarespace Help Center suggests third-party providers specializing in text-based size charts, like Kiwi Sizing.
Barrier-free checkout: design that delivers sales
A Squarespace website in the eCommerce industry can simplify the buying process by making “add to cart” or “continue shopping” buttons more easily accessible. The Squarespace website builder lets you customize some of the CTA buttons to be more attractive and eye-catching. Hence, CTA buttons that can make or break the online buying process become easier to spot. Buyer interactivity with these crucial elements makes for a faster, easier purchasing process.
While the Squarespace website builder does allow you to adjust the shape, outline thickness, color, and other button features, it is not possible to adjust the size of the shopping cart icon. To make the shopping cart button even more accessible, Squarespace lets you add a border and adjust color contrast.
Are you selling just one show-stopping product? Make the buying process and UX even more seamless and simple with the “enable express checkout” option. Again, Squarespace gives website owners the power to maximize access to the express checkout option with a “purchase” button.
UserWay – An even more accessible Squarespace website
Creating a perceivable, operable, understandable, and robust Squarespace website means implementing gold standards of web accessibility from the WCAG. While a wide range of Squarespace website design options support a seamless, inclusive UX, integrating UserWay’s AI-powered accessibility widget enhances web accessibility even more. With the ability to adapt website UI elements near-instantly, UserWay’s accessibility widget powers a barrier-free UX that’s unmatched.
Ready to create your Squarespace website with a whole new level of digital accessibility?
Talk to a UserWay accessibility expert today.
FAQs
Does Squarespace make good websites?
Website owners can make engaging, dynamic, and attractive websites with the Squarespace website creator. The platform offers a range of exclusive features and options that you can customize to further foster inclusive UX and accessible online experiences. Improve SEO, universal usability and interactivity, and enhance the buying experience of every online user with Squarespace website design elements.
What are some of the inclusive Squarespace website design features supporting digital accessibility?
The Squarespace website builder empowers web developers, designers, and business owners with a user-friendly content management system (CMS). In the Squarespace website grid, drag and drop blocks and integrate critical UI elements. You can also use their keyboard shortcuts and commands to edit and stylize your Squarespace website.
With responsive mobile design options, unique eCommerce functions that maximize sales with inclusion, and the ability to integrate accessible video, audio and animation, Squarespace can be the ideal platform to create a variety of websites.
Can UserWay’s accessibility make my Squarespace website even more inclusive to users with disabilities and of all abilities?
Yes. While Squarespace offers a broad range of essential web accessibility functions and the ability to customize key design elements that drive digital inclusion, UserWay’s accessibility widget will make any website even more accessible.
Share