1889748 - [toolbar redesign] [a11y] Make sure voice search and QR reader button have big enough tap target

Status: NEW

(Fenix :: Toolbar, defect, P3)

Description

[Roger Yang [:royang]]

Make sure there are 44*44 tap target around the voice search and QR reader button. figma

Comment 1

[Chris Peterson [:cpeterson]]

Roger says this bug affects both the current and new toolbar designs, but he recommends we only fix it in the new toolbar design.

Comment 2

[Chris Peterson [:cpeterson]]

Setting toolbar redesign's Release blockers to priority P3 until we finish fixing our Beta experiment blockers.

Comment 4

[Roger Yang [:royang]]

Also please make sure to check reader mode, translations, refresh, share. All action buttons should be the right tap size

Comment 5

[Chris Peterson [:cpeterson]]

This is an address bar bug.

Comment 6

[Chris Peterson [:cpeterson]]

Aarjav says the buttons should use WCAG's recommended target size of 44 x 44 dp: https://www.w3.org/WAI/WCAG21/Understanding/target-size

Comment 9

[Chris Peterson [:cpeterson]]

QA runs the Android Accessibility Scanner as part of Nightly feature testing, so we should fix the toolbar's a11y issues before asking for Nightly QA.

Comment 10

[Anna Yeddi [:ayeddi]]

It's expected that interactive target areas are to be 48dp or larger to allow users with limited dexterity and users on the go to better target and tap controls (per WCAG 2.2 Level AAA Success Criteria 2.5.5 and 2.5.8 Target Size (Enhanced and Minimum)) - the 44x44 is for CSS pixels which could be vaguely transferred to 48x48 dp on mobile.

Editing to add: BBC Accessibility guide also recommends checking the size on a real phone screen for it to be at least 5mm on each dimension, which may be helpful for testing of the fix too.

Comment 11

[Delia Pop (Android QA)]

Attachment: A11y_Scanner.png

There are several issues related to accessibility scanner also reproducible in the latest Nightly 130.0a1 from 07/29 with the Toolbar Redesign feature enabled. Accessibility Scanner recommends to make some navigation bar/toolbar items larger: tabs menu, "+" new tab button, microphone icon, website security icon, default browser icon, URL, URL bar in app and custom tabs.
There are several tickets already opened for these issues (1900862, 1908793, 1910119, 1900817), but since this ticket will be targeted in android-toolbar-phase-2-nightly, we'll re-test this area in more depth during the feature testing in nightly phase 2.

Comment 12

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

Since nightly and release are affected, beta will likely be affected too.
For more information, please visit BugBot documentation.

Comment 13

[Aarjav [:aarjav]]

Why is 48 * 48 dp necessary for icon buttons? Further explanation provided by Anna Yeddi

• The size of the icon is not the main source of the size increase, because having a visually empty but actually tappable (interactive) space around the search icon is included in the size calculation. Also, for the minimum compliance with WCAG 2.2 it would be acceptable to have the touch/interactive target area for the image button to be, let’s say, 42 dp but the empty space between this touch area and any other interactive element to be 3 dp on each side (3+42+3 = 48).

Notes:
Automatic tools would still likely be flagging it, but it won’t be a WCAG 2.2 violation at the moment. But...
Font resizing on an OS level does not increase size of image buttons, and larger targets are, in general, easier to use, so going beyond the basic compliance is always encouraged

maybe those two examples from WCAG could help with the fix:
(LMK if you’d like me to add alt text to them) they’re screenshots from https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html - figure 10 and figure 5

For the mobile, there are no guidelines in the W3C accessibility documentation (yet, at least). The BBC page relies on the iOS and Android guidelines.
Within MoCo, accessibility severity-wise if the button would be 44 dp by 44 dp it would be a backlog a11y item at most. I still need to update the A11y Triage wiki page, but for the Android, we can go on with the following severity:
Severity 4 (S4): Interactive target areas between 42-48dp
Severity 3 (S3): Interactive target areas between 35 -41dp and
everything under 35dp -S2?