Back to guides

How to Add Image alts to Your Site with the Userway Widget

In this tutorial, we will outline the steps on how you can use UserWay’s AI to add missing image descriptions, known as “ alt images” to your site. We will also show you how to access these descriptions, and fine-tune them, to 100% match your brand.

Every image on your site should be accessible to visually impaired users. This means adding concise descriptions to each image so a screen reader can read them aloud, or, marking images as decorative so they’ll be ignored by screen readers. Let’s see how UserWay automatically generates image alts for product images in our demonstration eCommerce store.

Step 1: Choose the “Manage” Option

As the site owner, click on the widget to open it. At the bottom of the widget, click on “Manage.”

If you’re not signed in yet, type your email and password, then click “Sign in.”

Step 2: Choose the “Remediation” Option

Next, click on “Remediation.”

Choose the “Remediations for review” option.

Select the “Image Alts” option.

1 - Go to remediation - Alt image

Step 3: Outline the Changes

Closer to the top, you’ll notice a dropdown. Click here to decide if you would like to view the image alt fixes made to the “Current page” or to your “Entire site.”

Let’s check the remediations on the current page. Below the dropdown, there are two tabs. “To Do” and “Remediated.”

2 - review - ALT images

Step 4: Change the “Alt Image” Text

First, check the “To Do” tab. This shows the images or graphic elements that have been automatically tagged with alternative text by our AI, but you have not yet reviewed. The UserWay Widget automatically remediates all of your images at installation, so reviewing these image descriptions is optional.

For example, let’s look at this image. To find it on the page, just click it and you’ll scroll to that image. For this image, a description with the text “A woman wearing glasses” was given.

You can refine this description with any text you choose. Let’s change this to “A woman wearing our gold-rimmed glasses.”

3 - modify - ALT image

All of your changes are applied in real-time for all site visitors, which you can see in the on-page inspector. Voila! Now let’s look at this icon. UserWay’s AI has identified this icon as most likely decorative, suggesting that it does not convey critical information to the user.

To confirm this decision, simply click “approve decorative” and screen readers will ignore it.

4 - approve - descriptive ALT image

If your site is updated regularly, we suggest that you, or a member of your content team, review image alts periodically

Explore UserWay’s Accessibility Widget