Inside this Article
Wix Accessibility Score: How Easy Is It To Get ADA Compliance?
Accessibility Score: 4 / 5
Wix has a good amount of in-built accessibility features, but it’s not perfect. It offers a bunch of responsively-designed templates featuring screen reader optimization and color schemes with compliant color contrast ratios. Some even have dark-mode toggles for users who need additional contrast or are light sensitive. Wix also has an accessibility wizard to detect potential ADA compliance issues. However, Wix is lacking in a lot of other areas. When I tested Wix’s accessible templates, I found they still needed a lot of work to make them fully compliant. I had to turn off parallax scrolling – an effect well known to cause discomfort in some viewers – as this was enabled by default on a template I used for testing. The color contrasts also needed adjustment as they didn’t meet accessibility standards. Wix doesn’t guarantee that you can reach ADA compliance with its accessibility features alone. You’ll need to know how to code – or, at least, how to source custom code elements – to reach full legal compliance, which isn’t ideal for a website builder that markets itself as a coding-free option.Quick Solution to Make Your Wix Website Accessible
While Wix offers accessibility features and guides to help you achieve ADA compliance, getting through the process can be tedious. That’s why I recommend using accessiBe for Wix ADA compliance. It can be tricky to grasp the Web Content Accessibility Guidelines (WCAG) upon which the ADA is based if you don’t have a technical background. accessiBe adheres to the latest version of the WCAG so you won’t need to pore over any technical documentation. Once you’ve installed accessiBe’s accessWidget, it will perform a full inspection of your Wix site for ADA compliance. From there, accessiBe’s AI-powered application will automatically make changes to your website’s code, and you’ll then receive a full report with a list of issues that have been discovered and changed. Every 24 hours, accessWidget will rescan your site and make changes automatically, so you can rest assured that it will remain fully ADA-compliant and that you’ll be safe from any potential lawsuits.Wix Accessibility Tips
Accessibility needs to be considered at every step in the web design process to address the full range of disabilities that can affect the way your site visitors interact with your online content. My colleague wrote a fantastic guide to website accessibility covering everything from ADA compliance to the specifics behind inclusive and accessible design. I’ve been testing out Wix’s accessibility tools to see how close they can get a Wix site to ADA compliance. Here are the best features this website builder has to offer and how to make the most of them.Use the Accessibility Wizard
The Accessibility Wizard is, by far, the most useful tool in Wix’s dashboard for this purpose. This handy feature scans your website for any missing accessibility features and tells you exactly what you need to edit, and how to do it.
To use the Accessibility Wizard, click on Settings in the menu bar, and then click Accessibility Wizard.
The wizard will open in a sidebar next to your site editor. Click Scan Your Site, and within a minute you’ll see a list of suggestions.
When you click on each issue in the sidebar, your site editor will jump to that part of your website. I particularly like that if you click on the question mark icon to the right of each issue, a popup guide appears with a detailed explanation.
Once you’ve clicked through and repaired every issue in this report, you’ll move on to step 2. This is a checklist that covers color use, text in images, media alternatives, and accessibility statements. These issues have to be inspected manually as Wix can’t automatically detect them on your website. Still, I found this to be a useful reference.
Finally, you’ll be asked to scan your site again to make sure you’ve found and fixed every issue.
While you should plan for accessibility compliance from the beginning of the design process, I recommend using the Accessibility Wizard when you’re ready to publish your Wix website. This will allow you to catch any missed alt text, color contrast, or site navigation issues before you go live.
Check Your DOM Ordering
DOM ordering ensures that assistive technologies like screen readers move between website elements in a logical order. This also dictates the “tab order,” or the sequence in which elements are highlighted when a user is navigating with the tab button. This should follow the visual order of website elements which, typically, is left to right and top to bottom.
Of course, this will depend on the language in which your website is written – some languages and layouts may require manual DOM ordering to ensure assistive technologies can read site elements from right to left instead.
Wix uses automatic DOM ordering based on your site layout. This is automatically toggled on. However, this isn’t always accurate, so it’s a good idea to check it’s working correctly.
To check whether your DOM ordering is correct, either visit your website or preview it by clicking Preview in the top right-hand corner of your site editor. Once you’re there, use the tab button to cycle through the DOM order.
Helpfully, this will also allow you to check that your site’s rollovers, dropdowns, and media interface elements are functional and keyboard-accessible!
If you need to edit your site’s DOM ordering, open up the Accessibility Wizard and click the three dots in the top right corner. From there, click Advanced accessibility settings.
Click on Automatic DOM Order to change the settings.
Click the toggle to turn off automatic DOM ordering. This will open a popup asking if you’re sure you want to turn this setting off. Click Turn It Off. This will allow you to make manual changes to your DOM order.
Click Tools in the top right corner of the Wix editor, and select Layers. You can then drag and drop elements in this menu. This won’t change the layout of the elements on your site’s pages, but it will change the order in which assistive technologies read them.
If you have to edit your DOM order manually, remember that any new elements you add later will need to be ordered manually as well.
Disable Scroll Effects
Scroll effects are a popular design trend on tons of Wix templates – even the “accessible” ones. Parallax scrolling, in particular, can have a negative effect on people who suffer from motion sickness, so it’s generally not recommended unless it can somehow be toggled off by your visitors. Which can’t be done in Wix unless you add custom code to give users that option. I recommend not using any of Wix’s scroll effects if you want an accessible website. Some of them are fairly nauseating, even to me – and I only get motion sick in cars. It’s worth checking if you have scroll effects enabled as they aren’t active while you’re in the editor. You’ll have to preview your website or look at the published version to see them working. Alternatively, you can check each strip element in your Wix editor to see what scroll effects are active. This is the only element to which you can apply scroll effects, and you’ll be able to identify them as any full-width rectangles that aren’t your header or footer. Click the strip element to bring up a small menu. Click the scroll effects icon to open another popup menu. Click None to remove any active scroll effects and close the menu. Sure, your site will look a little less fancy, but it’ll be a lot less frustrating for people with certain disabilities to access.Add Alt Text to Images
Users with screen readers rely on alt text to get a sense of what web images look like. Alt text serves to describe the content of an image to the user so they can fully understand its purpose on your website.
Plus, alt text is great for SEO as it gives search engine crawlers more information about your website’s content too. So it’s a win-win!
Wix makes it easy to add alt text to an image or a gallery. Click on the image you want to add alt text to. This brings up a row of icons. Click the cog icon to open the image settings menu.
Scroll down until you see What’s in the image? Tell Google, and add your alt text here. Wix has a handy guide to alt text in its help center if you’re not sure what to write.
Use a Third-Party App
Even though Wix has an adequate suite of accessibility features, it doesn’t guarantee that you’ll be able to reach full ADA compliance. So, you’ll want to consider a third-party app that extends Wix’s functionality.
For this, I recommend accessWidget, accessiBe’s AI-powered Wix add-on. It automatically scans your website for accessibility issues every 24 hours and fixes them, including those that can only be fixed with custom code.
Plus, given that WCAG guidelines are constantly being revised and updated, accessWidget consistently uses the most up-to-date version, saving you a ton of time otherwise spent trawling through those documents yourself.
On top of the fantastic Wix app, accessiBe offers website accessibility audits, media accessibility, and user testing, making it an all-in-one solution for digital inclusivity.
Short on time?
Take this one-minute quiz to learn which website builders are best for your project.