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.
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.”
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.”
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.
If your site is updated regularly, we suggest that you, or a member of your content team, review image alts periodically
