All websites are required to be fully accessible to every visitor. That is the law and it is the right thing to do.

Unfortunately, it is a big challenge. If you had the resources, you could hire an Accessibility expert.

They would do an audit and manually upgrade every page on your site to be compliant with all the various international laws.

But most sites aren’t static. Every time you add new content (including new products) there is the possibility that you could cause a new accessibility issue.

Is Lack of Accessibility Costing You Sales?

Speaking of products, an ecommerce site owner in particular should be highly motivated to make store sites accessible to everyone or you are losing sales!

According to A Hidden Market: The Purchasing Power of Working-Age Adults With Disabilities from the American Institute for Research (AIR), the disposable income of working-age adults with disabilities in the U.S. alone was over $21 billion in 2018.

That is more than the spending power of Hispanic and African Americans combined.

How to Make a Website Accessible

The best way to make any site totally accessible would be through:

1. Manual testing by people with every type of access challenge.
2. Having an expert fix all problems found.
3. Staying on top of changes to laws around the world and implementing them.
4. Using website accessibility software like accessiBe.

That is a tall order. Most website owners do not have the resources to make that happen. But we should work in that direction.

We do this, firstly, through making improvements and training anyone who can publish on our site in best practices.

For example:

• Always including alternative text (alt-text) that describes every image on the page including all buttons.
• Ensuring that our color choices have sufficient contrast.
• Choosing appropriate fonts and text sizes.

But then what? Our choices are:

1. Become an accessibility expert and train everyone with access to publish on our site.
2. Hire accessibility experts to make our existing content conform to best  practices and have them regularly update any new content.
3. Use an accessibility overlay application.

We have to better understand what Web Accessibility is and what standards and legal requirements exist.

What is Web Accessibility?

According to Wikipedia:

“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 socio-economic restrictions on bandwidth and speed. When sites are correctly designed, developed and edited, generally all users have equal access to information and functionality. “

The goal of making sites web accessible is obvious. But getting your site to be fully compliant is not.

In fact, there is no clear consensus on what standards are legally required. But WCAG 2.1 AA it he most widely accepted.

What is WCAG and Why Is It Important?

The Web Content Accessibility Guidelines (WCAG) are the standards that are typically cited. More specifically:

• Accessibility Standards ADA, Section 508, EN 301549
• Web Content Accessibility Guidelines (WCAG) 2.1 AA
  • WCAG 2.1 AA (often cited in legal issues)
  • WCAG 2.1 AAA (higher standards)

The legal system has not yet conclusively determined exactly what legal standards site owners are required to meet.

What is A11Y?

When doing your research, be aware that “a11y” is often used as an abbreviation for accessibility.

This is because the A11Y Project is a community-driven effort to make digital accessibility easier.

Four Major Categories of Accessibility

The four major categories of accessibility to be addressed are:

• Visual
• Auditory
• Motor
• Cognitive

Watch the video in the next section. It better explains the first three of these primary concerns.

How to Design Web Accessible Sites

This video lays out the basics of how to design for web accessibility:

Video highlights:

• 04:15 Color contrast and text font size
• 06:17 Do not use color alone to make differentiation – add text
• 07:27 Design Focus States (navigation using the tab key on the keyboard)
• 08:27 Form Labels (do not use only placeholder text in form fields)
• 09:38 Alt Tags for Images (also called Alt Attribution)
• 10:27 Must have a process for populating the Alt Tag/Attribution field and web developers need to educate site owners on using it
• 10:50 Develop correctly (markups, navigation)
• 11:35 Concern over legal liability and avoiding lawsuits

There is really no such thing as “legal proof”.  Lawsuits are always a risk. But site owners who have put effort into compliance would be easier to defend.

It is not possible to build and maintain a website to be 100% accessible to everyone in the world all the time.

We should make a best effort at it, though. And developers and site owners should use the tips above to build more accessible sites.

Additional Accessibility Standards

The above only covers the basics. There is far more involved. For example, technically, if we include a video in our content, that video should have captions.

That makes me wonder captions in how many languages? Hopefully, we will only be required to provide the language in which the site is written.

But this does substantially reduce the value site owners can provide. We don’t own many of the videos we share.

But there is a free tool to add captions to videos you don’t own if you can download them.

Those of us with internet access insufficient for downloading / uploading videos would have to get someone else to do this for us.

The Web Accessibility Perspectives video covers ten website accessibility standards:

Video highlights:

• 00:03 Video Captions
• 00:40 Colors with Good Contrast
• 01:33 Voice Recognition (requires additional coding on your site)
• 02:30 Text to Speech
• 03:12 Clear Layout and Design (clear headings, navigation bars, consistent styling)
• 04:03 Notifications and Feedback (and more easily understood error messages)
• 04:58 Large Links, Buttons and Controls
• 05:30 Customizable Text
• 06:06 Understandable Content
• 06:51 Keyboard Compatibility

While this video contains 10 web accessibility topics, we know that is not all of those mentioned in the WCAG standards. So what is a site owner to do?

What are Accessibility Features of a Website?

Noting what Windows accessibility features Microsoft provides gives us some idea how complicated meeting this goal truly is.

That is where a solution like Accessibe comes in. It is the fastest, easiest solution to provide additional accessibility features.

I’ve explained many features in the sections below. And you can also read many accessiBe reviews on G2 here.

Why Review accessiBe?

I am impressed that accessiBe worked for 18 months in collaboration with people who have disabilities to provide feedback while developing their platform.

People who need accessibility features are the most qualified to determine whether they benefit from them or not.

By having them test solutions on many websites, they can identify additional challenges to using various types of sites.

And then accessiBe addressed those additional issues with their updates.

What is accessiBe?

The fastest way to provide accessibility features to any website is by using a web accessibility platform like accessiBe.

They use A.I. technology running in the background to analyze your site and provide an accessible version via their interface.

You simply add a line of code and within 48 hours, accessiBe offers your visitors a compliant version of your site.

And now is a great time to get screen captures that show the capabilities of their AI-powered platform as they just announced the rollout of their version 3.0.

There is additional information about accessiBe including a Q&A with their founder on ProductHunt.

They were the #1 Product of the Day on September 10, 2020:

How accessiBe Works

There are many solutions to make a website accessible. I wanted to understand how they work, so let’s go in-depth on how accessiBe works.

Their platform consists of two main components:

1. AI application running in the background
2. Accessibility interface visible to all visitors on the website

The A.I. application handles about 70% of the necessary work. The A.I. “scans and analyzes every element on your site using a contextual understanding process”.

It learns the function and purpose of every element before making it accessible using the Accessibility Interface.

The interface provides an overlay that makes your existing site more accessible. It does not change the code on your site.

It does change the code that is displayed on the visitors’ devices. And it can add Accessible Rich Internet Applications (ARIA) attributes according to best practices.

This video is the fastest way to see how accessiBe works:

Nothing about your existing site changes. But anyone can turn on the accessibility profiles or features and then further personalize them.

What Platforms Does accessiBe Support?

All platforms will work with accessiBe. It can run on any website building platform or CMS including:

• WordPress
• Wix
• Weebly
• Joomla
• Squarespace
• Concrete 5

Ecommerce platforms can definitely use accessiBe to increase their sales from people who need their features to be able to shop.

It is currently running on stores using all of these:

• Shopify
• BigCommerce
• Volusion
• Magento

Even if your CMS or platform is not mentioned, you should still be able to use accessiBe.

How to Install accessiBe

The best part of using accessiBe is probably how easy it is to install. You simply copy and paste a single line of code.

This is the same method you’ve probably used to install analytics or confirm site ownership in the past.

Do you happen to be running Genesis on WordPress? You can use How to Add Analytics or Verification Codes to WP Blogs Genesis Themes.

You will know it worked if the ISA symbol (the blue and white image of a person in a wheelchair) appears on your site.

The default position is bottom right. But you can change a setting to move it to the bottom left if you prefer.

It takes 48 hours or less for their A.I. to analyze your site and make it accessible. And then it will run again every 24 hours to keep it that way.

What are Accessibility Settings?

There are many accessibility settings available when you are running a web accessibility solution like accessiBe.

They are accessed by clicking on the icon that appears in the lower left or right corner of every page of a website.

In the image below, you can see the the International Symbol of Access (ISA), also known as the (International) Wheelchair Symbol.

The ISA symbol is an image of a person in a wheelchair on a blue background. Clicking this icon opens the accessiBe Accessibility Adjustments.

They recently announced a major update to accessiBe 3.0 with many upgrades to the visual Accessibility Interface.

All of the images in this post are from accessBe version 3.0 (Sep 2020).

When a visitor clicks on the ISA wheelchair icon, a window pops up where they can choose any of 14 preferred interface languages.

Accessibility Adjustments in accessiBe 3.0

Visitors can select one of 6 pre-configured profiles or scroll down to adjust features individually.

As you can see in the image above, they offer six profiles for various disabilities:

• Eplilepsy Safe Profile
  • Eliminates flashes and reduces color
  • Stops GIFs
• Visually Impaired Profile
  • Enhances the website’s visuals with more saturated and contrasted colors
  • Zooms in by 100%
• Cognitive Disability Profile
  • Assists with reading and focusing
  • Outlines important elements like titles, links, and buttons
  • Reading Guide provides a bold line that follows the cursor to read one line at a time
  • Built-in dictionary
• ADHD Friendly Profile
  • More focus and fewer distractions
  • Enables a reading mask and better color contrasts
  • Reading Mask grays out everything except where the cursor is
• Blind Users (Screen-reader)
  • Use the website with your screen-reader
  • Automatically welcomes readers audibly when their screen reader is recognized and invites them to turn on adjustments by clicking the “alt + 1” on their keyword
• Keyboard Navigation (Motor)
  • Use the website with the keyboard
  • Automatically turns on when they press the tab key on their keyboards and turns on the adjustments button
  • On-screen virtual keyboard in addition to navigation using tabs

The Blind Users and Keyboard Navigation profiles are linked so that if one is turned on the other also comes on.

Note that accessiBe will automatically activate for visitors using screen readers or who navigate your site by clicking the tab key.

Here is a video that explains each of the above options:

Visitors can activate any of the profiles or they can manually turn on and off each of the other available options detailed below.

These options are not mutually exclusive; visitors can mix-and-match them as they prefer.

Content Adjustments (accessiBe 3.0)

Content is easily adjusted for optimum ease in viewing. Adjustments include:

• Scaling content larger or smaller
• Switching to a more readable font
• Highlighting titles and links
• Magnifying specific areas of text
• Adjusting font sizing, line height and letter spacing
• Changing a page to align center, left, or right

Click any active choice to turn them all off.

Color Adjustments (accessiBe 3.0)

Even those of us who don’t have vision problems can be affected by too much blue light or very bright backgrounds.

Personally, the new Twitter and Facebook designs with bright white everywhere on the background are too much for me to stand.

They cause eye strain and eventually headaches. But imagine if you had challenges all the time on every site?

That is where color adjustments come in. Depending on a person’s visual challenges, they need to be able to adjust the colors to make every site easier to read.

accessiBe provides the ability to change between dark and light contrast, high or low saturation, or switch to monochrome (black and white).

The background, title text, or all text can each selectively be changed to different colors that are easier for each individual to see.

This could be especially useful to someone with color blindness who can’t distinguish between particular colors at all.

Orientation Adjustments (accessiBe 3.0)

Under accessiBe’s Orientation Adjustments, your site visitor can:

• Display a virtual keyboard
• Mute sounds to turn off all audio on the site
• Hide images
• Stop animations
• Open “Useful Links” to jump to specific pages
• Change to a large white or large black cursor
• Use the Reading Guide to focus on one line at a time where the cursor is
• Turn on Highlight Hover to put boxes around the section where the mouse is pointing
• Focus better by using the Reading Mask to gray out everything except where they are reading

The accessiBe Highlight Hover feature puts a box around specific areas of the page to make it easier to tell where you are.

Here is an image showing what accessiBe Highlight Hover does:

The orange boxes around the “Sign up!” button and the entire section of the page were added by the accessiBe Highlight Hover function.

accessiBe 3.0 Blind Users & Keyboard Navigation

Visitors who are blind and using a screen-reader are greeted with an audible message that invites them to turn on adjustments by clicking the “alt + 1” on their keyword.

This profile makes your website compatible with screen-readers such as JAWS, NVDA, VoiceOver and TalkBack.

Visitors who signal they may be motor-impaired by using the keyboard tab, shift + tab or enter keys automatically see the keyboard navigation options.

Keyboard users can also use shortcuts to jump to specific elements such as:

• “M” for menus
• “H” for headings
• “F” for forms
• “B” for buttons
• “G” for graphics

accessiBe Accessibility Statement

There is a button at the top of the Accessibility Adjustments pop-up to access an Accessibility Statement.

That statement appears within that pop-up window. Here is part of what it says:

Some of what this statement covers includes:

• Screen-reader optimization
• Keyboard navigation optimization
• Disability profiles (explained in detail above)
• Browser and assistive technology compatibility
• Additional UI, design and readability adjustments including:
  • Font adjustments
  • Color adjustments
  • Animations (stop videos, GIFs and CSS flashing transitions)
  • Content highlighting (explained above)
  • Audio muting (mutes the entire website instantly)
  • Additional functions such as
    • changing cursor color and size
    • using a printing mode
    • enabling a virtual keyboard
    • many other functions
• Browser and assistive technology compatibility
• An email to reach out for assistance or to request additional features

Web Accessibility Testing Tools

There are more web accessibility testing tools than I could write about in this one post. W3.org maintains a list of them here.

Manual web accessibility experts rely on these tools to audit sites. Many of them are opposed to the use of apps like accessiBe.

One argument they use, though, is that sites running accessiBe fail these testing tools. But that is not necessarily a valid argument.

Here’s why. The tool is activated by sensing either screen reading devices or the use of the tab key which indicates that visitor is using the keyboard to navigate instead of a mouse.

But if the person doing the testing doesn’t activate the tool and there is nothing to trigger it to turn on, it will fail such tests.

Pros and Cons of Using Overlays

The primary argument in favor of using an accessibility overlay is that it is fast (takes 24-48 hours) and relatively inexpensive.

There are many who are opposed to their use. In particular, there are arguments put forth by people who do accessibility mediation for a living.

However, I do wonder whether their tests were done with the overlay active. If not, then their results are invalid.

The most obvious challenges are:

• If a user has javascript disabled (a common thing for someone who has accessibility needs) then overlay tools don’t function at all.
• Overlays may conflict with accessibility tools the visitor is already using.

But, if a site is currently not accessible, using an overlay will improve the experience for those who use it.

And there are people who believe accessiBe benefits them:

Manually fixing and preventing every possible issue would be best. That takes time and resources.

In the meantime, providing an accessibility overlay to those who wish to use it would be beneficial to your visitors.

What Should You Do?

In a perfect world, every website would be perfectly accessible to everyone on the planet regardless of their challenges.

We don’t live in that idealized world. So we should strive to make the best decisions we can and act on them.

Web accessibility design has a lot in common with design for mobile devices. Be sure to address both at the same time.

Realize that the only people who can truly confirm whether your site is fully accessible are those with accessibility challenges.

Hopefully, they will be kind enough to let you know rather than just sue you in hopes of a big payday.

Legal Protections accessiBe Offers

Many companies are installing accessiBe either because they’ve been served or they hope to prevent legal challenges going forward.

The services accessiBe provides towards that end include:

• The accessiBe compliance status Accessibility Statement (visible to users of your website).
• Rescanning your site every 24 hours and bringing any new or altered content into compliance.
• Emailing monthly an Accessibility Compliance Audit.
• A Litigation Support Package.

According to accessiBe, their app:

• Is ADA, AODA, EEA, Section 508, and IS5568 compliant.
• Meets WCAG (Web Content Accessibility Guidelines) version 2.1 at the AA to AAA level success criteria.
• Complies with all major data protection regulations, including CCPA and GDPR.
• Does not collect any identifiable or personal data, only structure, and behavior.

NOTE: I am not a lawyer or an attorney and this is not legal advice. Always read the fine print carefully and consult a licensed attorney before relying on any product for protection. 

What Does accessiBe Cost?

All the accessiBe plans include everything mentioned here and on their site.

Pricing is dependent upon how large your site is and starts at $49 per month or $490 per year.

They offer a free 7 day trial of all the features with no credit card required.

If you want to try it out to see how the interface works, visit their site or SmallBizTrends.com (icon on the bottom left) or BizSugar.com (icon on the bottom right).

The post 2020 Review: How to Use accessiBe To Make ADA Compliant Websites appeared first on GrowMap.