How to Make Sure Your Website is Accessible

No matter what platform you’re using (WordPress, Shopify, Wix, or something else) there’s really no excuse for not making your website accessible.

There are, in fact, all kinds of reasons to start thinking about web accessibility (or #a11y, if you’re into numeryms). In the US, having a Shopify website that isn’t accessible can actually open you up to legal risk.

What is web accessibility?

Web accessibility is usually considered in terms of visitors with disabilities – whether you can actually see that image or button, or read that text, or click a link without a mouse, etc. But it is really just a more complete and holistic integration of UX, or user experience. This article won’t go into depth, but this is one of my favourite topics so 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, not just for anyone with physical disabilities. And that includes opening up your website experience to an enormous range of abilities, such as vision (colour blindness, shortsightedness, poor to no vision), motor ability (using a mouse vs not able to use a mouse), language, and so much more.

Great, more work. Or is it?

Are you rolling your eyes right now 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 part of what needs to change is that idea that this is “extra”. Instead, think of it as foundational to creating a site experience that is equally valuable for anyone. It’s also, in case you’re not catching my passion about this, your responsibility as a good corporate 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 (not just those with disabilities) to use it is also easier for them to buy from you. And often web accessibility really does make it easier for everyone to use the site and improves engagement.

So what do you do next? Well, there are some options; keep reading.

Key Areas Your Site is Failing at Accessibility

In the article at the top about a sued Shopify website, they identify 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:

  1. 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.
  2. Primary keyboard navigation is not set up for your main navigation elements, which is necessary for blind users to use your site.
  3. Videos – no closed captions or don’t have transcripts linked.
  4. No alt and title information on images, so blind users are unable to understand what an image is.
  5. There are mistakes in your HTML code that make it harder for screen readers (the software that reads websites to blind users) to interpret and read your site.

Accessible WordPress Websites

I’m not gonna lie, WordPress is one of my favourite platforms. Although it started out primarily for bloggers, 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

Use a Shopify theme that is accessible from the start. If you’re designing a theme yourself, then use the web accessibility standards WCAG 2.0 as a guide. This Shopify article on designing with accessibility in mind also gives some guidelines for what to do when using tables and pricing structures that you might find helpful. 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 (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 went on to say: “It’s important to note that some Squarespace elements may not be fully accessible.”  Augh!

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”? However, for the purposes of this article, it turns out Wix, at least, does make accessibility reasonably straightforward.

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, it sounds like 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, and I’m curious to know how well they perform.

At the time of this writing, Weebly doesn’t seem to be as up-front about their accessibility practices as Wix. In fact, all I could really find on their own support pages was a very generic reference to web accessibility with links to web accessibility evaluation tools. From what I could tell browsing through their community forums, there’s been a great deal of pressure this last year to improve, so perhaps they’re getting on the bus, so to speak. 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. Boo, Weebly.

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, but you need to make sure the team member leading the audit is comfortable with the various rules and has 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.

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…??)

If this all seems beyond your time or capacity, or if you skimmed right down to the end because this whole thing just makes you tired, drop me a line and I’m happy to help.