Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
kgrahamsb

Can I modify the dropdown menu code for accessibility?

Question

Hi there,

Our business has been threatened with a lawsuit unless we upgrade our website to W3C standards for ADA compliance. I have managed to make all of the fixes required thus far via my limited coding skills or work arounds. I also downloaded a great (and free!) accessibility widget that seems to offer a lot of nice functionality. However, the dropdown menus in my product pages still can not be read by an e-reader and I can not figure out how or where to add custom code to modify them. I have found the code required but despite having gone into developer mode, I don't see where to inject this code in order to modify the drop downs and make them compliant. Has anyone else done this or can they point me to the right place? Or is this simply not doable on the Squarespace platform? Any thoughts or advice are welcome.

Edited by kgrahamsb
Initial Revision

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 0

Can you tell us a little more about the issue you are experiencing and what you want to be able to do?

For example, when you say "dropdown menu" are you referring to the variant selector on product pages?

Please ensure you include a working link to the page on your site and the steps you’ve taken so far.


World-class Squarespace Developer and Squarespace Circle Leader with a strong reputation on the Squarespace Forum.
I'm trusted by hundreds of Squarespace users worldwide, including designers, freelancers, business owners and big agencies.

I can tackle anything from small tweaks to full websites and I'm available for short and long bookings (min. 1 hour).
Book via my website giving as much notice as possible. Note that I'm usually booked six weeks in advance for jobs longer than an hour.
Prebuilt Squarespace Extensions
Custom Squarespace Extensions: Tell me about the functionality you need

 

Share this post


Link to post
  • 0

Hi Paul2009,

Thank you for requesting clarification. Yes, when I say "dropdown menu" I am referring to the variant selector on the product pages. We have a small retail cheese shop and we sell tickets to our monthly cheese classes as well as 3 gift boxes online. We offer a few variants for each of these items that are presented as a dropdown selection. Unfortunately, the variants can not currently be read by e-reader software so I am looking to modify the code in order to make them readable. Or find another workaround that would allow me to offer the same variants to my customers while still making them accessible to e-readers. Here is a link to one of our pages as an example: https://cestcheese.com/shop/flights-of-fancy-cheese-gift-box

Any advice or direction would be much appreciated!Thank you,Kathryn

Share this post


Link to post
  • 0

No problem. I'm intrigued as to why they don't work. I have not used 'userway' before but I have not experienced difficulties with the way these dropdowns are read by other screenreaders.

Have you contacted userway to ask them why their widget does not read the select control (the dropdown menu) or its label? Also, you mentioned that you were trying to install some custom code so I'm wondering what this is, and who provided it.


World-class Squarespace Developer and Squarespace Circle Leader with a strong reputation on the Squarespace Forum.
I'm trusted by hundreds of Squarespace users worldwide, including designers, freelancers, business owners and big agencies.

I can tackle anything from small tweaks to full websites and I'm available for short and long bookings (min. 1 hour).
Book via my website giving as much notice as possible. Note that I'm usually booked six weeks in advance for jobs longer than an hour.
Prebuilt Squarespace Extensions
Custom Squarespace Extensions: Tell me about the functionality you need

 

Share this post


Link to post
  • 0

Hi Paul,

My sincere apologies for the delayed response on the below. I basically had to drop everything due to a family emergency that took all of my attention the first few weeks of September. In any case, I am just now trying to circle back around on, well, everything. So, to answer your question below, from what I understand no e-readers can read native select dropdowns, but perhaps I’m wrong. Have you had a different experience with this? I just know that the Chrome e-reader can not read the Squarespace dropdowns and I was hopeful that the Userway widget would be able to, but it unfortunately does not as you’ve experienced.

So, the link to the custom code that I found online is here: https://dev.to/emmawedekind/creating-a-custom-accessible-drop-down-3gmo

So I guess at this point I’m wondering, is it even possible to make a change to Squarespace’s template for something like this? And if yes, do you suggest I hire someone to do it or is it as simple as just inserting Emma Wedekind’s custom code into the template?

Any feedback is so appreciated since this is the only hurdle in making our site fully ADA accessible at this point. Although I did just realize that the menu links also do not work with an e-reader but I can fix that myself :).

Anyway, thanks so much!

Kathryn Graham

Share this post


Link to post
  • 0

Hey @kgrahamsb,

Still looking for some help with this? You'll need to add in ARIA labels for the variant selector dropdown to compensate for Squarespace's missing label elements:

image.png.eaeacefc2cc37499e202deb416935f74.png

This is the only solution we've found to work when testing with screen readers. (Userway isn't going to help with this - their widget does absolutely nothing to modify the page's DOM structure.)  If you're interested in getting some help with this, and with identifying other accessibility issues on your site, check our our free audit linked in my signature below.


Is your Squarespace website ADA compliant? Find out with our free accessibility audit.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...