Being that one in four adults in the U.S. have a disability, it’s essential that you create a website that accommodates users with a variety of different needs.
“We need to make things accessible so that we’re not excluding anyone from using our products or services,” Reginé Gilbert, who (quite literally) wrote the book on inclusive digital design, said in an interview with Wix. “You’re opening your business to more business when you make it more accessible.”
In the blog below, we’ll cover strategies for creating a more accessible online experience so that no matter what your line of business is, you know how to make a website that’s inclusive to all.
What is web accessibility?
Web accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities, situational disabilities and socioeconomic restrictions on bandwidth and speed.
Web accessibility is important because it ensures that everyone has equal access to the information and services that are available online. People with disabilities may use a variety of assistive technologies to access the web, such as screen readers, text magnifiers and voice recognition software. Web accessibility also benefits people with situational disabilities, such as people who are using a mobile device in a noisy environment or people who have a temporary injury, and people who have limited bandwidth or are using a slow internet connection.
16 ways to make your website accessible
Building a website from scratch is a massive undertaking, so making it accessible might seem daunting. Don’t worry—with these handy tips and the Accessibility Wizard by your side, you'll breeze through the process. Just keep in mind that while the Wizard and this article offer great insights, they don't cover everything about web accessibility. So, if you want to tackle any major issues head-on, it's worth considering hiring an accessibility expert to give your site a thorough check. By combining these resources and seeking professional guidance, you'll create a website that's inclusive, user-friendly and ready to welcome everyone.
01. Skip the accessibility plugin
Accessibility plugins may seem like a quick fix, but about 13% of the websites sued in 2021 had third-party accessibility overlays. Moreover, these plugins tend to create more problems than they solve. In addition to causing performance issues and security risks, they can even introduce new accessibility issues.
“The way to make a site accessible is to build it the right way,” said Wix Head of Accessibility Nir Horesh, whose team assesses every Wix feature and element to ensure that they accommodate users with disabilities. Rather than treating accessibility as an afterthought, it’s important to make sure that your site is built with accessibility in mind from the get-go.
02. Choose fonts that are easy to read
Because font options are limitless, it's tempting to feature elaborate typography on your website. Unfortunately, the more decorative the typeface, the less legible it is to your customers. People with dyslexia, learning disabilities, aphasia and poor vision will have an easier time reading a clear font.
Featuring more than two fonts on a page will, moverover, make your page look chaotic and slow down reading speed. Although you can upload external fonts to the Wix Editor, standard fonts are the easiest to read. Tahoma, Verdana and Museo are very reliable options.
Individuals with visual impairments may also struggle to read italics, all caps and other styling methods. Instead of over-relying on these font styles, use a larger size or a second font to format headings.
03. Consider how design complexity could impact user experience
“When the internet started, it was only text and links. It was 100% accessible,” said Horesh. “The more complexity we added, the more accessibility issues we created.”
For example, while flashy graphics, features and effects are fun, they introduce new accessibility issues. That doesn’t mean you have to revert to the basic website features; it just requires you to design thoughtfully from the start.
Ask yourself whether a feature could hinder a customer’s ability to navigate your site. If you think it might, consider either removing it or adjusting it to accommodate different needs. For example, moving elements could potentially cause motion sickness, trigger epileptic seizures or distract people with ADHD.
If you’re determined to include dynamic content, it’s imperative to provide options for user control. This can be accomplished by adding a pause button or setting the content to automatically stop after a few seconds. Granting users the ability to pause, stop or adjust the timing of dynamic content allows them to engage with your website at their own pace and ensures a more inclusive experience for all.
04. Choose a high-contrast color scheme
Creating an attractive color scheme is branding 101, but how you infuse it into a website can affect its usability. Customers with limited vision and color blindness often struggle to read text that is too similar in color to that of the background. A high-contrast dynamic is key. Because low-contrast text is the most common accessibility issue, it’s an important one to pay attention to.
The WCAG requires a contrast ratio of at least 4.5:1 for text, with a few exceptions. Because larger and thicker fonts are easier to read, the ratio threshold for 18-point text and 14-point bold text is lower at 3:1. Decorative text and logotypes are exempt.
Wix’s Accessibility Wizard checks for color issues, but it’s best to plan ahead, e.g., you can use the WebAIM contrast checker to assess your color scheme. Unfortunately, too sharp of a contrast can create issues for people with dyslexia; pure black text against a pure white background can create a swirling and blurring effect. To keep things simple, opt for an off-white background with dark gray text, and apply your brand colors elsewhere.
05. Add alternative text to every image
Because screen readers can’t interpret visuals, customers who are blind or have limited vision need text-based descriptions so that they don’t lose any context. When you add alternative text (often referred to as alt text) to an image’s settings, the Wix Editor incorporates it into the coding of the webpage so that the screen reader can describe the image to the viewer. As a bonus, Google’s algorithm takes that text into account when determining a site’s ranking on relevant search result pages.
Writing alt text isn’t a straightforward process. In order to be helpful to the user, the alt text must be accurate, concise and relevant to the context of the image placement. It shouldn’t be longer than 125 characters or include the phrase “image of,” but it should have proper punctuation and include any relevant text that appears in the image. Images that only offer aesthetic value don’t need alt text, so mark the image as decorative in the Wizard.
06. Provide transcripts or closed captions for files with audio
To ensure that customers with hearing impairments won’t miss out on any relevant information, provide transcripts for audio files and closed captions for videos. Note that many of today’s consumers actually prefer to watch things with closed captions, and some even turn off the sound when viewing audio or videos on the go. In fact, studies find closed captions increase views, watch time and comprehension. As with alt text, transcripts and closed captions can also support your SEO efforts.
07. Make your website keyboard-accessible
Because my arthritis makes scrolling difficult, I prefer to use keyboard controls to navigate the web. Some people with disabilities can only use keyboard navigation, so all elements of a website must be keyboard-accessible. To this end, you’ll want to incorporate visual indicators that highlight a keyboard user’s position on a webpage.
Note: Wix equips all of its websites with these features, which you can toggle on and off using the Accessibility Wizard. Learn more about making your Wix website accessible.
08. Opt for on-page content rather than PDFs
While it may be tempting to upload a beautifully designed PDF onto your website, it's important to consider the accessibility and SEO implications of doing so. Browsing a PDF on a device can be awkward for the average user and presents challenges for individuals with vision impairments who rely on screen readers.
To ensure inclusivity and improve user experience, create accessible digital content instead of relying solely on PDFs. Alternatively, you can provide a link to a PDF version of your content for those who prefer to read or print out the information, ensuring you cater to different preferences.
09. Keep the text short and sweet
Describing your company’s unique offerings with fancy language shuts out people with learning disabilities. Plus, people often skim online information, so using simple language can prevent misunderstandings.
Use easy words, simple sentences and short paragraphs so that people with a middle school reading level (in compliance with WCAG guidelines) can understand the information. Copyediting software, such as Hemingway Editor or ProWritingAid, can help determine the reading level of your writing and suggest changes to make it simpler.
10. Organize your site for easy navigation
Giving each page a clear structure enables people who use keyboard navigation or screen readers to scan your content. Doing so makes reading more comfortable for people with dyslexia, ADD or memory disabilities, too. To create a well-structured website, your content needs distinct sections, descriptive headings and effective coding.
The Wix Editor will do all the coding for you, as long as you’re using the appropriate text themes. When you write a heading, format the text with the theme that corresponds with its relevance on the page. For example, we set the title of this section, “Organize your site for easy navigation,” as Heading 3 because it is a subsection of “How to make a website accessible,” which we set as Heading 2.
Headings should be succinct enough that they’re scannable, but descriptive enough so that customers can rely on them to find information. You’ll want to treat them as a resource rather than a branding opportunity. So instead of naming a product category section "Cool Digs," opt for a more descriptive label like "Home Decor.” To ensure the effectiveness of your headings, create an outline of your site and map out the customer journey. If you can’t easily find your way down the different paths, you need to return to the drawing board.
11. Offer multiple means of communication
Whereas people with a vision impairment are usually more comfortable speaking over the phone, those with a hearing impairment may have an easier time communicating through email, chat, forms or social media messaging. With this in mind, offer multiple ways for customers to reach out to your business. Use tools like the Wix Inbox to provide efficient customer service and manage all of your communications under one roof.
12. Add an accessibility statement to your site
To express your commitment to customers with disabilities, write an accessibility statement on your website. Explain that you intend to address any issues they experience while browsing your website or visiting your physical location. Transparency is key; acknowledge any issues you’re aware of but haven’t yet been able to resolve. You can use this accessibility statement generator to help with the wording.
13. Use templates
One of the easiest ways to make your professional website accessible is to use a template that follows WCAG best practices. Wix’s designers collaborate with the accessibility team to ensure that its simple website templates are optimized from the start.
14. Optimize forms for disabled users
Forms play a crucial role in gathering user information, facilitating interactions and enabling transactions on your site. When optimizing your website for accessibility, it’s important to check that any forms are designed in a way that accommodates disabled users. By implementing a few key strategies, you can create forms that are inclusive and user-friendly for individuals with disabilities:
Concise labeling: Provide clear and descriptive labels for each form field. Labels should be associated with their respective input fields using proper markup to enable screen readers and assistive technologies to read them aloud accurately.
Instructions: Include clear and concise instructions to guide users through the form-filling process. Ensure that error messages are presented in a visible and understandable manner, clearly indicating the specific fields that require correction. Use color contrast and icons to enhance visibility.
Keyboard accessibility: Check that form fields and interactive elements can be accessed and operated using a keyboard alone. This is vital for users who rely on keyboard navigation instead of a mouse or other pointing devices. Allow users to navigate through form fields using the "Tab" key and provide visual focus indicators to highlight the active element.
Field validation: Implement validation checks to ensure that users provide valid and properly formatted input. Offer suggestions or autocomplete options whenever possible to assist users and reduce the risk of errors. Clearly communicate any format requirements or constraints to users upfront.
Responsive design: Optimize your forms for different devices and screen sizes. Ensure that form elements are appropriately sized and positioned to avoid overlapping or cut-off content, especially on smaller screens or when using zoom functionalities.
Note: Wix Forms meet all of these accessibility best practices, so you don’t need to worry about learning how to implement them yourself.
15. Ask visitors how you can improve
According to Reginé Gilbert, the best thing a business owner can do for customers with disabilities is to ask them what they need. Consider using the Wix form builder to add a feedback form underneath to make getting in touch as easy as possible.
“The beauty of the web is that you can change things,” Gilbert said. “We’re going to make mistakes and we’re going to learn and we’re going to do better.”
16. Use a content management system that supports accessibility
Not all CMSs are created equal when it comes to accessibility. In addition to standard features like keyboard navigation and screen-reader compatibility, Wix’s Accessibility Wizard helps you identify and fix things that may cause accessibility issues.
Other CMSs that offer good accessibility features include WordPress, Drupal, Joomla and Plone. By using a CMS that supports accessibility, you can not only expand your potential audience but also improve your website's search engine ranking.
Important note about compliance:
At Wix, we are committed to ensuring everyone, regardless of ability, can use our products and services. We are continually working on improving them, in line with accessibility standards.
Wix.com cannot guarantee or ensure that the use of our services is compliant with all accessibility laws and worldwide regulations.
You are responsible for reviewing and complying with local legislation applicable to you or to your site visitors.
Why is it website accessibility important?
Setting up an accessible site isn’t just the right thing for your business and your customers; if you fail to do so, you risk getting sued.
Case in point: In Robles v. Domino’s, it was ruled that Domino’s website violated the Americans with Disabilities Act (ADA). The plaintiff, a visually impaired man named Guillermo Robles, sued the company because he couldn’t order a pizza with his screen reader. Since the case began in 2016, web accessibility lawsuits have increased by 40%.
To better serve all of your customers and avoid such legal trouble, your website must adhere to the Web Content Accessibility Guidelines (WCAG). Fortunately, Wix designs every feature according to these guidelines, ensuring compliance from the start. Wix’s Accessibility Wizard flags accessibility issues on your site, plus provides guidelines for preventing other issues.
What are the four principles of web accessibility?
The four principles of web accessibility are defined by the WCAG, which provides a set of guidelines and standards for creating accessible web content. The four principles include:
Perceivable: Information and user interface components must be presented in a way that can be perceived by all users. This includes providing text alternatives for non-text content (such as images), ensuring content can be presented in different ways (such as through audio or braille) and making sure the content is easy to see and hear.
Operable: The user interface and navigation of a website should be operable by all users, including those with disabilities. This involves making all functionality available through keyboard access, providing ample time for users to interact with content and avoiding content that may cause seizures or other adverse reactions.
Understandable: Web content and its operation should be clear and understandable to all users. This includes using plain language and avoiding jargon or complex terminology, providing clear instructions and error messages and organizing content in a logical and consistent manner.
Robust: Websites should be developed using robust technologies that can be interpreted reliably by a wide range of user agents, including assistive technologies. This principle encourages the use of web standards and guidelines to ensure compatibility across different platforms and technologies.
How to check your web accessibility
There are a number of ways to check your site's web accessibility. Here are a few tips:
Use an automated accessibility checker. There are a number of automated accessibility checkers available online. These tools can scan your website for common accessibility issues and provide you with a report. Some popular automated accessibility checkers include:
WAVE Web Accessibility Evaluation Tool
A11Y checker
SiteImprove Accessibility Checker
Wix’s Accessibility Wizard also helps you identify and fix things that may cause accessibility issues.
Use a screen reader. A screen reader is a software program that reads aloud the text on a computer screen. This can be helpful for identifying accessibility issues that are not detected by automated checkers. To use a screen reader, you can install a free program such as NVDA or JAWS.
Have your site tested by a person with a disability. The best way to ensure that your site is accessible is to have it tested by a person with a disability. This will help you to identify any accessibility issues that may not be detected by automated checkers or screen readers.
Here are some additional tips for checking your site's web accessibility:
Check your site's code. Make sure that your site's code is valid and that it follows the Web Content Accessibility Guidelines (WCAG).
Use semantic HTML. Semantic HTML is a way of using HTML to convey the meaning of your content. This can help screen readers to understand the structure of your page and to read the content aloud in a meaningful way.
Provide alternative text for images. Alternative text is a text description of an image. This is important for people who are using screen readers, as it allows them to understand what the image is about.
Use a high-contrast color scheme. A high-contrast color scheme can make your site easier to read for people with low vision.
Make sure your site is keyboard navigable. People with mobility impairments may not be able to use a mouse. Make sure that your site can be navigated using only the keyboard.
How to make your website accessible checklist
Here are some of the main factors to consider when creating and designing an accessible website. This is by no means an exhaustive list but a place to start:
Image alt text, should be descriptive
Color contrast
Easy navigation
Headings in order
Video captions
Descriptive URLs
Content structure
Accessible PDFs
Font choice
Markup of tables
Labelled forms
Regular accessibility audits