How To Make Your Website ADA Compliant Using accessiBe
What do Netflix, the Sydney Olympics Games, Domino’s Pizza, Nike, and Amazon have in common? All of them have been the subject of web accessibility lawsuits.
The National Association for the Deaf slapped Netflix with a landmark web accessibility lawsuit back in 2011. In 1999, a man who was blind since birth lodged a case against the Sydney Organizing Committee for the Olympic Games (SOCOG) over the lack of accessibility of the Sydney Olympic Games official website. Such accessibility is required under the Commonwealth Disability Discrimination Act 1992.
The case against Domino’s Pizza in 2017 is regarded as one of the most important web accessibility litigations in American history. Nike faced a lawsuit over a complaint on their website’s lack of accessibility for low-vision persons. Even Amazon was on the receiving end of an accessibility lawsuit because it previously failed to make its website fully compatible with screen reading software.
Failure to comply with accessibility legislation such as ADA Title III, Section 508, EAA/EN301548, and more can lead to lawsuits and hefty fines. Several other laws exist in different countries that compel website owners to provide accessibility for people with handicaps. Penalties can go as high as $150,000.
Even giant companies may suffer financially from accessibility lawsuits. However, the litigation itself is bad for PR because it has serious potential to affect brand reputation. For small businesses, paying tens of thousands for non-compliance penalties can make a big dent on finances.
Around 98% of web pages at present do not comply with WCAG, web content accessibility guidelines, which are the mostly widely adopted standards for web accessibility. This means that there is worldwide consensus that by remediating your website according to the WCAG will make your website accessible to people with disabilities. In other words, nearly all websites can become the target of web accessibility lawsuits. Competitors can weaponize ADA Title III or similar laws in other countries against your business. If your business is targeted, you will have no choice but to pay the penalties or resort to out of court settlements.
So clearly, web accessibility is of the utmost importance nowadays. People with disabilities can’t properly engage with an inaccessible website. Their user experience is poor and their bounce rate is high. And free web accessibility plugins don’t provide an adequate solution.
You can avoid all of these by investing in an effective web accessibility and ADA compliance solution with a web accessibility solution accessiBe.
But does it really work? How hard is it to implement it?
Our team went to check!
Check your site
Before going into the details and intricacies of web accessibility adjustments and accessiBe’s features, let’s start with a web accessibility test that evaluates the web accessibility of your site.
accessiBe’s proprietary web accessibility checker is called aCe. It provides an overall evaluation (compliant/non-compliant) after examining categories such as clickables, titles, orientation, menus, graphics, forms, document, readability, carousels, tables, and general.
Go to the footer part of the site to find the “Get An Audit” section. You may also click on the Web Accessibility link below it to go to the accessibility checker page.
aCe presents a score for every category along with a checklist of standards, indicating a checkmark for the standards passed, X for standards failed, and a gray button for neutral page elements. Additionally, the web accessibility checker provides details of what is required and what can be done to achieve accessibility. It even presents the number of total page elements evaluated, the number of passes and failures, and code snippets of the failed elements.
You don’t need to know the technical details if you want to make your site web accessible with accessiBe. However, if you want to see if you can do the necessary tweaks on your own, you can refer to aCe’s results for guidance.
You will most likely find out that it will be a tedious and challenging process if you do things manually.
Automatic and AI-powered solution
accessiBe is a fully automated web accessibility solution backed by artificial intelligence (AI) machine learning. It addresses all accessibility concerns without the need to do manual changes or modifications in the source code.
accessiBe comprehensively examines a page to determine the right changes necessary to meet WCAG and ADA compliance. It ‘experiences’ your website like a person with disabilities would, and makes the necessary adjustments that will ensure an accessible digital experience for them.
accessiBe is split into two components. One is the interface, responsible for enabling changes according to a user’s preference. The other is an AI-driven system that scans a page to provide the appropriate changes. Together, the full solution provides on-demand accessibility design adjustments, and simultaneously makes a website compatible in the backend, for screen reader compatibility and keyboard navigation.
accessiBe’s interface allows site users to change the appearance and behavior of a page, on the spot. People who have vision difficulties can increase the font size, scale up the size of all contents on a page, change the colors of the texts and backgrounds, or set different contrast schemes. This interface is also capable of doing non-visual changes to make a page compatible with accessibility tools such as narrators or screen readers.
accessiBe also uses optical character recognition (OCR) technology to extract information from images. The platform provides text descriptions for images, so they become readable to screen readers, thus accessible to blind users.
Moreover, accessiBe has a continuously-learning contextual-understanding AI technology. This tech makes it possible for the system to analyze a page and provide a precise interpretation that would be useful for screen readers. It visually matches site elements and the actions users do to give a more meaningful way to navigate a page using a screen reader or through voice-based navigation.
accessiBe interface
The interface is the face of accessiBe’s accessibility solution, because it is the main visual component and what users see and interact with to create the necessary modifications on a page.
Sites that use accessiBe have a trigger button on all their pages. Clicking on this button opens the accessiBe interface, which is a movable window that sits on a page. It provides the functions that allow users to change the way a page looks and behaves.
The first few things you will likely notice in the interface are the three buttons on top and the different accessibility profile options.
Reset, statement, and hide interface buttons
The Reset Settings Button lets you revoke all modifications made on a page through the interface. If you click on it, the entire page refreshes. To reopen the interface, you have to click on the trigger button. It would have been preferable if the resetting does not refresh the page, but that is not exactly a critical issue.
The Statement button presents the accessiBe default accessibility statement or opens a page that contains the custom statement of a website. This statement can be used at proof of ongoing performance if your site should be approached with litigation.
Lastly, the Hide Interface button removes the widget and the trigger button from all pages of a site. The widget and button will only reappear once you clear cookies or restart the browser.
Profiles
The profiles are a brilliant way of letting users enjoy the benefits of the accessiBe widget without having to tinker with various settings on their own.
The Epilepsy Safe Profile removes or pauses images, animations, or videos that can potentially contain flashing or blinking lights or visual patterns that can induce photosensitive epileptic seizures.
The Visually Impaired Profile scales up the content on a page to make the texts easier to read and the images more visible. It also boosts the saturation of colors and the contrast of images. This profile is different from the profile designed for blind users. It is designed for those who have glaucoma, tunnel vision, cataract, and degrading eyesight.
Meanwhile, the Cognitive Disability Profile activates assistive features to help people with focus issues such as those who have autism and dyslexia as well as those who have been through cerebrovascular accident or CVA. This profile scales up the content by 25%, highlights and outlines titles and links, initiates the Reading Guide, and stops all animations on a page.
accessiBe also features an ADHD-friendly profile, which is designed to help reduce distractions on a page. It assists users who have neurodevelopmental disorders in addressing their focus difficulties. It scales the content up by 25 percent, activates the high saturation color profile, stops animations, and activates the reading mask. The reading mask is the function demonstrated in the screenshot below. It significantly improves the concentration on specific content.
The Blind Users (Screen Reader) profile , which is automatically prompted to blind users, activates various functions that help blind users navigate a page through their screen readers or accessibility tools such as NVDA, JAWS, TalkBalk, and VoiceOver. Activating this profile enables a website to communicate with the accessibility tool installed on a user’s computer.
The Blind Users profile also automatically enables the Keyboard Navigation profile, since it is through a keyboard that blind users interact with a page. It is also the profile that will be used by people with motor impairments, who use a keyboard to navigate a website and not a mouse. When activated, the Keyboard Navigation profile enhances page navigation through the keyboard. It assigns keyboard shortcuts for different page elements such as menus, forms, titles, headings, buttons, and graphics. These shortcuts allow anyone to interact with a page without using a mouse or a touchscreen.
Adjustments
If the profiles don’t provide enough adjustments to suit your needs or preferences, you can scroll down to access the different adjustment functions, either with the profiles or as standalone adjustments.
The first set of functions, Content Adjustments, provides the option for content scaling, font style switching (Readable Font), title and link highlighting, text magnification, font size adjustment, alignment modification, line-height adjustment, and letter spacing adjustment.
For the Color Adjustments set of functions, you can set a dark or light contrast or high or low saturation scheme. You can also turn everything on the screen into monochrome or black and white and modify the colors of texts, titles, and page backgrounds.
Lastly, the Orientation Adjustments set lets you mute the sounds on a page, hide images, bring up a virtual keyboard, use a reading guide, stop animations, put up a reading mask, highlight page elements that are underneath the cursor, and use a bigger black or white cursor.
Some of the functions will not be reflected on a page automatically. For example, the virtual keyboard will only appear if you encounter a page element that requires entry input. Also, the highlights will only appear once you hide the interface.
Beyond accessiBe’s technology
If accessiBe’s quick and easy-to-use system is not convincing enough, consider this: accessiBe, to date, is being used by nearly 54,000 businesses, organizations, government agencies, and individuals. The company also secured a $12 million Series A funding in late May this year. Businesses and investors wouldn’t be supportive of this web accessibility platform if it does not work.
accessiBe has been protecting more than 107 million web pages from possible web accessibility-related litigation. It has analyzed nearly 23 million data blocks and 250,000 lines of code to improve its AI system. Additionally, it undertakes more than a million daily processes.
The company aims to attain web accessibility for all websites by the year 2025. It appears to have an excellent solution that is easy to deploy and customize and does not require manual adjustments or alterations on a site’s source code.
accessiBe script installation
Web accessibility in two simple steps: This is not false advertising, fortunately. accessiBe is indeed capable of delivering full compliance to WCAG and ADA standards without the need to go through manual adjustments, source code modifications, and tedious page-by-page adjustments.
There are two installation methods: Quick & Basic and Advanced & Customized. The latter requires more time and steps to complete. For the former, all you need to do is to go to your account dashboard, copy the installation script, and paste it to your website’s code. Usually, you will be pasting the script below the body part of your site’s code. It depends on the platform you are using.
This is assuming that you have already signed up for an accessiBe account. The process is similarly quick and straightforward. Go to the accessiBe website and click on the Free Trial button.
Then, fill out the signup form. You will not be required to do any identity or email verification. The account is created almost instantly after you click the Signup Now button.
You will be automatically logged in to your account after completing the signup process. The account dashboard looks very similar to the Signup form. It has three tabs: My Account, My Websites, and </>Installation.
For the installation, you will only be dealing with the My Websites and </>Installation tabs. You add your website under My Websites, then proceed to copying the accessiBe script from the </>Installation tab and pasting it to your website’s code.
Here’s a concise guide on doing the Advanced & Customized installation.
1.Add your website under the My Websites tab.
2.Go to the </>Installation tab and select the Advanced & Customized Installation option. Doing this will open a host of options as shown below. There are 22 customizations you can tinker with. You may leave some blank or use the default values. A more detailed discussion on customization is presented in the next section (accessiBe Customization).
3.After doing your customizations, click the Generate Custom Script button to display the script that you need to copy onto your site’s code.
4.The next steps will depend on the content management (CMS) system you use. Click on the appropriate button under Installation Guides to get the instructions for adding the script to your site.
When installing it on a WordPress site, for example, you have to go to the WordPress Plugins tab and click Add New. You then have to search for the accessiBe plugin.
Install the plugin, activate it by going to the Installed Plugins tab, and click on the Activate option.
Once the plugin is activated, you can copy the accessiBe script you generated after when doing the Advanced & Customized Installation procedure. To do this, go to the Settings tab of WordPress, click on accessiBe, and paste the script into the JavaScript Code field. Then, save the changes you made.
accessiBe customization
You can personalize the accessiBe interface to match the style and color scheme of your website. Here’s a summary of the customizations you can do.
1.Accessibility Statement Link — You can leave this blank to use accessiBe’s default Accessibility Statement or enter a link to your own accessibility statement page. If you use accessiBe’s default page, the Open Accessibility Statement button that appears every time a site user hides the accessiBe interface will link to accessiBe’s statement. If you enter your own link, the button will open your own page in a new tab.
2.Feedback Form Link — This is similar to the Accessibility Statement Link. It allows you to provide your own feedback form instead of relying on accessiBe’s built-in system.
3.Interface Footer — The default footer is “Web Accessibility Solution by accessiBe.” You can personalize this similar to what is shown below.
4.Interface Language — accessiBe supports up to 14 languages, such as English, Spanish, German, Portuguese, French, Italian, Hebrew, Taiwanese Mandarin, Russian, Kuwaiti Arabic, UAE Arabic, Dutch, Japanese, and Chinese.
5.Interface Lead Color — Blue is the base color of the accessiBe interface. Notice how the widget changes when the color is changed to black.
6.Trigger Button Color — The trigger button is the small accessiBe button that appears on all pages of a site that uses accessiBe. You can change it to any color in the RGB spectrum. It is blue by default.
7.Interface Position — The accessiBe interface is located to the right by default. You can set it to the left. In most cases, it is located on the right based on the popular layout of websites. The widget would be obtrusive for sites that use left sidebars for their main navigation instead of having the most important buttons and links on the header.
8.Show on Mobile — Responsive website designs automatically adjust the layout and amount of content they display when a site is accessed through a mobile device. Some users who don’t need web accessibility functions may find the accessiBe trigger button too imposing on the limited screen size of a mobile browser. You have the option to hide it for mobile access.
9.Trigger Horizontal Position — The options are either left or right.
10.Trigger Vertical Position — The options are top, center, or bottom. You will be setting this in conjunction with the horizontal position toggle. There are six possible ways to customize the position of the trigger button: top right corner, bottom right corner, top left corner, bottom left corner, middle right side, and middle left side.
11.Mobile Trigger Horizontal Position — This is similar to Trigger Horizontal Position configuration, except that it only applies to mobile access. You can have different accessiBe trigger button positions for desktop and mobile.
12.Mobile Trigger Vertical Position — This is similar to Trigger Vertical Position configuration, except that it only applies to mobile access.
13. Trigger Button Size — You have three options for this: small, medium, and big. The default value is Medium.
14.Mobile Trigger Size — There are also small, medium, and big options for the mobile trigger button.
15.Trigger Button Shape — The trigger button can be a circle (round), square, squircle (big), and squircle (small).
16.Trigger Mobile Size — The options here are similar to what you have for the desktop version.
17.Hide Trigger Button — This show/hide setting only applies to the desktop version. You can set this to ‘Hide” but “Show” it for mobile access.
18.Trigger Button Icon — There are 20 icon options to choose from, as shown below.
19.Trigger Horizontal Offset — This is the horizontal margin (in pixels) you can set for the trigger button. With this, you can position the trigger button in the top middle or bottom middle part of a site (even when there’s no option for it under the trigger horizontal and trigger vertical settings). You just have to enter the right number of pixels.
20.Trigger Vertical Offset — This is the vertical margin (in pixels) you can set for the trigger button.
21.Mobile Trigger Horizontal Offset — This is similar to how the desktop offset function works.
22.Mobile Trigger Vertical Offset — Again, this is similar to the Trigger Vertical Offset for desktop.
By doing all these customizations, you can ensure that your interface will match your site design and not look generic. It is advisable to avoid the default settings.
accessiBe vs. what competitors offer
No similar web accessibility solution offers a range of features and dependability similar to accessiBe’s. Its automatic and AI-powered accessibility approach is distinctive and likely the only one of its kind for now. It has no direct competitor. Still, it’s worth pointing out what it does better compared to what others are offering.
Manual web accessibility solutions involve complex processes that need more time and effort to complete. As such, turnaround is considerably longer, with some taking up to six months. They also cost thousands per year, depending on the number of pages. With accessiBe, you can get the output in a matter of two days from the time the accessiBe script is installed regardless of the number of pages.
Compared to free and low-cost solutions like WP Access and UserWay, accessiBe easily comes out as the superior option because of its mindfulness in complying with WCAG, ADA Title III, and other legal standards for web accessibility. These solutions are estimated only to cover around 5 to 15 percent of the standards.
accessiBe does not entail permanent changes on a website. You don’t have to worry about altering existing styles and color schemes. It does not require changes in the source code except for the accessiBe script’s insertion below the body portion of the code. Because of this, if you decide to stop using it, you can simply remove the script and accessiBe disappears without a trace.
In terms of maintenance, accessiBe does not require any. It’s a set-and-forget arrangement. The application is maintained by the accessiBe team. All updates and error fixes are handled separately. There are automatic daily re-scanning and re-analyzing, so if you add new pages on your site, you can expect them to become web accessible after 24 hours. Competing solutions are not capable of doing this.
Security and site code integrity
Prospective users of accessiBe are right to be concerned about potential security issues in using this automatic solution. It may be designed to avoid interfering with a website’s code and core operation, but it still involves the insertion of a script into the source code.
However, accessiBe guarantees the security and privacy of the websites that use it. This service complies with the standards set by the EU’s General Data Protection Regulation (GDPR) and the California Consumer Protection Act (CCPA).
accessiBe’s servers are based in New York and San Francisco, protected by military-grade security and encryption technology. Additionally, it maintains fail-safe ready servers in Europe. accessiBe has a dedicated in-house DevOps team that oversees weekly vulnerability checks and audits.
Pricing
accessiBe is a premium web accessibility service that is provided on a subscription basis. You will have to pay for it monthly or yearly if you want to continue using it on your site after the seven-day free trial period.
The free trial, and all the payment models, provides access to all the features and functions of accessiBe. These include the monthly accessibility audits, daily compliance monitoring, compliance certification, and automatic cloud updates. You will not be required to provide your credit card details to sign up for the free trial.
There are four plans available: Basic ($49/month), Large ($99/month), Huge ($199/month), and Jumbo ($349/month). You will not be the one to decide which plan to get unless you will be willing to remove some of your pages to fit the maximum page allocation of the plan you want to have. The Basic plan is intended for sites that have less than 1,000 pages. Large is for less than 10,000 pages while Huge and Jumbo are for sites with less than 100,000 and 1 million pages, respectively.
You can save on your saccessiBe subscription if you choose to have annual billing. The Basic plan, for example, which costs $588 for a year when billed monthly, only costs $490 if you opt for annual billing. The Large, Huge, and Jumbo plans also get a 16% price reduction as they only cost $990, $1,990, and $3,490 under annual billing (instead of $1,188, $2,388, and $4,188 total annual cost under monthly billing).
The takeaway
accessiBe is arguably the best third-party web accessibility solution you can get right now. It is not an exaggeration that you can turn your non-compliant site into something fully web-accessible in just two steps: copy the accessiBe script and paste it to your website’s code. These are all you need to do to use this AI-powered automatic solution.
You don’t have to learn how to code. Even those who have zero experiences in accessing the source code of a site can install accessiBe by following the installation guides readily provided on the accessiBe account interface. There is no web application to maintain and update. If you encounter problems, all you have to do is to contact support. Also, you don’t need to be well-versed with the WCAG and ADA standards.
The process of installing accessiBe will only take longer if you want to have a customized look for your interface. It is not a significantly longer process, though.
It is not a free tool, but the range of features it provides justifies its pricing. After all, it’s going to cost you less to ensure web accessibility for your site as soon as possible than to spend on litigation fees and penalties after facing an accessibility lawsuit. It also comes with responsive customer support, monthly accessibility audits, and daily compliance monitoring.
Take advantage of accessiBe’s seven-day free trial and protect your business from possible web accessibility litigation. With accessiBe on your site, you will always have something to help persons with disabilities in using your site, which helps your business gain more customers while avoiding legal problems arising from violations of ADA Title III and other similar laws.
Find more information about accessiBe:
