SEO: How to Fix Squarespace’s Accessibility Issues
Squarespace’s templates and website building tools offer a large amount of customization, and are by default user-friendly for both the creator and the website visitor. A common issue encountered with templates using Version 7.0, is that the menu buttons used for the mobile responsive version of sites are not considered compliant with Google’s Web Accessibility metrics.
While running an audit on my site, I noticed jolsonweddings.com had an accessibility score of 92 out of 100, with the only issue being the mobile buttons did not have an accessible name for use with assistive technology, like a screen reader. Fixing this issue brought my score up to a perfect 100.
Accessibility and SEO metrics go hand in hand, so by improving your score, you’re not only making your site more user-friendly, you’re also affecting how search engines view your site in a positive way.
Before changing any HTML, my site scored 92 out of 100
To begin, we will be using Google Chrome’s open-source development tool, Lighthouse. This tool can detect issues with your site through an automatic site audit. I like to use it as a Chrome Browser Extension for ease of use.
Link to Lighthouse Chrome Extension
The Lighthouse can also be accessed using Google Chrome’s built-in Chrome DevTools, and can be found under the Audits tab.
Once installed, open your website in a tab, and click the extension, then “Generate report”.
Check to see if your website has failing elements, if “.Mobile-bar-menu” or “.Mobile-overlay-close” come up as failed, you’ll need to inject some HTML code into the footer of your site.
Open your Squarespace site in a new tab, then add the code below to Settings > Advanced > Code Injection > Footer:
<script>
// accessibility mobile button script
window.Squarespace.onInitialize(Y, function(){
document.querySelector(".Mobile-bar-menu").setAttribute('aria-label', 'Open mobile menu');
document.querySelector(".Mobile-overlay-close").setAttribute('aria-label', 'Close mobile menu');
});
</script>If need be, you can modify the the querySelector to target other elements that may need an Aria-label. You can also modify the Aria-labels hidden screen reader text by changing “Open mobile menu” and “Close mobile menu”.
Note: Install the code at the very bottom of your HTML if you have other code currently in use. Be sure to save as well.
Now, run another Lighthouse report. If you’ve placed your code right, then you should see your accessibility score improve.
A perfect score!
One last thing, Google’s Lighthouse is an automated tool, so some accessibility metrics may need to be manually checked, such as having a logical tab order or creating user-friendly site navigation that does not accidentally trap or confuse a user accessing the page.
One thing I recommend doing is creating a custom 404 page. The 404 page used on this site includes image links to my primary wedding photography galleries. If on the odd chance that a visitor finds themselves at a dead end or dead link on my site, the linked image blocks can guide them back to the websites primary content. I’ve also corrected the default 404 text to be my companies slogan.
My site’s custom 404 landing page.
That’s all for now, thank you for reading, and if you have any questions, or comments on my code, feel free to reach out using my contact form.
*You may see your Performance metric change when running a lighthouse report after installing this code, this isn’t because of the new HTML script you’ve added to your site, the Performance metric specifically looks at load times, and may not always return the same result as values are estimated and may vary. Every time you run the report, you will get a slightly different number for Performance.
**Jolsonweddings.com is run through Squarespace, and at time of writing (February 2020) the version of Squarespace is Version 7.0.