Page MenuHomePhabricator

Alt text for onboarding images: Add a link, Add an image and Add a section image
Closed, ResolvedPublic

Description

Request originating in this task: T329037: Refactor the "Add a link" on-boarding dialog to Vue

User story & summary:

As an editor utilizing a screenreader, I want to understand what an image represents, so that I can onboard and complete structured tasks.

Background & research:

This task is important because it improves the accessibility of structured tasks.

Alt text

Add a link

IllustrationAlt text
Screenshot 2023-02-07 at 12.39.01 (1).png (1×1 px, 132 KB)
Illustration of the moon article, with the articles Earth and Satellite being suggested as links that could be added to the associated text.
Screenshot 2023-02-07 at 12.39.11 (2).png (1×1 px, 107 KB)
Illustration of the moon article, next to the article there's a robot representing a machine suggestion - asking if a word on the Moon article should be linked to the Cheese article.
Screenshot 2023-02-07 at 12.39.19 (1).png (1×1 px, 94 KB)
Illustration of an article sentence showing link suggestions for two different words. Next to the suggestion there's a blue check icon and a red cross icon for the options to accept or reject the suggestion.

Add an image to an unillustrated article

IllustrationAlt text
Desktop-SE-AI-Onboarding 1.png (566×506 px, 42 KB)
Illustration of the moon article. Next to the article illustration there's a robot asking if an image of the moon should be added to the article.
Desktop-SE-AI-Onboarding 2.png (566×506 px, 27 KB)
Illustration of an article. An image is being suggested for the article. The image suggestion is zoomed in to highlight that the image suggestion and details should be reviewed.
Desktop-SE-AI-Onboarding 3.png (566×506 px, 22 KB)
Illustration of an article. At the bottom of the article there’s an image suggestion.
Desktop-SE-AI-Onboarding 2 (1).png (566×506 px, 33 KB)
Illustration of an article. An image is being suggested for the article. Inside of the suggestion there are three icon buttons for the options available: a checkmark to accept the suggestion, a cross to reject the suggestion, and an arrow to move to the next step.

Add an image to an article section

IllustrationAlt text
Desktop-SE-AI-Onboarding 1 (1).png (566×506 px, 45 KB)
Illustration of an article section. Next to the article there’s a robot asking if an image of the moon should be added to the article section.
Desktop-SE-AI-Onboarding 2 (2).png (566×506 px, 29 KB)
Illustration of an article section with an image suggestion. The image suggestion is zoomed in to highlight that the image suggestion and details should be reviewed.
Desktop-SE-AI-Onboarding 3 (1).png (566×506 px, 25 KB)
Illustration of an article section. An image is being suggested for that section.
Desktop-SE-AI-Onboarding 4.png (566×506 px, 36 KB)
Illustration of an article section. An image is being suggested for that section. Inside of the suggestion there are three icon buttons: a checkmark to accept the suggestion, a cross to reject the suggestion, and an arrow to move to the next item.
Acceptance Criteria:

Given I'm completing onboarding for a structured task,
When I encounter an onboarding image,
Then it includes alt text that is short, descriptive, and follows alt-text best practices

Event Timeline

Thank you @KStoller-WMF for creating this task :) I updated the task description with the alt text and also commented on the onboarding tasks for Add a link (T329037: Refactor the "Add a link" on-boarding dialog to Vue) and Add an image (T329038: Refactor the "Add an image" on-boarding dialog to Vue).

KStoller-WMF lowered the priority of this task from Medium to Low.Jun 9 2023, 5:26 PM

Moving to low priority: completing the "add an image" task will be difficult for anyone who needs a screenreader / alt-text assistance.

Change 932812 had a related patch set uploaded (by KMorgan; author: KMorgan):

[mediawiki/extensions/GrowthExperiments@master] Structured Tasks: Add alt text in onboarding

https://gerrit.wikimedia.org/r/932812

Sgs changed the task status from Open to In Progress.Jul 13 2023, 3:37 PM
Sgs moved this task from In Progress to Code Review on the Growth-Team (Sprint 0 (Growth Team)) board.

Change 932812 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Structured Tasks: Add alt text in onboarding

https://gerrit.wikimedia.org/r/932812

Urbanecm_WMF changed the task status from In Progress to Open.Aug 7 2023, 11:35 AM
Urbanecm_WMF moved this task from Code Review to QA on the Growth-Team (Sprint 0 (Growth Team)) board.

Checked on cswiki wmf.20 - @KStoller-WMF: below are the items that might need adjustments:

Add an image to an unillustrated article

  • only one image suggestion is provided - Next arrow is not present (the Next arrow is present only for Add link suggestions)
IllustrationAlt text
Desktop-SE-AI-Onboarding 2 (1).png (566×506 px, 33 KB)
Illustration of an article. An image is being suggested for the article. Inside of the suggestion there are three icon buttons for the options available: a checkmark to accept the suggestion, a cross to reject the suggestion, and an arrow to move to the next step
Screen Shot 2023-08-08 at 1.58.23 PM.png (690×992 px, 196 KB)

Add an image to an article section

  • only one image suggestion is provided - Next arrow is not present
IllustrationAlt text
Desktop-SE-AI-Onboarding 4.png (566×506 px, 36 KB)
Illustration of an article section. An image is being suggested for that section. Inside of the suggestion there are three icon buttons: a checkmark to accept the suggestion, a cross to reject the suggestion, and an arrow to move to the next item.
Screen Shot 2023-08-08 at 2.10.47 PM.png (652×958 px, 211 KB)

Good catch, I remember that design discrepancy was discussed while reviewing onboarding designs.
My memory is that we ultimately decided that it was OK to simplify and stick with the current design. Although "Not sure" isn't an exact match to the > in the image or the alt text description, I think the underlying functionality is the same. Selecting "Not sure" will allow the editor to move to the next suggestion without accepting or rejecting the image.

I'm OK considering this task resolved, but @JFernandez-WMF please add a new Phab task if you think we need to either improve the design or adjust the alt text. Thanks!

Good catch, I remember that design discrepancy was discussed while reviewing onboarding designs.
My memory is that we ultimately decided that it was OK to simplify and stick with the current design. Although "Not sure" isn't an exact match to the > in the image or the alt text description, I think the underlying functionality is the same. Selecting "Not sure" will allow the editor to move to the next suggestion without accepting or rejecting the image.

Agree, in terms of functionality - "Not sure" moves a user to a new action as ">" button would do.