WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Squarespace accessibility

for

From: Lynch, Sarah
Date: Oct 4, 2019 12:11PM

Hi Itzel,

Without access to Premium features (code injections or the developer platform), making a Squarespace site accessible is not easy.
Here are my notes on making a Squarespace site more accessible:

Mobile Menu
The buttons to open and close the mobile menu do not have an accessible name. I do not know of a workaround for this.

Primary Navigation Menu
The menu is not keyboard accessible when submenu items are added (the submenu items do not appear, but users can tab through the hidden links).
Workaround: Do not use folders (these are used for creating submenu items in the navigation).

Social Icons in the footer
These are not labeled with an accessible name.
Workaround: Create the social icons in Squarespace as usual. Copy that block of code. Add a code block and paste that code. Add aria-label attribute on each social icon.

Search
The search button in the header region does not have an accessible name.
Workaround: Do not use the search in the header. A search can be added to a footer by adding a search block. The search block is a search field and is also not labeled. The same thing can be done as with the social icons above. Copy that block of code for the search block. Add a code block and paste that code. Add an aria-label attribute to the input element.

Adding alt text to images
It is not easy and sometimes not possible to add alt text, but instructions are found here:
https://support.squarespace.com/hc/en-us/articles/206542357-Adding-alt-text-to-images

Forms
Select boxes can't be used. They do not have an associated label (they appear to have a label, but it is not programmatically associated to the field)
Radio buttons can't be used (same reason as above)
Check boxes can't be used (same reason as above)
Also not good form fields: phone, date, time
Plain old text input fields are okay.
Errors are not announced. Fields that are required are not announced.
Workaround: Keep forms short and simple and no required fields (or maybe one). And include the word "required" in the form label.

Focus Indicator
There is no focus indicator.
Workaround: add custom CSS

Calendar
Images inside the calendar do not have alt text. Events with images - the images take on the event title as their alt text. Recommend to not use the calendar layout/view.

Color Contrast
Many of the themes have poor color contrast.
Workaround: add Custom CSS where needed.

_____
Sarah Lynch
Accessibility Engineer
Yale University, Information Technology Services
25 Science Park, 527V | 203-432-2041
accessibility.yale.edu