WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Firefox visual focus indication

for

Number of posts in this thread: 8 (In chronological order)

From: Beranek, Nicholas
Date: Thu, Nov 17 2016 11:02AM
Subject: Firefox visual focus indication
No previous message | Next message →

Hi folks,

In Firefox, we are experiencing many issues with visual focus indication. That is, the outline or "focus ring" that is supposed to appear for active elements, in many cases, does not exist or is very difficult to see. This is especially true for radio buttons and checkboxes. For radio buttons, we are unable to determine focus at all. For checkboxes, there is a 1px dotted outline on the right side alone, hardly enough to satisfy for proper visual focus indication. You can test this by tabbing to a radio button or checkbox and check for focus outline.

This is a major problem for the user. It is also a problem when testing. We could argue that a digital property is in direct violation of SC 2.4.7 Focus Visible by not providing visual focus indication in Firefox. In my mind, it violates 1.3.1 of UAAG 2.0 because Firefox is not providing "Active keyboard focus" on radio buttons and checkboxes.

So, my questions are the following:


* Are the folks at Mozilla doing anything to fix this bug?

* Of the bug reports that exist, are we doing anything to ensure Mozilla's engineers fix the focus indication bug? (Link to "radio button focus" search on bugzilla: https://bugzilla.mozilla.org/buglist.cgi?quicksearch=radio+button+focus)

* Have you done anything within your own CSS to compensate for this?

* Could this have something to do with Firefox taking to color property's value as the color for the focus outline?

Thank you so much for your time,

Nick Beranek
Capital One
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: chaals
Date: Thu, Nov 17 2016 11:14AM
Subject: Re: Firefox visual focus indication
← Previous message | Next message →

17.11.2016, 19:02, "Beranek, Nicholas" < = EMAIL ADDRESS REMOVED = >:
> Hi folks,
>
> In Firefox, we are experiencing many issues with visual focus indication. That is, the outline or "focus ring" that is supposed to appear for active elements, in many cases, does not exist or is very difficult to see. This is especially true for radio buttons and checkboxes. For radio buttons, we are unable to determine focus at all. For checkboxes, there is a 1px dotted outline on the right side alone, hardly enough to satisfy for proper visual focus indication. You can test this by tabbing to a radio button or checkbox and check for focus outline.
>
> This is a major problem for the user.

Agreed

> It is also a problem when testing. We could argue that a digital property is in direct violation of SC 2.4.7 Focus Visible by not providing visual focus indication in Firefox. In my mind, it violates 1.3.1 of UAAG 2.0 because Firefox is not providing "Active keyboard focus" on radio buttons and checkboxes.

Agreed that it fails to meet the UAAG requirement effectively. A potential remediation the author can provide is to add a style :focus - and :hover

See also https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C15

> So, my questions are the following:
>
> * Are the folks at Mozilla doing anything to fix this bug?

It's assigned and tested: https://bugzilla.mozilla.org/show_bug.cgi?id‘3103 But it seems to have sat around for a while since then. If anyone has a login for Mozilla's bugzilla, it might help to close the multiple duplicates that are visible from https://bugzilla.mozilla.org/buglist.cgi?quicksearch=radio+button+focus as a reminder that this continually gets reported.

cheers

> * Of the bug reports that exist, are we doing anything to ensure Mozilla's engineers fix the focus indication bug? (Link to "radio button focus" search on bugzilla: https://bugzilla.mozilla.org/buglist.cgi?quicksearch=radio+button+focus)
>
> * Have you done anything within your own CSS to compensate for this?
>
> * Could this have something to do with Firefox taking to color property's value as the color for the focus outline?
>
> Thank you so much for your time,
>
> Nick Beranek
> Capital One

--
Charles McCathie Nevile - web standards - CTO Office, Yandex
= EMAIL ADDRESS REMOVED = - - - Find more at http://yandex.com

From: Beranek, Nicholas
Date: Thu, Nov 17 2016 1:37PM
Subject: Re: Firefox visual focus indication
← Previous message | Next message →

Thank you for your response, Charles. I believe it's good practice to provide highly visible focus indication anyway even though it's sufficient to rely on the browser. In cases where we cannot, in fact, rely on the browser, that's where subjectivity comes into play. It can become a slippery slope when you start compensating for various defects, hence my question about anyone doing something about it.

I think I'll continue to mark this as either a "User Agent" issue or "Best Practice" as my teams are normally following the sufficient technique to rely on the browser. I've got teams that have also created some really good visual focus indication based on the background color. It can definitely be an improvement when done right.

I do have one gripe about SC 2.4.7 Focus Visible: How do you quantify "highly visible" in reference to an outline? Proper contrast at, say, 4.5 to 1? I speak in reference to the sufficient technique listed at the following link: https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G195

Thank you,

Nick Beranek
Capital One

From: Steve Faulkner
Date: Thu, Nov 17 2016 1:45PM
Subject: Re: Firefox visual focus indication
← Previous message | Next message →

there is a bug i filed a while back
https://bugzilla.mozilla.org/show_bug.cgi?id84235

--

Regards

SteveF
Current Standards Work @W3C
<http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;

On 17 November 2016 at 18:02, Beranek, Nicholas <
= EMAIL ADDRESS REMOVED = > wrote:

> Hi folks,
>
> In Firefox, we are experiencing many issues with visual focus indication.
> That is, the outline or "focus ring" that is supposed to appear for active
> elements, in many cases, does not exist or is very difficult to see. This
> is especially true for radio buttons and checkboxes. For radio buttons, we
> are unable to determine focus at all. For checkboxes, there is a 1px dotted
> outline on the right side alone, hardly enough to satisfy for proper visual
> focus indication. You can test this by tabbing to a radio button or
> checkbox and check for focus outline.
>
> This is a major problem for the user. It is also a problem when testing.
> We could argue that a digital property is in direct violation of SC 2.4.7
> Focus Visible by not providing visual focus indication in Firefox. In my
> mind, it violates 1.3.1 of UAAG 2.0 because Firefox is not providing
> "Active keyboard focus" on radio buttons and checkboxes.
>
> So, my questions are the following:
>
>
> * Are the folks at Mozilla doing anything to fix this bug?
>
> * Of the bug reports that exist, are we doing anything to ensure
> Mozilla's engineers fix the focus indication bug? (Link to "radio button
> focus" search on bugzilla: https://bugzilla.mozilla.org/
> buglist.cgi?quicksearch=radio+button+focus)
>
> * Have you done anything within your own CSS to compensate for this?
>
> * Could this have something to do with Firefox taking to color
> property's value as the color for the focus outline?
>
> Thank you so much for your time,
>
> Nick Beranek
> Capital One
> >
> The information contained in this e-mail is confidential and/or
> proprietary to Capital One and/or its affiliates and may only be used
> solely in performance of work or services for Capital One. The information
> transmitted herewith is intended only for use by the individual or entity
> to which it is addressed. If the reader of this message is not the intended
> recipient, you are hereby notified that any review, retransmission,
> dissemination, distribution, copying or other use of, or taking of any
> action in reliance upon this information is strictly prohibited. If you
> have received this communication in error, please contact the sender and
> delete the material from your computer.
> > > > >

From: chaals
Date: Thu, Nov 17 2016 5:54PM
Subject: Re: Firefox visual focus indication
← Previous message | Next message →

17.11.2016, 21:37, "Beranek, Nicholas" < = EMAIL ADDRESS REMOVED = >:
> Thank you for your response, Charles. I believe it's good practice to provide highly visible focus indication anyway even though it's sufficient to rely on the browser. In cases where we cannot, in fact, rely on the browser, that's where subjectivity comes into play. It can become a slippery slope when you start compensating for various defects, hence my question about anyone doing something about it.

Right. For normal HTML text and more-or-less unstyled widgets, I am inclined not to provide anything, but for example in SVG I think it is generally useful to highlight where a user is at in stepping through a diagram - especially as you can't know what their own focus highlight is, and it may vanish against a background or outline a much larger segment of the image.

> I think I'll continue to mark this as either a "User Agent" issue or "Best Practice" as my teams are normally following the sufficient technique to rely on the browser. I've got teams that have also created some really good visual focus indication based on the background color. It can definitely be an improvement when done right.

Yep.

> I do have one gripe about SC 2.4.7 Focus Visible: How do you quantify "highly visible" in reference to an outline? Proper contrast at, say, 4.5 to 1? I speak in reference to the sufficient technique listed at the following link: https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G195

Good question. It's probably worth raising an issue...

cheers

--
Charles McCathie Nevile - web standards - CTO Office, Yandex
= EMAIL ADDRESS REMOVED = - - - Find more at http://yandex.com

From: Jonathan Avila
Date: Fri, Nov 18 2016 1:31PM
Subject: Re: Firefox visual focus indication
← Previous message | Next message →

> This is a major problem for the user. It is also a problem when testing. We could argue that a digital property is in direct violation of SC 2.4.7 Focus Visible by not providing visual focus indication in Firefox. In my mind, it violates 1.3.1 of UAAG 2.0 because Firefox is not providing "Active keyboard focus" on radio buttons and checkboxes.

I would consider whether the ability to see the focus is because of the technique used or because of how the user agent works in determining conformance. For example, we have run into examples where certain techniques such as floating images in links can cause the visual indication of focus to go away. In other cases use of CSS to create custom radio buttons or the use of CSS over top of standard radio buttons to create a custom look caused the issue. Thus, if the issue occurs on a standard control that hasn't been affected by CSS then it seems like it is not the fault of the author although there are things you can do to overcome the issue. Other times things we do in CSS can cause these problems and authors need to address them or apply visible focus indicators using other techniques to compenstate.

Jonathan

Jonathan Avila
Chief Accessibility Officer
SSB BART Group 
= EMAIL ADDRESS REMOVED =
703.637.8957 (Office)

Visit us online: Website | Twitter | Facebook | Linkedin | Blog
Join SSB at Accessing Higher Ground This Month!

The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.


From: JP Jamous
Date: Fri, Nov 18 2016 3:56PM
Subject: Re: Firefox visual focus indication
← Previous message | Next message →

I have been keeping an eye on this thread and have some questions.

1. Are we talking about browser default keyboard focus? I mean no CSS or any other styles.
2. What version of Firefox did you start noticing this issue in?
3. Is it only in Firefox or does it occur in other agents including Internet Explorer, Chrome or Safari?

Since we push our devs hard not to touch the keyboard focus by overriding it using CSS, your discussion got my interest. Users who use a certain browser would be familiar with this browser's keyboard focus. So it is best to keep it less code on our site and convenient to the user.

If all of those issues are occurring with Firefox, we would need some answers. At least the WAI community should be able to request an explanation. Don't you guys agree? Just my 2 cents.


From: Beranek, Nicholas
Date: Mon, Nov 21 2016 8:58AM
Subject: Re: Firefox visual focus indication
← Previous message | No next message

Hi JP, good questions.

1. Yes, we are talking about the default browser visual focus indicator in Firefox.
2. The issue appeared as early as September, 2013. That puts it at Firefox 24: [bug report] https://bugzilla.mozilla.org/show_bug.cgi?id‘3103
3. From my experience, this only appears to happen in Firefox, at least with the most recent versions of those browsers you mentioned.

There are several bug reports within Bugzilla as I mentioned, but most of the statuses are set to New or Assigned without any resolution. I found a pull request for that bug but it doesn't appear to be pulled yet. You can find it here: https://reviewboard.mozilla.org/r/31165/diff/1#index_header

I agree with you in that I'd rather not have developers compensate for the browser. We need to be able to rely on the sufficient technique "G165: Using the default focus indicator for the platform so that high visibility default focus indicators will carry over".

Nick Beranek
Capital One