1744467 - Do "More from Mozilla" a11y audit and land key fixes before any potential rollout (97 at the earliest)

Status: RESOLVED FIXED

(Firefox :: Messaging System, defect, P1)

Description

[Dan Mosedale (:dmosedale, :dmose)]

In order to get More from Mozilla ready for a potential rollout, we need to do an a11y audit and any necessary fixes.

Known issues pre-audit: (many thanks to Gijs and Mark for finding these!)

• get a11y opinion on proper a11y role for QR code image itself
• add ALT text string for QR code image itself, unless the above opinion renders it unnecessary
• The Get VPN/Get Rally buttons don't work with the keyboard focus then enter/space. It reacts to space as if it should work but nothing happens (bug 1744480)
• The font size on the QR code seems too small IMO (bug 1744477).

Comment 1

[Dan Mosedale (:dmosedale, :dmose)]

Setting this to 96.3 (which is really 97.1, but bugzilla doesn't know about that yet), because we want to give the a11y folks enough lead time, and we don't want to lose track of it.

Comment 2

[Emily McMinn :emcminn]

To trigger "More From Mozilla":

open "about:config"
Set pref ‘browser.preferences.moreFromMozilla’ as true
Set ‘browser.preferences.moreFromMozilla.template’ as a string and enter ‘simple’ (no quotes)
Open Settings -> MoreFromMozilla page (about:preferences#moreFromMozilla)

Comment 3

[Emily McMinn :emcminn]

Description:
Please provide an explanation of the feature or change. Include a description of the user scenario in which it would be used and how the user would complete the task(s).
Screenshots and visual UI specs are welcome, but please include sufficient accompanying explanation so that blind members of the accessibility team are able to understand the feature/change.

How do we test this?
If there is an implementation to test, please provide instructions for testing it; e.g. setting preferences, other preparation, how to trigger the UI, etc.

open "about:config"
Set pref ‘browser.preferences.moreFromMozilla’ as true
Set ‘browser.preferences.moreFromMozilla.template’ as a string and enter ‘simple’ (no quotes)
Open Settings -> MoreFromMozilla page (about:preferences#moreFromMozilla)

When will this ship?
Tracking bug/issue:
Design documents (e.g. Product Requirements Document, UI spec): https://www.figma.com/file/dRT7zeJsSeYmAxfWnWGl4u/More-from-Mozilla?node-id=932%3A4870
Engineering lead:
Product manager:

The accessibility team has developed the Mozilla Accessibility Release Guidelines which outline what is needed to make user interfaces accessible:
https://wiki.mozilla.org/Accessibility/Guidelines
Please describe the accessibility guidelines you considered and what steps you've taken to address them:

Describe any areas of concern to which you want the accessibility team to give special attention:

• get a11y opinion on proper a11y role for QR code image itself
• add ALT text string for QR code image itself, unless the above opinion renders it unnecessary

Comment 4

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:tspurway, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 5

[James Teh [:Jamie]]

Thanks for requesting a11y review. Sorry for the delay.

I took a look at this with the NVDA screen reader. Overall, this looks pretty good to me. A few thoughts:

1. While it could be argued that labelling the QR code image itself is redundant for a screen reader user (since it doesn't provide additional information), I think I'd prefer to see it exposed. It certainly isn't decorative or presentational; it has semantic value. Furthermore, exposing it might assist a low vision user or a screen reader user using a touch screen to locate the code. I'd suggest role="img" and a label of "QR code" or "QR code to download Firefox Mobile".
2. The groupbox element is currently getting a label of "Firefox Mobile". Arguably, that's an a11y engine quirk - XUL groupboxes take the first label descendant as their label - but changing this now would probably break a bunch of stuff. I think we can just give this role="presentation"; this is very document-like anyway and there are already clearly marked headings for the various sections.
3. I do see the VPN button (which works well here), but I don't see a button for Rally. I wonder if that's because I'm in Australia? If it's implemented exactly the same as the VPN button, I probably don't need to test it. That said, if there's some way to enable this for me, please let me know and I'll take it for a spin.

I'll ask someone else on my team to audit for visual a11y issues. Thanks.

Comment 6

[Morgan Reschenberg [:morgan]]

Hi!
For reference below:

Windows HCM can be enabled in windows settings > accessibility > contrast themes > select theme from dropdown > apply
Mac OS HCM can be enabled in System Preferences > Accessibility > display > increase contrast (note this will also enable 'reduce transparency')
FF (firefox) HCM can be enabled in about:preferences > colors > dropdown = always and is automatically enabled when windows HCM is on

Here's some feedback for visual accessibility:

1. "Send an email to your phone" is a link but does not have link styling -- it looks like this is true in the figma file as well. I flagged this to the designer and they've updated the figma file. This is also an issue in high contrast mode on mac OS, but strangely not an issue on windows with high contrast mode (HCM).

1 (b) Also, normally our links in about:preferences are blue without an underline, and then they gain an underline on hover. Here, the links already have underlines and instead change color very, very slightly on hover. The links here should be adjusted to match the rest of preferences. This has also been flagged and updated in figma.

1 (c) In windows HCM and macOS increase contrast, links on this page have no hover styling.

2. When viewed in high contrast mode on macOS, the contrast between the text of the page and the background decreases. It should increase or stay the same. I'll attach a screenshot here. I think this has to do with #3.

3. The sub heading text is styled as "inactive" in windows high contrast mode, but I think it should be styled as regular content text. Though the text is lighter in the figma mock up it isn't semantically inactive or unavailable, so it should use the regular CanvasText or WindowText color. I'll attach a screenshot for this as well.

4. With macOS Increase Contrast and FF HCM enabled, the background of the QR "view" remains slightly visible against the page background -- I don't have a strong opinion on this one way or another. If you'd like for the QR code section to have a contrasting background from the rest of the page, it should have a 1px solid currentColor border and a background color the same as the preferences page. If you want it to blend into the background, it should match the background color and have no border. Either way, though, the background color should be changed since it adds ghosting to the page otherwise. See screenshot. It'd also be fine to style this like we do the "An extension, facebook containers, requires container tabs" callout on the general settings page, or the standard/strict/custom boxes on the privacy settings page.

I think this is all I have for now :) I also checked responsiveness at different zoom levels, font scaling, invert colors, focus styling, and general appearance light/dark mode on macOS and windows.

Comment 7

[Morgan Reschenberg [:morgan]]

Attachment: macOS with increase contrast only

Note how text color and background color contrast are lower than when viewed in dark mode

Comment 8

[Morgan Reschenberg [:morgan]]

Attachment: macOS increase contrast & FF HCM, QR view

Comment 9

[Morgan Reschenberg [:morgan]]

Attachment: Windows HCM Inactive text styling example

Comment 10

[Morgan Reschenberg [:morgan]]

Attachment: macOS Increase Contrast & FF HCM & use system colors, QR view

Comment 11

[Morgan Reschenberg [:morgan]]

It's hard to see on that last ^ screenshot, but there's a slight difference between the QR view background and the page background, same as in the attachment in #c8

Comment 12

[Emily McMinn :emcminn]

Attachment: Bug 1744467 - A11y review updates for More From Mozilla

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ed65c813e8a8
A11y review updates for More From Mozilla r=preferences-reviewers,fluent-reviewers,pdahiya,flod,Gijs

Comment 14

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/ed65c813e8a8