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, however, 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 actually opens you up to legal risk. Read this article about Shopify website owners getting sued.

You’re probably 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 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

As this ThirdandGrove article states, there are key areas where your site is likely breaking the rules. (All of these are also shown in my own UX and Accessibility article.) Although the article is specifically directed at Shopify sites, these faults apply to all platforms:

  1. You use color as the only means to convey a functionality on the site, without a backup visual like text. This means colorblind people will struggle.
  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 lack closed captions or don’t have transcripts linked.
  4. You don’t have 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.
wordpress-icon

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. From what I can tell, WordPress theme designers have been making their themes translation-ready since at least 2011. So really, what excuse can you have for not making it a normal part of your design and your website?

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 website.

shopify-icon

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 in for a nasty surprise. Come back for my article next week my article on how to make your website multilingual.

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 here: https://support.squarespace.com/hc/en-us/articles/215129127

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.

how to turn on accessibility features for wix websites

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 here, 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.

Leave A Comment

Your email address will not be published. Required fields are marked *