Closed Bug 1653322 Opened 7 months ago Closed 7 months ago

Improve accessibility of the "importable sites" images on about:welcome

Categories

(Firefox :: Messaging System, enhancement, P1)

enhancement

Tracking

()

VERIFIED FIXED
Firefox 80
Iteration:
80.2 - July 13 - July 26
Tracking Status
firefox80 --- verified

People

(Reporter: emcminn, Assigned: emcminn)

References

(Blocks 1 open bug)

Details

Attachments

(3 files)

As per @marcoz's accessiblity review, the suggested importable sites images on the import screen of about:welcome are not properly accessible.

  • At minimum, an aria-role of region should be added to the surrounding div, to allow screen readers to pick up the text in the aria-label.

However, this approach won't be fully accessible to lots of users (those using touch screens, and those using keyboards/switches/other non-mouse input devices, for example - anyone not able to hover over the div will not see the tooltip). If the info in the tooltip is important, we should consider having it in a paragraph on screen, which is the simplest (and most accessible) solution.

Flags: needinfo?(abenson)

Here's a link to the updated spec with the text positioned at the bottom of the page. Please see Meridel's copy deck, linked below, for final copy once approved by legal.

Note that the steps indicators move up 10px to accommodate the text and should be changed on all screens so they appear in the same position throughout the flow.

Figma Spec:
https://www.figma.com/file/KqQZwwLhft9cUIcBtMVmbz/Desktop-First-Run?node-id=1750%3A449

Copy:
https://docs.google.com/presentation/d/1cnhgebW-8VKsDAHp71GRLZYsXaWKJD7_mgJzhLTP2Vk/edit?ts=5f10a048#slide=id.g8d9263287a_0_0

Flags: needinfo?(abenson)
Assignee: nobody → emcminn
Type: task → enhancement
Iteration: --- → 80.2 - July 13 - July 26
Priority: -- → P1

NI Aaron for UI review, thanks

Flags: needinfo?(abenson)

Looks good!

Flags: needinfo?(abenson)
Pushed by emcminn@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/71bb0ab476bb
Converted import topsites "disclaimer" tooltip to a footer r=pdahiya,fluent-reviewers,MarcoZ,flod
Status: NEW → RESOLVED
Closed: 7 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 80

I have verified this enhancement and I can confirm that the disclaimer is successfully displayed on the import screen from the "about:welcome" page.

Verified using the latest Firefox Nightly (80.0a1 Build ID - 20200723095657) installed on Windows 10 x64, Mac 10.15, and Ubuntu 18.04 x64.

Status: RESOLVED → VERIFIED

Comment on attachment 9164461 [details]
Bug 1653322 - Converted import topsites "disclaimer" tooltip to a footer

Beta/Release Uplift Approval Request

  • User impact if declined: Legal disclaimer and import sites tooltips aren't accessible/visible to anyone not using a mouse. (able to hover over the import sites images.)
  • Is this code covered by automated tests?: Yes
  • Has the fix been verified in Nightly?: Yes
  • Needs manual test from QE?: No
  • If yes, steps to reproduce:
  • List of other uplifts needed: None
  • Risk to taking this patch: Low
  • Why is the change risky/not risky? (and alternatives if risky): HTML/CSS change; no change to function.
  • String changes made/needed: onboarding-import-sites-info changed to onboarding-import-sites-disclaimer in onboarding.ftl
Attachment #9164461 - Flags: approval-mozilla-beta?
Attachment #9164461 - Flags: approval-mozilla-beta?
You need to log in before you can comment on or make changes to this bug.