Updated August 19, 2021
WordPress? Shopify? Wix? Something else? No matter what platform you’re using, your website should be accessible.
There are all kinds of reasons to start thinking about web accessibility (or #a11y, if you’re into numeryms). You might be thinking about user experience, or energy sustainability, or even legality. In the US, having a Shopify website that isn’t accessible can actually open you up to legal risk. Regardless of how you landed here, web accessibility is critical to any website.
What is web accessibility?
Web accessibility is often considered in terms of visitors with disabilities. The same is true for physical access to buildings: for example, ramps vs stairs, or doorways wide enough for wheelchairs. Able-bodied folks tend to think of whether you can actually see that image or button, read that text easily, click a link without a mouse, etc. And all of that is definitely important. But true accessibility is really just a more complete and holistic integration of UX, or user experience. (This article won’t go into depth, but as this is one of my favourite topics feel free to check out my other articles about accessibility.)
The key takeaway is that making your website accessible makes it available to MORE VISITORS. We’re not talking about just people with physical disabilities, including vision (colour blindness, shortsightedness, poor to no vision), motor ability (using a mouse vs not able to use a mouse). We’re also talking about language, internationalization, even search engines. So what’s holding you back?
Sounds Like more work. Or is it?
I’m a wicked eye-roller myself. Some of you might be rolling your eyes here at the notion of having to fit in “extra” work like this when you’re already balancing so many tasks… Never mind trying to achieve your ideal work-life balance. But that’s exactly what needs to change: our concept that accessibility is “extra”. Instead, think of it as foundational to creating a site experience that is equally valuable for anyone.
Helping ensure accessibility is your responsibility as a good citizen AND as a web designer or developer.
Having to make an accessible site is not a punishment – it’s a duty and an opportunity. Don’t forget that if your site is easier for everyone to use (not just those with disabilities) then it is also easier for them to buy from you. Ensuring web accessibility makes it easier for everyone to use the site, which improves engagement.
So what do you do next? Well, there are some options; keep reading.
Key Areas Your Site is Failing at Accessibility
The article above about the Shopify website that got sued for not being accessible identified key areas where your site is likely breaking the rules. (All of these are also shown in my own UX and Accessibility article.) These faults, listed in no particular order, apply to all website platforms:
- You use color as the only means to convey a functionality on the site, without a backup like text. This means colorblind people will struggle. Older visitors can also struggle if the contrast is too low.
- Primary keyboard navigation is not set up for your main navigation elements, which is necessary for blind users to use your site.
- Videos – no closed captions or don’t have transcripts linked.
- No alt and title information on images, so blind users are unable to understand what an image is.
- There are mistakes in your HTML code that make it harder for screen readers to interpret and read your site.
Accessible WordPress Websites
I’m not gonna lie, WordPress is one of my favourite platforms. WordPress started out primarily for bloggers, but it has long become integrated to many business and e-commerce websites of all kinds and stripes. The WordPress Accessibility Coding Standards state that “All new or updated code released in WordPress must conform with the WCAG 2.0 guidelines at level AA.” You can read more about it or even get involved yourself helping out or testing code on the Make WordPress Accessible.
Accessible Shopify Sites
Unless you’re an experienced developer, use a Shopify theme that is accessible from the start. If you’re a developer starting from scratch, use the web accessibility standards WCAG 2.0 as a guide. This Shopify article gives some guidelines for what to do when using tables and pricing structures. But be warned, if part of your accessibility goal is to be multilingual, you’re going to need more info: more here.
Accessible Squarespace Sites
Again, choose your themes wisely. Squarespace does offer some guidance as to how to make your sites accessible, and it’s pretty much the same as what I’m telling you in my UX and Accessibility post (alt text, colours, proper use of headings, etc). In an older Squarespace support forum, I did find this answer re accessibility for visually impaired visitors using screen readers:
Squarespace’s templates are structured in a way that enables you to create a site that can be easily read and browsed by assistive software. They use HTML5 role attributes and microformatting to clearly define important elements on the page, such as navigation or header/footer areas, and use CSS in the design of your content, which provides flexibility in how your content is presented to screen readers. Squarespace’s help site has additional strategies for improving your site’s accessibility.
However, it also says: “It’s important to note that some Squarespace elements may not be fully accessible.”
There are some third-party widgets you can use. One article I found dated January 2021 mentions three options: UserWay Accessibility Widget, Squarekicker, and SquareADA. These seem to all offer free trials and paid plans, which is less than ideal if you’re on a budget.
Wix, Weebly, or other “free” drag-and-drop editors
I don’t normally have a lot of very nice things to say about these so-called freebies. Don’t get me wrong, they’re okay. But do you really want your website to just be “okay”? Either way, for the purposes of this article it seems Wix does offer straightforward ways to improve accessibility.
I don’t currently have any websites operating on Wix myself, so I can’t test this personally. But according to this Wix support article, Wix tries to make website accessibility easy to manage, although you still have to hunt it down in your settings. Adding alt text, “turning on” keyboard accessibility and making sure your headers are correct are all shown very clearly in this article. They also offer a few theme templates that are accessible in that link. Again, I haven’t yet tested these templates myself. If you have, I’d love to hear your thoughts.
At the time of this writing, Weebly doesn’t seem to be as up-front about their accessibility practices as Wix. Their own support pages provide only a very generic reference to web accessibility, with links to evaluation tools. As of July 2018, they were advising clients on their Education version to add html code directly to their pages to address the lack of H1 heading labels, which is a pretty crummy workaround for the average non-webperson. Their community forums over the last year or so show some pressure to improve, so hopefully this will soon change.
So what do you do?
Step 1 – Audit.
Assess what the current compliance issues are and what level of effort is necessary to fix them. You might hire an agency to do this, or decide to run it yourself. The team member leading the audit should be comfortable with the various rules, and have proper time to go through each element of compliance.
Evaluation Tools: WebAIM offers their WAVE evaluation tool, which may be a great start for you.
Step 2 – One-time fixes to address all the findings from the audit.
Set aside a good chunk of time and roll up your sleeves, or hire your friendly local web consultant to help you fix this list.
Step 3 – Change up your processes to make sure your website stays compliant.
This doesn’t have to be a big deal – it’s not that different from remembering to optimize your images before you upload them to your site. (You are doing that, right…??)
Does this all seem beyond your time or capacity? Did you skim to the end because this whole thing just makes you tired? Drop me a line and I’m happy to help.