Last Comment Bug 1284235 - Suggest increasing visibility of default focus ring to improve usability/accessibility for keyboard users
: Suggest increasing visibility of default focus ring to improve usability/acce...
Status: NEW
: access
Product: Firefox
Classification: Client Software
Component: Disability Access (show other bugs)
: unspecified
: Unspecified Unspecified
-- normal with 1 vote (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
: :Gijs
Mentors:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2016-07-04 04:04 PDT by steve faulkner
Modified: 2016-11-18 06:42 PST (History)
8 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments

Description User image steve faulkner 2016-07-04 04:04:06 PDT
Whe a user navigates focusable elements such as links, using the keyboard, the visibility of the element with current focus is important for usability and accessibility. Currently the default focus ring CSS for links in Firefox is:

:-moz-any-link:-moz-focusring {
    outline: 1px dotted;
}

I find this difficult so see and kepp track of when navigating pages using the keyboard.

is it possible to bump the size up to make it easier to see?

example:


:-moz-any-link:-moz-focusring {
    outline: 2px dotted;
}
Comment 1 User image Marco Zehe (:MarcoZ) 2016-07-04 04:10:22 PDT
CC'ing a few people who might be able to help with this. Helen and Yura, you recently worked on the focus visibility stuff in the scope of the dev tools. Were there any talks about increasing visibility overall in Firefox?
Comment 2 User image Helen V. Holmes (:helenvholmes) (:✨) 2016-07-05 07:53:05 PDT
(In reply to Marco Zehe (:MarcoZ) from comment #1)
> CC'ing a few people who might be able to help with this. Helen and Yura, you
> recently worked on the focus visibility stuff in the scope of the dev tools.
> Were there any talks about increasing visibility overall in Firefox?

We didn't discuss overall visibility in Firefox. Our devtools journey went like this:

The biggest jumps were made in getting any sort of focus state enabled (devtools had lots of places where there were no focus states at all, and now there are). So that was easy-pickings, nothing > something.

For inputs/textareas, we relied on the prior work that members of the UX team had already completed from here: http://fxos-components.github.io/gaia-components/ (In order for these to work, dom.webcomponents.enabled needs to be set to true.)

For other components, we used the focusring in Comment #0. We never got any further than adding that focus ring.
Comment 3 User image Yura Zenevich [:yzen] 2016-07-07 13:35:30 PDT
Helen, do you think we should bring this up with a broader group? Perhaps you know the right person to point to?

I experimented with the blue box-shadow but it was a bit too intrusive for the markup view.
Comment 4 User image Yura Zenevich [:yzen] 2016-07-07 13:36:26 PDT
There was also a version with the outline being of a current font color.
Comment 5 User image Helen V. Holmes (:helenvholmes) (:✨) 2016-07-08 07:24:26 PDT
(In reply to Yura Zenevich [:yzen] from comment #3)
> Helen, do you think we should bring this up with a broader group? Perhaps
> you know the right person to point to?
> 
> I experimented with the blue box-shadow but it was a bit too intrusive for
> the markup view.

I definitely think we should. I don't know who the right person is exactly, so I think it would be best to bring up in our weekly UX meeting. 

If the answer is that there are no designs/no design thinking as of yet, I'll create a small prototype with some variations and present them to the larger team. I've already invited you to that meeting Yura, in the event thatdesigns aren't already created in which case I'll get those designs started.
Comment 6 User image jon.avila 2016-11-18 06:42:47 PST
Apple products such as VoiceOver apply a double border with one rectangle black and one white to ensure there is always high contrast on focus no matter what the background color of content is.  This isn't the only solution but I thought I mention this to get the conversation started about providing highly visible indication of focus in situations where you may not know the content behind the focus.  There are other methods such as XOR but that might cause the colors of the focus ring to change which could be confusing.

Note You need to log in before you can comment on or make changes to this bug.