1790490 - Add alt tags for images in about:welcome and spotlight modal

Status: RESOLVED FIXED

(Firefox :: Messaging System, enhancement, P1)

Description

[Ania]

As noted in the new onboarding a11y review, exposing metaphors used in illustrations would be a huge step up in an emotional experience for users of assistive technology, for users with low vision or without vision, as well as for users with cognitive difficulties, dyslexia who rely on a screen reader to better understand the content.

1. Let's please add alt tags (or aria-live tags) to the images used in onboarding on the left-hand side.
   We will add the text for each illustration here in Figma.

2. Let's please add alt tag to Firefox logo displayed above the text area on the right-hand side of each onboarding card:
   [Firefox Nightly/Firefox Beta/Firefox] logo

Comment 1

[Ania]

My sincere apologies, I have to kick off this ticket off the 107 train to 108. I got to plan localization review way too late, and we won't have final feedback from Francesco on whether the strings look good by Oct 14.

Comment 2

[Ania]

This has been reviewed by the localization team and strings are ready for engineering.
Thank you for your patience with this!

Comment 3

[Punam Dahiya [:pdahiya]]

Updating to remove blocking 107 Onboarding Meta bug. @emcminn please feel free to set priority P1 if the fix of this bug is targeting Fx108 Thanks!

Comment 4

[Emily McMinn :emcminn]

(In reply to Ania from comment #0)

As noted in the new onboarding a11y review, exposing metaphors used in illustrations would be a huge step up in an emotional experience for users of assistive technology, for users with low vision or without vision, as well as for users with cognitive difficulties, dyslexia who rely on a screen reader to better understand the content.

1. Let's please add alt tags (or aria-live tags) to the images used in onboarding on the left-hand side.
   We will add the text for each illustration here in Figma.

2. Let's please add alt tag to Firefox logo displayed above the text area on the right-hand side of each onboarding card:
   [Firefox Nightly/Firefox Beta/Firefox] logo

I'm going to put up my patch for #1 here && break #2 into a separate bug - the "logo" element is configurable and is used on other surfaces (most notably the Feature Callout in Firefox View) where it is something other than a Nightly/Beta/Firefox logo. Being able to localize the configurable alt prop is going to take some refactoring and might get kinda complex, so I think tracking it separately will work better than blocking this bug on it. :)

Comment 5

[Emily McMinn :emcminn]

Attachment: Bug 1790490 - Added alt tag div & strings for MR onboarding images

Comment 6

[Ania]

Thank you so much, Emily, that sounds good!

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4332c1ea6327
Added alt tag div & strings for MR onboarding images r=mviar,fluent-reviewers,flod

Comment 8

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/4332c1ea6327