Website Accessibility - How to make your Wix Website ADA Compliant
With internet technology being mainstream, making your fully accessible is more important than ever. Complying with web accessibility standards is a legal requirement, but public and private organizations also consider it a social responsibility.
What is ADA Compliance?
The Department of Justice (DOJ) published the Americans with Disabilities Act (ADA) Standards for Accessible Design in September 2010. These standards state that all electronic and information technology must be accessible to people with disabilities.
Who needs to follow the website accessibility requirements?
The ADA standards apply to commercial and public entities that have “places of public accommodation”, which includes the Internet.
Your website needs to be ADA-compliant if your answer is "yes" to any of the questions below:
Are you a government, state, or local agency?
Does your business benefit the public?
Are you a private employer with 15 or more employees?
Why is ADA important for your website?
ADA compliance is important to avoid a lawsuit or government action, but as a business, you also want consumers to easily access what you offer. The ultimate goal of the ADA is to offer an equal experience to all people and to take away any difficulty for those with disabilities.
Because the ADA does not directly define web accessibility and its scope, web designers refer to the Web Content Accessibility Guidelines (WCAG). This is a set of international standards that provides specific recommendations on how to make websites accessible.
The WCAG 2.1 guidelines are the latest guidelines that are used to determine if your website is accessible and ADA compliant and which level of conformance it meets. According to these guidelines, website content must be:
Perceivable
Operable
Understandable
Robust
Checklist on how to make your Wix website accessible?
We have created a checklist to help you better understand what each success criterion of the WCAG is asking for. Many details and exceptions have been left out of this checklist. Our checklist is NOT official WCAG documentation.
This checklist is best used as a starting point for diving into each item in the official documentation. This checklist DOES NOT include WCAG 2.1 or AAA conformance level.
The checklist headings are not from WCAG but are being used to divide and organize the content.
Website Presentation
Descriptive text: Clear, descriptive text is used for page titles, headings, and link anchor text. This text must accurately convey the page or content that follows.
Nested Headings: For each page, headings start with one <h1> tag and optionally then flow down to <h2>, <h3>, and so on down to <h6> based on the hierarchy of subheadings within the page content. See Preparing Your Site Structure in Wix.
Color alone does not convey meaning: Color cannot be the only means used to convey information or instructions. If a color is used, an alternative must be provided (e.g. a colored button with text).
Clear forms: Forms must have coded labels for fields, clear instructions on fields and how to fix errors, clear error indications, and example formats (e.g. 10/12/1980). See Customizing the Design of Your Form in Wix.
Uniform labels: All images and elements (e.g. icons, frames, fields) that are identical should have identical labels and alt tags sitewide.
Clean code: The website is free of error pages, broken links, and HTML errors.
Website Appearance
Zoom text: Text must be able to be increased by up to 200% without negatively affecting the readability of a website.*
Color contrast ratio: All text must have a color contrast ratio of 4.5:1 against its background. See Preparing Your Text and Graphics in Wix.*
Distinctive links: Text links inside a body of text (not inside the header or footer navigation menus) must stand out from normal text through at least two of the following markups: underline, bold, italics, and color.*
Consistent layout and navigation: A consistent layout framework and header and footer navigation must be maintained throughout the website. Different layouts within a website are permitted (e.g. products page vs. information page) but respective pages within those layouts must be consistent (e.g. product A page has the same layout as product B page).
40×40 px minimum clickable area for touch controls: Provide enough space for buttons and other clickable areas.
Content Alternatives
Descriptive alt text: All meaningful images on a website must have alt text. Any images, charts, infographics, etc. that require over 30 words of description have a descriptive caption beneath them and alt text that identifies the image and refers to the caption. See Preparing Your Images and Galleries in Wix.
No images of text: No images of text are permitted when actual text can readily be substituted. Exceptions: logos, branding, graph labels.
Text transcripts: All audio and video files must be accompanied by a text transcript directly below the file. Text transcripts must accurately convey the full meaning conveyed in the audio or video. See Making Videos and Audio Accessible in Wix.
Closed captioning: All videos with meaningful sound contain accurate, synced closed captioning. See Making Videos and Audio Accessible in Wix.
Table data: If a table contains a large amount of data such that it would be difficult to understand when reading aloud, either 1) an alternative version of the table is provided that breaks up the table into manageable columns and/or rows or 2) a caption is provided that accurately conveys the data. Both methods may be used.
Extraneous documents: All documents such as PDFs, PowerPoint presentations, Excel files, Microsoft Word documents, etc. meet basic accessibility requirements. See Making Document Files Accessible in Wix.
User Control
No automatic pop-ups: Unless for providing instructions or assisting website users (e.g. how to correct an error, time limit warning), no pop-ups are allowed. Pop-ups of commercial intent (e.g. newsletter sign up, discount offer) are not permitted.
No automatic video or audio: Video and/or audio may not play unless a user clicks to play the media. See Reducing Motion in Wix.*
No unexpected changes: No part of a website may change unexpectedly. See Reducing Motion in Wix.*
Pause updating/refreshing content: Any content that automatically updates or refreshes (e.g. sports scores, scrolling news) can be paused by the user. Exception: rotating ads are permitted.*
Adjustable time limits: All but necessary time limits (e.g. auction bids) must provide a warning before time expires and the ability to extend the time limit by up to 8x the original limit before the time limit begins.
Important submissions: For websites that require the submission of critical financial/personal/scheduling information (e.g. credit card number, social security number, reservation date, etc.), users must be provided with an opportunity to review and correct information submitted before finalizing the submission.
Website Usability
Keyboard only: All functions and content of a website must be accessible by keyboard only.*
Focus indicator: A focus indicator box ( an outline around an element) shows all links, buttons, form fields, menu items, and things triggered by hover, like tooltips. The most common browsers (Firefox, Chrome, Internet Explorer and Safari) all have default focus indicators for most elements built into the browser.*
Skip navigation: A method that allows users to skip navigation or other elements that repeat on every page should be provided. This is usually accomplished by providing a "Skip to Main Content," or "Skip Navigation" link at the top of the page which jumps to the main content of the page.
Search function: A search function must be provided for, at a minimum, on the homepage. If placed on additional pages, the search function must remain in the same place. See About Wix Site Search.
Sitemap: A link to a sitemap must be provided, at a minimum, on the homepage.
Language: A default language is set for the website. See Setting Your Site's Language in Wix.
* Provided by Userway, when you have installed their accessibility toolbar on your site.
Install the Userway accessibility toolbar
In addition to complying with the above, we advise making use of the Free widget, the accessibility toolbar provided by USERWAY.
What does Userway do?
With Userway your site visitor can:
navigate with a keyboard instead of using a mouse or pad;
have the page read out loud;
change the contrast of all elements that are on the page;
have links highlighted;
make the text bigger;
increase the text spacing;
stop animations;
change fonts to legible fonts;
increase the cursor size;
show a reader guide;
show tooltips;
show the page structure, i.e. headers, landmarks, and links.
How does the Userway widget look like?
We have installed this widget as well on this website. You can see it in the left bottom corner.
How to install the Userway widget
To install the Userway widget:
Go to www.userway.org, click "Get the Widget" and follow all required steps and copy the code snippet to your clipboard.
Once you have your code, open wix.com, select your site to go to the Wix Dashboard.
Select Settings and scroll down in the Settings Overview then select Manage Analytics.
This will open Tracking Tools & Analytics. Select + New Tool and then select </> Custom.
Copy the code from your clipboard to Paste the code snippet here, give your code a Name, select All - Load code once for Add Code to Pages, and select Body -start for Place Code in, and then click Apply.
The Userway widget will now be on your live site.
You can change the widget's colors and other settings by opening the widget on the live site. Then click Manage and enter your email and password. You can now change all the settings of the widget, see below.
For those that don't have a Wix website, Userway does have installation instructions as well for:
Accessible web design does not only lead to better experiences among users with disabilities but also among those who do not have disabilities or limitations. Many accessibility requirements improve user experience, particularly in limiting situations.
Note:
It is your responsibility as a website owner to ensure that your website complies with your local laws. Any information contained herein is not legal advice and you should not rely upon it as such. The American Disabilities Act (ADA) is a complex regulation and requires multiple actions from website owners. We recommend that you seek legal advice to understand and prepare for possible additional requirements stated in this regulation.
Do you need any help with accessibility compliance, or would you like us to design a beautiful, functional, and relevant Wix website for you? Contact WixCreate, we will create an online presence that works for you.
