Back to guides

How UserWay`s AI Ensures Your Website is Accessible, WCAG & ADA Compliant

AudioVisual
Hi, I’m Johnny with UserWay here to demonstrate our AI-Powered Accessibility Solution.A man stands at a computer desk in an office.
I’m excited to share with you the power of UserWay’s AI and how you can achieve

WCAG and ADA compliance for your website while safeguarding your organization against accessibility-related lawsuits.

A popup briefly appears with The text “UserWay’s industry-leading artificial intelligence.”

The text in the popup changes to show the acronyms WCAG and ADA.

The text in the popup changes to The text “Safeguarding against accessibility-related lawsuits.”

Before we dive in, let’s talk about why accessibility is essential from a legal perspective.A popup briefly appears with The text “Why is accessibility important?”
Over 60 million people in the U.S. alone live with some form of disability.A popup briefly appears with The text “More than 60 million people live with a disability.”
Government regulations require equal access to online services for everyone.A popup briefly appears with The text “regulations require equal access.”
Sites that violate these regulations are exposed to expensive litigation and fines.A popup briefly appears with The text “Sites violating ADA are legally exposed.”
Many high-profile cases make headlines, such as the cases against Target, Domino’s Pizza, and Netflix.A popup briefly appears with the following text:

Target
Domino’s Pizza
Netflix

But thousands more impact small businesses every month.
So what does this mean for you?
Your site must meet hundreds of WCAG requirements, the standard for website accessibility and compliance in the United States and internationally.An image of a computer screen slides into view. It displays a long list of WCAG requirements and scrolls through them.
With a single line of JavaScript, UserWay achieves more than an entire team of developers.The screen returns to the presenter standing at a computer desk in an office.

A popup appears that shows website code being edited.

UserWay solutions work around the clock, saving your organization significant resources while constantly moving you forward on your accessibility journey.A popup briefly appears with The text “Save significant resources on your accessibility journey.”
With UserWay, more people will be able to use your website on whatever device they choose, from smartphones to desktops.A popup briefly appears with The text “Works on smartphones, tablets, laptops and desktops.”
I’ll show you how UserWay’s three core components combine to create a truly accessible and compliant website.A popup briefly appears with The text “3 core components ensure a fully accessible website.”
First, UserWay’s AI-powered remediations, which automatically fix accessibility violations in your site’s code.The screen splits with a list on the left side and the presenter on the right.

The listed items are:
1. AI-Powered Remediations
2. User-Triggered Enhancements
3. Accessibility Fine-Tuning

Under AI-Powered Remediations, text appears that reads, “Automatically fix violations at the code level.”

Second, user-triggered enhancements that empower end-users to personalize their experience on your site.Under User-Triggered Enhancements on the list, text appears that reads, “Enable a tailored user experience.”
And third, accessibility fine-tuning, allowing your team to deliver a more powerful user experience aligned with your organization’s brand.Under Accessibility Fine-Tuning on the list, text appears that reads, “Fully align accessibility with your brand.”
Let’s see and hear how it works.The screen returns to the presenter standing at a computer desk in an office.
Part 1: AI-Powered RemediationsThe screen splits with space for graphics on the left side and the presenter on the right.

The left side of the screen shows a circuit board graphic along with text that reads:

AI-Powered Remediations

Accessibility starts now, the moment your site loads.The screen cuts to show the top-left corner of a computer screen with a browser open.

A url is being typed into the browser.

UserWay scans and analyzes your site’s underlying code on each page and then automatically applies fixes to every violation it finds.The camera zooms out from the computer screen to show a webpage.

The webpage then slides up on the computer screen to reveal its code.

Parts of the code are highlighted and changed rapidly.

Fixes are applied asynchronously so your site’s loading time and performance aren’t affected.The screen returns to the presenter standing at a computer desk in an office.

A graphic is overlaid at the bottom of the screen. It shows bar graphs for 1000ms, 2000ms, 3000ms, 4000ms, 5000ms and 6000ms to show how fixes are not all applied simultaneously.

There is also a counter overlaid on the screen showing an increasing percentage to represent fixed being applied.

The counter changes to a checkmark when it reaches 100%.

The screen cuts to a dark background. A small UserWay logo is in the bottom-left corner.

The text “Signing Into Your Widget” appears near the top of the screen.

As the site administrator, you can securely sign into your widget and see a summary of the violations that were fixed.The screen returns to the presenter standing at a computer desk in an office.

The UserWay widget user interface (UI) pops up on the right side of the screen.

It zooms to the bottom-left corner of the widget and a cursor clicks on the word “Manage” on the widget.

The widget changes to a login form.

A username and password appear in the form and the cursor clicks the Login button.

A summary graphic with a breakdown of violation types and the number fixed appears.

Imagine how long it would have taken your development team to tackle those.The widget UI disappears.

An animation overlay appears. It includes The text “1.2K Violations Fixed.”

Every image on your site needs to be accessible to visually impaired users.The screen cuts to a dark background. A small UserWay logo is in the bottom-left corner.

The text “Image Alts” appears near the top of the screen.

This means adding clear descriptions, or alt-tags, to each image or ensuring they’re marked as decorative.The screen returns to the presenter standing at a computer desk in an office.

Four boxes appear on the right side of the screen. Each has an image of a product, a price and text that reads, “View Product.”

A red outline appears around the first product box and alt text is displayed to describe it.

The red outline switches to each of the boxes. As it does, alt text describing each product appears.

Otherwise, the screen reader will ignore the image altogether.All of the product boxes disappear.
A typical site has thousands of images.The video cuts to an image of a computer screen. It displays an ecommerce website and quickly scrolls down the page to show a long list of product images.
That’s a lot of work for any content team.The screen returns to the presenter standing at a computer desk in an office.
But not with UserWay.
Our machine learning and computer vision AI automatically generate the image alts.The widget UI appears on the right side of the screen.

It contains three images. Beside each image is a text box. Under each image is a toggle button with the word “Decorative” beside it.

Text types into each text box to describe the corresponding image beside it.

So screen readers will be able to announce them when needed.
[Screen reader: A woman wearing glasses. Link.]The video cuts to an image of a computer screen. It displays a list of products with images.

A product image that shows a woman wearing glasses is highlighted with a red outline.

You can even refine the description to reflect your brand’s unique voice.The screen returns to the presenter standing at a computer desk in an office.

The widget UI appears on the right side of the screen.

It contains three images. Beside each image is a text box. Under each image is a toggle button with the word “Decorative” beside it.

One image is the woman wearing glasses. New descriptive text is typed into the text box beside it.

A Save button appears beneath the text box. A cursor clicks it.

[Screen reader: A woman wearing our gold-rimmed sunglasses. Link.]The video cuts back to the image of a computer screen. It displays a list of products with images.

A product image that shows a woman wearing glasses is highlighted with a red outline.

Decorative images and icons are marked accordingly, as required by the WCAG.The screen returns to the presenter standing at a computer desk in an office.

The widget UI appears on the right side of the screen.

It contains three images. Beside each image is a text box. Under each image is a toggle button with the word “Decorative” beside it.

The toggle buttons slide to the right and turn green.

The video cuts to a dark background. A small UserWay logo is in the bottom-left corner.

The text “Accessible Pricing for e-Commerce” appears near the top of the screen.

Sometimes discounted prices are presented in a way that screen readers don’t pick up on.The screen returns to the presenter standing at a computer desk in an office.

A product box appears. It contains a yellow hand bag image. Below it, it reads, “Eco Tote Bag.”

Two prices are listed below the text. One in red shows $99 with a strike line through it. The other in black shows $79.

Text below the prices reads, “View Product.”

Here is how this info sounds without UserWay…The video cuts to an image of a computer screen. It displays a list of products with images. The yellow tote bag and its pricing information are highlighted.
[Screen reader: 99 dollars, 79 dollars. Link.]
Not only is this confusing, but it’s an accessibility violation.The screen returns to the presenter standing at a computer desk in an office.

A product box appears. It contains a yellow hand bag image. Below it, it reads, “Eco Tote Bag.”

Here’s how it sounds with UserWay…The video cuts to an image of a computer screen. It displays a list of products with images. The yellow tote bag and its pricing information are highlighted.
[Screen reader: The previous price was 99 dollars; the current discounted price is 79 dollars. Link.]
The video cuts to a dark background. A small UserWay logo is in the bottom-left corner.

The text “Keyboard Focus” appears near the top of the screen.

Users navigating with a keyboard often rely on a focus outline to know where they are on the page.The screen returns to the presenter standing at a computer desk in an office.

The video cuts to an image of a computer screen. It displays a website with a horizontal navigation menu at the top.

A red box switches to different menu items.

You can tailor the focus style to match your brand colors.The screen returns to the presenter standing at a computer desk in an office.

The widget UI appears on the right side of the screen. It shows a color picker and other color options.

A cursor clicks buttons and changes options in the widget UI.

The video cuts to a dark background. A small UserWay logo is in the bottom-left corner.

The text “Skip Link” appears near the top of the screen.

WCAG rules state that users should have the ability to skip past repetitive content.The screen returns to the presenter standing at a computer desk in an office.
One example is navigation menus that appear on every page of your website.Four duplicate versions of an e-Commerce website appear on the right side of the screen. They are stacked at an angle to show the nav menu on each one.

A red box highlights and cycles through the nav menus.

UserWay provides a built-in skip link.The duplicate web pages disappear.

A rectangular box appears in their place with the words, “Skip to main content.” There is also an enter symbol to the right of the text.

Simply hit the tab key to trigger it.The box slightly expands as the presenter presses the tab key.

The box disappears.

UserWay also adds a skip link revealing the Accessible Navigation Menu with shortcuts to headings, landmarks, and links.The video cuts to an image of a computer screen. It displays an e-Commerce website.

A dialog box appears over the web page. It has tabs at the top for Headings, Landmarks and Links.

A cursor clicks each tab. The dialog box switches the content below each tab as they are clicked.

The dialog box disappears.

Accessible navigation menus are critical to every website, and they should work with the tab, arrow, and enter keys.The screen returns to the presenter standing at a computer desk in an office.

Graphics of tab, arrow, and enter key buttons appear on the right side of the screen.

UserWay remediates complex nav menus adding helpful tooltips to guide your users.The video cuts to an image of a computer screen. It displays an e-Commerce website.

A red box highlights nav menu items as it switches to them.

Each highlighted nav menu item shows a tool tip.

The video cuts to a dark background. A small UserWay logo is in the bottom-left corner.

The text “Pop-ups” appears near the top of the screen.

Popups require special handling to ensure people with disabilities can use them.The screen returns to the presenter standing at a computer desk in an office.

Example website popup boxes appear near the bottom of the screen. Then they disappear.

Inaccessible popups can be ignored by screen readers and are often impossible to dismiss using the keyboard.A popup appears with The text “All popups must be accessible.”
With UserWay, your popups now meet WCAG requirements.A popup appears with The text “UserWay makes your popups accessible.”

An example website popup appears near the bottom of the screen.

The close button is focused when the popup first appears…The video cuts to an image of a computer screen. It displays an e-Commerce website.

The website is grayed out in the background and has a shopping cart popup displayed in the foreground.

The camera zooms on the button to close the popup.The button is highlighted in red.

…the focus remains contained within the popup…Text and buttons are highlighted sequentially in the popup.
…and hitting the escape key on the keyboard closes it.The screen returns to the presenter standing at a computer desk in an office.

The example website popup is on the right side of the screen.

The popup disappears when the presenter presses the escape key.

Websites often feature links that are vague, and can pose barriers to accessibility.
These include links such as “Click here,” “Download now,” and “Learn more.”Click here, Download now, and Learn more links appear in boxes on the right side of the screen.
Without more context, these links aren’t very helpful to users, especially those relying on screen readers.The links all disappear.
UserWay’s AI automatically fixes vague link violations.Two dialog boxes for NVDA and JAWS screen readers appear on the right side of the screen, then disappear.
Here’s how this info sounds without UserWay…The two dialog boxes for NVDA and JAWS screen readers reappear on the right side of the screen.
[Screen reader: Click here, click here, download, learn more, learn more.]Examples of vague links are listed in the dialog boxes. The screen reader says each one as it is highlighted.
Here’s how it sounds with UserWay…The video cuts to an image of a computer screen. It displays an e-Commerce website with a yellow tote bag image highlighted. Below the tote bag is its price and a link with the text “Learn more.”
[Screen reader: Learn more about the yellow eco tote bag. Link.]When the “Learn more” link is clicked, the screen reader provides a longer explanation.
The video cuts to a dark background. A small UserWay logo is in the bottom-left corner.

The text “Broken Links” appears near the top of the screen.

A page that you link to might be here today, but gone tomorrow.The screen returns to the presenter standing at a computer desk in an office.
When a link doesn’t work, it’s not just frustrating, it’s an accessibility violation.A popup appears with the text, “Broken links are an accessibility violation.”
UserWay assesses each and every link on the site and removes broken references.The video cuts to an image of a computer screen. The screen is split in half, with the top showing a website and the bottom showing its code.

The site links in the code are highlighted.

A box appears with text and graphics that show the violations that have been corrected.

The video cuts to a dark background. A small UserWay logo is in the bottom-left corner.

The text, “External Link Targets” appears near the top of the screen.

Any link that will open in a new tab or window must inform the user in advance.The screen returns to the presenter standing at a computer desk in an office.

A popup appears with the text, “Links that open in a new tab must be announced.”

The site’s code reflects this change without affecting the user interface.The video cuts to an image of a computer screen. The screen is split in half, with the top showing a website and the bottom showing its code.

New code is being added, but the website design above it doesn’t change.

The video cuts to a dark background. A small UserWay logo is in the bottom-left corner.

The text, “Form Labels” appears near the top of the screen.

Many WCAG rules are devoted to ensuring that the input fields are adequately labeled for visually impaired users.The screen returns to the presenter standing at a computer desk in an office.

A web form pops up on the right side of the screen. The input blanks are labeled First name, Last name, and Email. Each form blank is highlighted sequentially.

The form then disappears.

A visually impaired person would hear an inaccessible field as…
[Screen reader: Input field, blank.]

[Screen reader: Input field, blank.]

[Screen reader: Input field, blank.]

The screen cuts to only show the website form. The screen reader speaks each time an input field is highlighted.
UserWay makes any form, regardless of complexity, accessible by ensuring every input field has an associated, informative label.The screen returns to the presenter standing at a computer desk in an office.

A popup briefly appears with the text, “UserWay ensures all forms are accessible.”

A popup briefly appears with the text, “All fields should have informative labels.”

With UserWay, they now hear…
[Screen reader: Please enter your first name, input field, required, blank.]The screen cuts to only show the website form. The screen reader speaks each time an input field is highlighted.
Form labels can also be tailored to fit your organization’s brand voice.The screen returns to the presenter standing at a computer desk in an office.
[Screen reader: Register with GearTime for our special deals. Button.]The screen cuts to only show the website form. The screen reader speaks when the Register button is selected.
Any errors that occur when a user submits an online form must be announced while automatically moving the focus to the first erroneous field.The screen returns to the presenter standing at a computer desk in an office.

A web form pops up on the right side of the screen. The input blanks are labeled First name, Last name, and Email.

When the Registration button is pressed, the email form is highlighted. Red text appears below it that reads “Please enter a valid email address.”

The form then disappears.

Otherwise, users will be stuck and prevented from accessing your services.A popup briefly appears with the text, “Form field errors may cause confusion.”
These users won’t know which field was incorrect or even if they succeeded in submitting the form at all.
With UserWay, they would hear…The screen cuts to only show the website form.
[Screen reader: Please enter a valid email address.]

[Screen reader: Input field, required, current value: john@mysite.]

The video cuts to a dark background. A small UserWay logo is in the bottom-left corner.

The text, “Accessible Colors” appears near the top of the screen.

Prioritizing look and feel, design trends, and brand guidelines is great, but did you know that certain color combinations on your website could be considered illegal?The screen returns to the presenter standing at a computer desk in an office.

A box appears on the right side of the screen that contains a color palette with 6 different colors. Four of the colors are different shades of gray, one is red and one is blue.

The word “Illegal” is stamped on the color palette.

Any color that doesn’t meet the WCAG contrast minimums renders your content difficult or impossible to read and exposes you to accessibility-related lawsuits.The color palette disappears.

A popup briefly appears with the text, “Non-compliant colors may harm legibility and accessibility.”

A popup briefly appears with the text, “Color contrast problems increase lawsuit risk.”

You can resolve all color issues by reviewing each element individually, or all at once, for your entire site.The UserWay Widget UI pops up on the right side of the screen.

It displays a list of colors on the site with recommended colors beside them. Each item on the list has an option to either “Edit” or “Accept.”

A cursor moves through the items clicking some of the Accept buttons.

The cursor moves to the top of the UI and clicks a button to accept all of the recommendations.

Afterward, the widget UI disappears.

Any inaccessible colors will be slightly tweaked to make sure that they not only remain on-brand but are also 100% compliant.An illustration of a computer screen slides in from the right. It displays a mockup of a website.

A vertical line moves across the screen slightly changing the colors to make them easier to differentiate.

The computer screen slides off screen and the color palette appears.

The word “Compliant” is stamped onto the color palette.

The color palette then disappears.

UserWay will even handle these color updates for you if you want.Part of the UserWay Widget UI pops up on the right side of the screen.

It shows a toggle switch beside text that reads “Automatically fix color violations.”

A cursor appears and changes the toggle switch from off to on.

A graphic with a checkmark appears under the toggle switch. Text also appears that reads “Congratulations! All color contrast issues fixed!”

The UI then disappears.

Just turn on the “Automatically fix color contrast” option.
You’ll notice how non-compliant colors are automatically remediated across your site.A popup briefly appears with the text, “Non compliant colors are automatically fixed.”

An illustration of a computer screen slides in from the left. It displays a mockup of an e-Commerce website. The text is light gray against a slightly lighter gray background.

The text on the website mockup changes to a darker gray that is more legible.

The computer screen slides off the screen.

When customizing individual colors, you’ll know whether your chosen colors comply with AA or, even better, AAA standards.The UserWay Widget UI pops up on the right side of the screen. A color picker is shown inside it.

A cursor appears and makes color adjustments. The camera zooms to the bottom-left corner of the UI. Some colors show the text “PASS AA” while others show “PASS AAA.”

The video cuts to a dark background. A small UserWay logo is in the bottom-left corner.

The text, “Accessible Headings” appears near the top of the screen.

Properly defined headings help users understand page structure and quickly navigate to the information they need.The screen returns to the presenter standing at a computer desk in an office.
Headings that are out of sequence, or do not follow a well-structured visual hierarchy, are an accessibility violation.The screen cuts to a dark background with example website code. There are multiple tags displayed for headings, but they are out of order.

The screen returns to the presenter standing at a computer desk in an office.

UserWay automatically fixes these, ensuring no headings are missing or out of place.The screen cuts to a dark background with example website code. There are multiple tags displayed for headings, but they are out of order.

The code begins to move around on the screen and puts the heading tags in order.

And we do so without impacting your site’s look and feel.The screen returns to the presenter standing at a computer desk in an office.

A box pops up on the bottom of the screen that contains website code. A cursor clicks a toggle switch at the top that is labeled “Accessible Headings.”

Parts of the code change to become compliant.

The video cuts to a dark background. A small UserWay logo is in the bottom-left corner.

The text, “PDF Documents” appears near the top of the screen.

PDF documents linked from your website must be made accessible.A popup briefly appears with the text, “All PDFs must be accessible.”
These often include brochures, reports, or product catalogs.The screen splits with a list on the left side and the presenter on the right.

The list text:

PDF Remediations
1. Brochures
2. Reports
3. Product Catalogs

The list slides off the screen and the presenter fills it again.

Just choose to have them remediated by UserWay.The UserWay Widget UI pops up on the right side of the screen.

It contains a checklist of PDF document names.

A cursor checks the boxes and then clicks a button at the top of the UI that reads “Remediate PDF documents.”

The UI changes to display the message “All PDFs are remediated successfully!”

This also applies to videos which must have captions, transcriptions, and audio descriptions.The screen splits with a list on the left side and the presenter on the right.

The list text:

Video Remediations
1. Captions
2. Transcriptions
3. Audio Descriptions

The list slides off the screen and the presenter fills it again.

These can also be remediated by UserWay.
I’ve covered just a few of the hundreds of critical accessibility remediations UserWay applies to your website.A popup briefly appears with the text, “Many more accessibility remediations available.”
Now, let’s turn from AI and automation to user-triggered enhancements.The video cuts to a dark background. An infographic appears with two icons connected by a line between them.

The text under the left icon reads “AI & Automation.”

The text under the right icon reads “User-Triggered Enhancements.”

This is where your users take control of their experience on your site.The screen returns to the presenter standing at a computer desk in an office.

A popup briefly appears with the text, “Manually controlled functions.”

Part 2: User-Triggered EnhancementsThe screen splits with space for graphics on the left side and the presenter on the right.

An icon of a joystick appears on the left side. Text is displayed under it that reads “User-Triggered Enhancements.”

The joystick animates and its button is pressed.

The icon and text slide off the screen and the presenter fills it again.

To ensure that your site can adapt to the individual needs of each visitor, UserWay offers easy-to-use functions that can be triggered at will.A popup briefly appears with the text, “Adapt to individual customer needs.”
These functions are intuitive, easy to enable, and work in tandem with UserWay’s AI-powered remediations.

Let’s take a look.

One of the most powerful features is UserWay’s integrated screen reader.The UserWay Widget appears on the right side of the screen.

A cursor clicks on the Screen Reader button.

The widget then disappears.

Unlike standard screen readers, UserWay’s is engineered specifically for websites.A popup briefly appears with the text, “Our screen reader is engineered specifically for websites.”
It supports over forty languages and multiple reading speeds.The UserWay Widget UI pops up on the right side of the screen.

It quickly scrolls through all of the language options.

A cursor clicks a language to display three reading speed options.

The UI then slides off the screen.

You are now experiencing what a visually impaired person would hear when visiting your website.The video cuts to a dark background. Screenshots of website homepages are stacked like a deck of cards.
[Screen reader: Welcome to CNN.]

[Screen reader (spoken in German): Welcome to CNN.]

[Screen reader (spoken in French): Welcome to CNN.]

[Screen reader (spoken in Spanish): Welcome to CNN.]

As the screen reader speaks, the website screenshots shuffle to display the language being spoken.
Users will appreciate the ease with which they can enable a screen reader without installing any additional software.The screen returns to the presenter standing at a computer desk in an office.

A popup briefly appears with the text, “No additional software is needed for UserWay’s screen reader.”

Videos, slideshows, GIFs, and animations can be distracting and trigger involuntary physiological responses.The screen splits with a list on the left side and the presenter on the right.

The list text:

Accessible Animations
1. Videos
2. Slideshows
3. GIFs
4. Animations

The list slides off the screen and the presenter fills it again.

These can now be paused by any visitor to your site.A box with a website appears in the bottom-right corner of the screen. The website is playing a video in its background.

The UserWay widget pops into view. A cursor appears and clicks the “Pause Animations” button.

The background video on the website example stops playing.

Then the widget and website example disappear.

Providing these controls is an accessibility requirement.A popup briefly appears with the text, “Pausing animations is an accessibility requirement.”
Increase text size, spacing, and line-height to improve readability and meet WCAG text styling requirements.A website example appears in the bottom-right corner of the screen. The site is full of text.

The UserWay Widget pops into view. A cursor clicks the buttons for Bigger Text, Line Spacing and Line Height.

The text in the website example adjusts as the buttons are pressed.

Then the widget and website example disappear.

A popup briefly appears with the text, “Easily meet WCAG text styling requirements.”

Your users can reduce eye strain by taking advantage of high contrast modes that make content more accessible and easier to read.A website example appears in the bottom-right corner of the screen. The site contains text and images against a white background.

The UserWay Widget pops into view. A cursor clicks the contrast button multiple times.

Each click changes how the website example is displayed.

The website example then disappears.

Highlight links to make them stand out.A website example appears. It contains a large image and some text under it.

A cursor appears and clicks the Highlight Links button in the widget.

A link that wasn’t easily visible in the example website becomes highlighted in yellow.

Make the cursor larger, or transform it into a horizontal bar or reading mask that focuses the reader’s attention on a specific area on the screen.A computer screen slides in from the right. It replaces everything that was visible.

The UserWay widget is visible beside the computer screen.

The computer screen displays a website.

A cursor appears and clicks the Cursor button on the widget multiple times.

The cursor on the website changes into a bar, then it switches to mask all of the page with a gray overlay except for a narrow horizontal area of the screen.

The cursor then changes back to normal.

Convert any stylized fonts into simpler, more legible ones for an easier and more accessible reading experience.The cursor clicks the Font button on the widget.

All of the text on the website changes to a different font.

The screen returns to the presenter standing at a computer desk in an office.

Apply our dyslexia friendly font.The UserWay Widget appears on the right side of the screen.

The widget disappears.

Dyslexia impacts up to 10% of the world’s population.The video cuts to a dark background. An illustration of the earth appears. Text below it reads “10% of the world’s population has some form of dyslexia.”

A bubble animates above the earth that contains 10 gray human symbols. One changes to pink.

UserWay goes above and beyond even the strictest WCAG requirements with our proprietary Dyslexia Friendly Font.The screen returns to the presenter standing at a computer desk in an office.

A popup briefly appears with the text, “Exceed even the strictest WCAG standards.”

UserWay crafted this custom typeface after extensive research into the mechanics of dyslexia fluency, reading accuracy, and comprehension.The video cuts to a dark background. An infographic briefly appears that shows how the Dyslexia Friendly Font is different from other fonts.

The infographic slides off the top of the page and is replaced from below by a paragraph of text.

A vertical line swipes across the text to show how it changes when the Dyslexia Friendly Font is applied.

Users can now look up idioms, acronyms, and complex words without leaving your site, thanks to a powerful dictionary with audio support.The screen splits with a list on the left side and the presenter on the right.

The list text:
Accessible Dictionary Support
1. Idioms
2. Acronyms
3. Complex Words

The list slides off the screen and the presenter fills it again.

The UserWay widget pops on the right side of the screen.

A cursor appears and types a word into the dictionary search box. The definition appears directly below the search box.

The widget disappears.

In addition to being a WCAG requirement, it ensures your content is more accessible to readers of all levels.A popup briefly appears with the text, “Ensure your content is accessible to readers of all levels.”
UserWay also offers real-time statistics and metrics that provide insights into how your users are using the widget to modify and enhance their experience on your site.The screen splits with space for graphics on the left side and the presenter on the right.

An icon of a line graph appears on the left side. Text is displayed above it that reads “Real-Time Statistics.”

The icon and text slide off the screen and the presenter fills it again.

A popup briefly appears with the text, “Access real time usage statistics & metrics.”

These statistics tell a powerful story about the most frequently-used accessibility features, which you can learn from to optimize the user experience on your website.The widget UI appears on the right side of the screen. It shows a list of statistics, including the number of widget loads, widget opens, and how many times each accessibility feature was used.

All of the usage statistics increase in a blur.

The widget UI then disappears.

Those are just a few of the many enhancements UserWay makes available to your end-users.A popup briefly appears with the text, “This data helps you optimize your site’s UI & UX.”
Part 3: Accessibility Fine-TuningThe video cuts to a dark background. An infographic appears with three icons arranged horizontally. Lines connect the icons together.

The text under the left icon reads “AI & Automation.”

The text under the middle icon reads “User-Triggered Enhancements.”

The text under the right icon reads “Accessibility Fine-Tuning.”

The third part of this demo shows UserWay’s tools that help ensure that your website’s accessibility is fully aligned with your brand.The screen returns to the presenter standing at a computer desk in an office.

A popup briefly appears with the text, “Ensure the widget matches your brand.”

After deploying UserWay on your site, the first thing you’ll notice is the universal symbol for accessibility.A blue circle icon appears on the right side of the screen. It contains an illustration of a human with its arms pointed outward.
This can be customized to align with your organization’s brand.
For example, you can change its color, size, and position.An example website appears in the bottom-right corner. The universal symbol for accessibility moves onto it.

The color, size and position of the icon changes.

You can even replace it with your own custom icon.The icon changes to purple and contains an illustration of a human in a wheelchair.

The icon and website example move off the screen.

Additional branding options allow you to feature your organization’s logo in the widget itself.The UserWay Widget appears on the right side of the screen.

The parts that are blue change to red. The logo at the bottom changes to a different one.

The widget disappears.

UserWay empowers members of your team to independently modify the accessibility layer of your site without the help of software engineers and frontend developers.A popup briefly appears with the text, “Easily access your site’s accessibility layer without relying on developers.”

The UserWay Widget appears on the right side of the screen.

A cursor appears and clicks the Manage button in the bottom-right corner.

The widget UI changes to display the Settings options.

The cursor then clicks the Remediations button.

The widget UI changes to display the Remediations options.

Simply open the ARIA editor to edit the accessibility attributes for any element on the page.The cursor clicks the Launch The Aria Editor button.

The widget UI changes to display a list of attributes.

The cursor clicks one, then its html code appears below it.

The code is edited and then the widget closes.

For example, on this element, the screen reader announces…The video cuts to a dark background. A sample website product page slides into view.

Three products are shown. Each has a photo, a name, a price, and a link that reads “View Product.”

The first product is a deck of cards. Its name is listed as “007 Deck of Cards.”

A cursor appears and clicks the name.

[Screen reader: Zero zero seven deck of cards. Link.]The spoken text is displayed near the bottom of the screen.
To provide a better user experience, you can modify the screen reader’s output.

Simply click on any element on the page and update it.

The camera zooms out to display more of the product page. Now, eight products are visible along with a nav menu.

The cursor clicks on the 007 Deck of Cards name again.

A box opens with the following text:

UserWay Aria Editor
Click any element on the page to edit its label

The box also includes an area to edit the label.

The cursor moves to the text and changes the name from “007 Deck of Cards” to “Double-O Seven Deck of Cards.”

The box closes and the cursor clicks the name for the deck of cards again.

[Screen reader: “Double-o seven deck of cards. Link.]The spoken text is displayed near the bottom of the screen.
In this example, you can add helpful context that might be too long to fit on a button.The screen returns to the presenter standing at a computer desk in an office.
For example, this button reads “Sign Me Up,” and you hear…A sample website appears on the right side of the screen. It contains a logo, a heading, an image and a button.

The camera zooms in to make the button larger on the screen.

The button text is “Sign Me Up.”

[Screen reader: Sign me up for the latest deals and promotions. Button.]The video cuts to a dark background. The website example slides into the center of the screen.

The button becomes highlighted around its edge like it is being clicked.

The spoken text appears on the screen below the website example.

I’ve shown you how UserWay ensures your site is accessible and compliant with WCAG and ADA requirements and provides your business with an important protective legal framework.The screen returns to the presenter standing at a computer desk in an office.

A popup briefly appears with the text, “Easily meet all WCAG and ADA compliance requirements.”

The screen splits with space for graphics on the left side and the presenter on the right.

An animated graphic appears on the left side. Text is displayed under it that reads “Protective Legal Framework.”

The animation slides off the left side of the screen. The presenter then fills the screen.

With UserWay, your users will benefit from a seamless and accessible online experience while ensuring their civil rights are protected.A popup briefly appears with the text, “Seamless and compliant experience for all your users.”
Contact us today, or request a meeting with one of our team members by visiting UserWay.org.The video cuts to a dark background. An illustrated version of a web browser slides into the center of the screen.

The text “UserWay.org” types into the search bar.

The web browser illustration then slides out of view.

Thank you for helping make the web more accessible for everyone.An animated version of the UserWay logo appears.

Text appears beneath it that reads “An Accessible Internet. For Everyone.”

Explore UserWay’s Accessibility Widget