Hi. I’m Carly, and today I’m going to show you around the Wix Studio Accessibility Wizard.
The Wizard helps make your website accessible and ensures that everyone, regardless of their abilities, can access your content and services.
Making your website accessible is important for a few reasons. First, it shows your site visitors that you’re committed to inclusivity and equality, which can help attract a wider audience.
Second, improving your site accessibility is also likely to improve your SEO, because a lot of the requirements overlap. And lastly, many countries have passed regulations mandating that websites be accessible for all.
When making your site accessible, there are a lot of different factors to consider, such as color contrast, heading structure, alt text and navigation. The accessibility wizard in Wix Studio can help you with all of these things and more.
It allows you to scan your site’s pages for accessibility issues with a single click. It then detects issues, enabling you to address them from within the Wizard.
There are two different tabs in the Wizard: ‘Detected Issues’ and ‘Manual Issues’. Under ‘detected issues,’ we have site-level issues and issues per page. On the site level, I can see that these items are checkmarked in green, so I don’t need to fix anything here.
Next, I have a list of all of my pages. There are some issues flagged on the homepage. In the checklist, you can see exactly what needs to be fixed.
The wizard shows me that there’s an issue with the heading structure. I’ll click on the highlighted heading, and click the edit button to find out what the issue is. Okay, it looks like my homepage is missing an H1.
I’m going to update this first heading to be the H1, because it best introduces site visitors to the topic of the page. Assigning a proper heading structure helps screen readers understand the hierarchy of the page.
In general, if you need further information about any of the flagged issues, you can click on the links in the description to learn more.
Next up, I need to fix the alt text. I’ll click on ‘Get started’ to check which images are missing alt text. When I click on this item, it will take me to the relevant image. For me, this image is decorative–it adds to the vibe of the scene but it doesn't add any context–so I’ll check this box.
The next image features our sale items, so I’ll add an image description here. I’ll go ahead and generate one with AI. Now I’ll hit ‘apply.’ Okay, looks good!
The last issue on the homepage is a color contrast problem. This element doesn’t pass the contrast ratio guideline, which means that it might be difficult to read. I’m going to change the pink to a darker color to improve the contrast ratio. Great, this color meets the guidelines. I’ll click ‘apply’--and there we go.
I’m done with the homepage, but there’s still one more issue to address on the Gift Card page. It’s missing some alt text, but with the AI Alt Text Generator, that’s an easy fix. I’ll generate all the missing text at once from here.
Now that I’ve resolved all of the detected issues, I'm going to move on to the manual tasks. The manual tasks offer additional guidelines for improving your site’s accessibility.
These are issues that can’t be detected automatically by the wizard, so we recommend going over every task and making the appropriate changes.
The list of manual tasks will appear every time you run the Wizard, so you can refer to it as needed.
Remember: if you add any new content or elements to your page, make sure to re-run the wizard to check for potential issues.
The Wizard helps make your site more accessible, but don’t forget it doesn’t guarantee compliance with your region's accessibility laws and regulations. We recommend consulting an accessibility expert to ensure that your site meets the standards for your region.
To learn more about what you can do with Wix Studio, check out the Wix Studio Academy.
