WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Squarespace accessibility

for

From: Itzel McClaren (US - IFS)
Date: Oct 4, 2019 12:16PM

Sarah! YOu are awesome! I am part of a team that is participating in the AIR
2019 <https://knowbility.org/programs/air/> and our client wants to use
Squarespace, period. We have no experience in Squarespace and many of us
are learning about accessibility as well.

On Fri, Oct 4, 2019 at 1:12 PM Lynch, Sarah < <EMAIL REMOVED> > wrote:

> 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
>
>