Can I modify the dropdown menu code for accessibility?

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.

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.

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

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.

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

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:

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.

On 11/18/2019 at 10:22 AM, tcp13 said:

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:

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.

Hi @tcp13 I am having the same accessibility issue with my template's drop-down navigation, do you know of/have a walk-through for this that I could follow? 

Hi @Hannah96,

Sure thing - I'd be happy to take a look. Can you comment or DM me a link to your site? If your referencing the visibility of dropdown folders, that's a slightly different issue. We've got some free code snippets for that here: https://squareada.com/resources/how-to-add-a-focus-indicator-to-your-squarespace-website-diy-guide#:~:text=Bonus%3A Fix Dropdown Navigation Visibility

-Tyler