Suggest increasing visibility of default focus ring to improve usability/accessibility for keyboard users

NEW
Unassigned

Status

()

Firefox
Disability Access
a year ago
a month ago

People

(Reporter: steve faulkner, Unassigned)

Tracking

({access})

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

a year ago
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;
}
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?
Flags: needinfo?(yzenevich)
Flags: needinfo?(hholmes)
Keywords: access
(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.
Flags: needinfo?(hholmes)
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.
Flags: needinfo?(yzenevich) → needinfo?(hholmes)
There was also a version with the outline being of a current font color.
(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.
Flags: needinfo?(hholmes)

Comment 6

7 months ago
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.

Comment 7

a month ago
Any news about the focus ring visibility improvement?
You need to log in before you can comment on or make changes to this bug.