tcp13

Hey @glidinsk, Still having issues with this? We developed a way to make the native social icon blocks fully accessible using aria-labels instead of alt text. Visually impaired users who rely on a screen reader hear them announced as "twitter," "facebook," etc. instead of the default "button" - that way there's enough context to help them understand the purpose of each link. If you're interested in making your site fully accessible (including zero WAVE errors), I'd encourage you to check out our free accessibility audit. Our team at Square ADA specializes in making Squarespace sites ADA compliant, and we do all the heavy lifting so you don't have to worry about that "HTML literacy" you mentioned 🙂

Hey @SarahHayden, Still having issues with this? The menu icon is actually an anchor element, so unlike an image, you can't add alt text to it. You'll want to use Javascript to add an aria-label value. If you're interested in making your site fully accessible for people using screen readers and other assistive technologies, I'd encourage you to check out our free accessibility audit. Our team at Square ADA specializes in making Squarespace sites ADA compliant, so feel free to reach out if we can be of any help.

Hi @SJSchaidt, You can use CSS to force the style (position, visibility, and opacity depending on the template) by using the :focus-within pseudo-class. This targets the folder and forces it to be visible whenever a child element is focused by the keyboard. For Brine I believe it'd be something like this: .subnav:focus-within div {opacity:1!important;} With an effect like this: Our team implements this kind of custom code all the time within our Squarespace accessibility service. We also add other keyboard accessibility features such as a skip link and re-enabled focus indicator, along with other ADA-compliant features such as custom alt text and high contrast mode. Check out our website if you're interested in a free audit: squareada.com -Tyler

Hey @e2thex and @kika.tuff, Still having headaches with this? Our team offers alt text management as part of our Squarespace accessibility monitoring service. We write appropriate alt text for each image and use custom code to override Squarespace's default alt text values where needed (including null alt values for backgrounds and decorative images). We also have custom solutions to augment Squarespace templates for full WCAG 2.1 AA and ADA compliance. Feel free to send me a DM or check out our website (www.squareada.com) if you're interested. -Tyler

Hi John, Is this the Google Lighthouse accessibility tool that you're using? It appears to be flagging the image overlay, not the image itself: The problem is that the anchor elements are empty. You'd have to retroactively fix this with Javascript by adding in an aria-hidden attribute or adding innerHTML content. Similarly, the mobile navigation menu button can be fixed by adding in an aria-label. These are the kinds of issues my team and I fix often. If you're interested in having us take a look, feel free to DM me or hit us up at squareada.com.

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.