kgrahamsb Posted August 22, 2019 Posted August 22, 2019 (edited) 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 August 22, 2019 by kgrahamsb Initial Revision KMoreno 1
paul2009 Posted August 22, 2019 Posted August 22, 2019 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. Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
kgrahamsb Posted August 22, 2019 Author Posted August 22, 2019 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
paul2009 Posted August 26, 2019 Posted August 26, 2019 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. Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
kgrahamsb Posted September 20, 2019 Author Posted September 20, 2019 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
tcp13 Posted November 18, 2019 Posted November 18, 2019 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. The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile.
Hannah96 Posted January 13, 2022 Posted January 13, 2022 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?
tcp13 Posted January 13, 2022 Posted January 13, 2022 (edited) 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 Edited January 13, 2022 by tcp13 The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment