E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 4 (In chronological order)

From: Itzel McClaren (US - IFS)
Date: Fri, Oct 04 2019 8:43AM
Subject: Squarespace accessibility
No previous message | Next message →

Hello everyone, does anyone have experience making squarespace pages
accessible. Are there any tips/resources/words of wisdom you can provide?
We have to use Squarespace.

Thanks

--
*Itzel McClaren*
PwC | Manager
Austin | +1 (512) 450 4012
PricewaterhouseCoopers LLP
pwc.com <https://www.pwc.com>

The information transmitted, including any attachments, is intended only for the person or entity to which it is addressed and may contain confidential and/or privileged material. Any review, retransmission, dissemination or other use of, or taking of any action in reliance upon, this information by persons or entities other than the intended recipient is prohibited, and all liability arising therefrom is disclaimed. If you received this in error, please contact the sender and delete the material from any computer. PricewaterhouseCoopers LLP is a Delaware limited liability partnership. This communication may come from PricewaterhouseCoopers LLP or one of its subsidiaries.

From: James Harrington
Date: Fri, Oct 04 2019 9:12AM
Subject: Re: Squarespace accessibility
← Previous message | Next message →

Hello Itzel,

My name is James Harrington and am the Lead Accessibility Officer at
OMNICOMMANDER.

We work exclusively in Squarespace and more importantly, making content
accessible. If you would like to learn more information, please send an
email or give me a call!

Thanks,

On Fri, Oct 4, 2019 at 9:43 AM Itzel McClaren (US - IFS) <
= EMAIL ADDRESS REMOVED = > wrote:

> Hello everyone, does anyone have experience making squarespace pages
> accessible. Are there any tips/resources/words of wisdom you can provide?
> We have to use Squarespace.
>
> Thanks
>
> --
> *Itzel McClaren*
> PwC | Manager
> Austin | +1 (512) 450 4012
> PricewaterhouseCoopers LLP
> pwc.com <https://www.pwc.com>
>
> > The information transmitted, including any attachments, is intended only
> for the person or entity to which it is addressed and may contain
> confidential and/or privileged material. Any review, retransmission,
> dissemination or other use of, or taking of any action in reliance upon,
> this information by persons or entities other than the intended recipient
> is prohibited, and all liability arising therefrom is disclaimed. If you
> received this in error, please contact the sender and delete the material
> from any computer. PricewaterhouseCoopers LLP is a Delaware limited
> liability partnership. This communication may come from
> PricewaterhouseCoopers LLP or one of its subsidiaries.
> > > > >
--
Thanks,

*Are you concerned about ADA? Check out our latest video
<https://www.omnicommander.com/ada-compliance/>*

James Harrington
Lead Compliance Officer
omnicommander.com <http://www.omnicommander.com/>;
OMNICOMMANDER
Cell: 850.305.4116
Office: 1-800-807-3109 x109

From: Lynch, Sarah
Date: Fri, Oct 04 2019 12:11PM
Subject: Re: Squarespace accessibility
← Previous message | Next message →

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

From: Itzel McClaren (US - IFS)
Date: Fri, Oct 04 2019 12:16PM
Subject: Re: Squarespace accessibility
← Previous message | No next message

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