andycochran
commented
8 years ago This is a very well-thought-out proposal. I totally agree that we should—at the very least—add a warning to the Accessibility page about the negative effects outline:none.
But before we just rip What Input out of Foundation, we should consider the reasons why it was added: It's a common practice for designers to add :focus { outline: none; } to their every project. We knew if we did nothing, this line of harmful CSS would sneak its way into tons of apps. What Input was an attempt to thwart this practice.
Maybe instead of hardcoding outline:none, the What Input mixin could use a reasonable variable from _settings.scss? Something like…
// _settings.scss
$whatinput-mouse: 1px solid darken($primary-color, 15%);// util/_mixins.scss
@mixin disable-mouse-outline {
[data-whatinput='mouse'] & {
outline: $whatinput-mouse;
}
}(Of course, disable-mouse-outline isn't semantic and should also be changed.)
Then, heeding our warnings, the setting could be easily changed to none. And with What Input in place, apps are better off than they'd be with the ham-fisted :focus { outline: none; }.
Thank you for bringing this up, @joe-watkins.
joe-watkins
kball
brettsmason
In the name of web accessibility, I'd like to propose the removal of What Input as a dependency of Foundation. I understand that it is mainly in place to appease clients and picky designers in regards to focusable elements and their focus ring but it truly can hurt the built-in / free awesome power of focus state that web browsers offer us.
In almost every accessibility audit that I've done that fails WCAG 2.0 AA guidelines
outline: none;is the number 1 culprit for failure. This fails the W3C's WCAG 2.0 AA 2.4.7 Focus Visible guideline.I love how the team here puts accessibility at top of mind for components and it's a shame that in the documentation we are encouraging the removal of outlines which many users rely on to know where they are in the UI.
There is no guarantee that a keyboard user isn't a mouse user and the other way around. Many users jump around from input mechanism to input mechanism. This could be eye tracking software, speech recognition, a sip and puff device, a joystick, a single on/off button, a pointing stick, a braille embosser, a mouse, touchpad, touchscreen and more!
To assume the user is only a keyboard user and only they benefit from visual focus state in the UI isn't best practice and I feel we shouldn't be encouraging this approach.
I've addressed this concern with the author of What Input with this thread: Weird behavior when the mouse is moved outside the window and then in again #17 and check out this PR that was merged by the author which adjusts his readme documentation in a way that supported the removal of encouraging
outline: none;for alternative focus states.If this is the only use case for What Input is to remove outlines I propose removing it as a dependency and remove that section from the Accessibility page of Foundation's documentation. This could be turned into an informative / instructional section about the importance of focus state. (I'd be happy to write)
Mouse users (even though there is no such thing really) need outlines as well!
If there is no way that we can get this anti-pattern removed from the framework and documentation I recommend we put a large warning with that section on the Accessibility page that this approach harms accessibility and does not conform to the WCAG 2.0 2.4.7 guideline.