Over 1 billion people worldwide have a disability. So if your website is not accessible, you're not providing an inclusive experience.
It's important when designing a website that we design for every limitation, whether a disability is permanent, temporary or situational, we want to account for all visitors.
More and more countries around the world are creating laws to require that websites are accessible. So when you create and update your website, you'll want to make an effort to create it website with accessibility in mind.
The Main Categories of Disabilities are:
Visual
Auditory
Motor Limitations
Cognitive Disability
Luckily, Wix has templates that are already accessibility ready, and the features they offer support accessibility. This being said, Wix does not guarantee that your website will be compliant (every region has different laws on accessibility, and it can depend on the website you're using).
If you want to make sure you're legally compliant, hire a professional accessibility advisor who understands your local laws.
Start by choosing your template (you can also build from scratch, which is what we do unless a client requests something different)
Setting up Navigation and Pages
Make sure your site language is set to the language you'll be using for your website
Create the pages you plan to have for your website
Finally, add a blank page that you'll call Accessibility Statement & hide it from your main menu (you'll want to add this to your footer menu
Setup your page titles within your SEO settings for the corresponding page
This is important for SEO & accessibility
To make sure you're following AA standards, it's important to have at least 2 forms of navigation (your main menu, and either a footer menu, or a search bar). When you link text, make it indicates that it is a hyperlink (by underlining the text, and you can also change the color).
Making Form Fields Accessible
Use a permanent field title (instead of placeholder text)
Submission message is best to be set to always (in case someone misses the response message, this will help avoid confusion on if the completed form went through or not)
Color Theme Accessibility
In addition to your colors being important to the design of your website, they are also important for accessibility.
Number colors from 1 - 25 Colors that are important are 1, 4, 5 and 8.
1 = background
4 = extra accent color
5 = main text color
8 = action color
Colors 4, 5 & 8 need to have a minimum 4.5:1 color contrast with the background color #1. To check this, you can use the WebAIM color contrast checker.
Text Theme Accessibility
When setting up the text for your website, it's good to keep in mind that Sans Serif fonts are better for your paragraph text. This is because Sans Serif fonts are easier to read.
It's also recommended to not go any lower than 16 pixels for main text, and for footer text, 14 pixels is as low as you'll want to go.
Making Your Content and Heading Tags Accessible
HTML tags can be added to your page to tell both people and machines what's on your page and the priority of that content.
A lot of people who use screen readers can then navigate your website by using headings. This is similar to how sighted users might skim through a website for relevant content.
Your blog titles and paragraphs will automatically be set to the correct heading tags, so you don't have to worry about those.
Blockquotes are used for a quote within your content that you want to be differentiated from your other copy.
How to Write Content that is Inclusive
People aren't defined by their disabilities, and in a world that can be chaotic, it's important to remember to be kind.
Here are a few tips on how to write content that is inclusive:
Keep sentences around 15 words (a little over or under is okay, but try to avoid run on sentences)
Hyphens can confuse screen readers and sighted visitors
Acronyms should be also explained in parenthesis incase someone doesn't know what that acronym means
When including a hyperlink in your text, the action should be highlighted (underlined and different color), so a visitor knows where the link will take them
Don't justify your text. It doesn't look good and it's hard to read
The Importance of Alt Text
Alt text should be used to communicate the purpose you meant the image to serve. Explain the meaning of the image. You don't have to necessarily describe everything in the image, but it's important to communicate the meaning behind it.
From the image settings, you'll see "What's in the image, tell Google." This where you'll want to enter in your alt text for that image.
If there's text in the image, you'll want to quote that image in your alt text.
When using a decorative image, leave your alt text blank, and Wix will tell screen readers and Google that they can ignore it.
If you have an informative image, for example, a phone icon next to a phone number, you will want to include alt text that communicates the meaning behind it.
Functional & Complex Alt Text
A visitor should know what to expect before they click on something. Functional images (an image that does something when you interact with it), you'll want to make sure you communicate the meaning and what it does.
The screen reader will tell a visitor that it's a link, so you don't have to include this, but it's important they know where it goes.
Complex images, like a graph, it would be difficult to describe everything with alt text. Instead, focus on communicating what the graph is about and what the data is sharing. You can also make an accessible data sheet (like an excel sheet) so a visitor could learn more and interact with the data.
Alt Text Tips
Keep your alt text below 100 words
Use simple words
Don't keyword stuff (include keywords just for the sake of including the keyword) It won't help and it's frustrating for visitors using screen readers
Remember the purpose of the image and convey the meaning behind it
Making Alternative Media Accessible
Provide transcripts podcasts and captions for video
Livestreams can have auto generated captions added
Stay away from auto play, it's annoying to pretty much all visitors
Animations & parallax (use these sparingly) because a visitor could turn on reduce motion, but this could cause issues with the media being accessible
Pinning & Zooming
According to WACAG, Users need to have the ability to zoom in up to 200% without any loss of functionality in order for the website to be considered accessible.
Pinned elements can end up overlapping content when a visitor zooms in, so this is something you'll want to test for to see if your pinned element causes usability issues.
Creating an Accessibility Statement
Accessibility Statements are important because they show your visitors that you care about making your website accessible to all visitors.
It can also be:
a legal requirement
a good place to share any known limitations about your website
a place to include contact info incase someone is having trouble accessing their site, they know who to reach out to
Wix Accessibility Wizard
After you have created your website with accessibility in mind, Wix has an accessibility wizard that will audit your website, and then gives you actionable steps to update.
The next step is to find and fix any issues that the audit has found. Some might be a quick fix, and others might require a manual fix to correct.
Zoomed content is something you'll want to test yourself to make sure it can zoom up to 200%.
Do a final scan to make sure your changes have been registered and nothing was broken in the process, and you're all set!
Mobile Site Accessibility
The wizard will help you address most issues within the desktop view, but there's a few specific things to look out for on mobile:
Extra spaces
Content overstuffing
DOM order (this can get rearranged from desktop to mobile, so make sure your objects are in the correct order)
Advanced Accessibility Recommendations
Enable skip to main content (this allows a visitor to tab through the website's elements)
Only if you know what you're doing: Ability to turn off automatic DOM (Document Object Model) - you'll have to manually reorder strips every time you make an update
Accessibility Dev Tools - turning the toggle switch on will give you advanced features for custom elements
Accessibility overlay toolbars can be a nice addition to a website to help a visitor enlarge text or have the site read back text, but it's not needed if your website is accessible. It also isn't going to make your inaccessible website accessible.
