E-mail List Archives
Thread: Visible focus
Number of posts in this thread: 9 (In chronological order)
From: Joseph Sherman
Date: Tue, Jan 03 2017 9:56AM
Subject: Visible focus
No previous message | Next message →
My web team is adding ":focus {outline: 1px dotted #444; }" to most elements after using "outline: 0;" in the CSS reset. I don't really like it since it's a bit hard to see, and less visible than the default focus outline in Chrome which it overrides. Technically I believe it is WCAG compliant, right?
Joseph
From: JP Jamous
Date: Tue, Jan 03 2017 10:23AM
Subject: Re: Visible focus
← Previous message | Next message →
Umm, what if the CSS breaks and does not load? Did they take that in consideration?
This should remain untouched and left to the browser's default outline. Some low vision folks might tweak their own using their browser's accessibility settings. If they do so then, forget about the CSS class your team has implemented.
I think it is a waste of time for the above reason. Also, it backfires on the user because the user might be more familiar with their browser's outline and do not want anything to intervene with that. That creates a bad user experience on your site.
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Joseph Sherman
Sent: Tuesday, January 3, 2017 10:56 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] Visible focus
My web team is adding ":focus {outline: 1px dotted #444; }" to most elements after using "outline: 0;" in the CSS reset. I don't really like it since it's a bit hard to see, and less visible than the default focus outline in Chrome which it overrides. Technically I believe it is WCAG compliant, right?
Joseph
From: Jared Smith
Date: Tue, Jan 03 2017 10:30AM
Subject: Re: Visible focus
← Previous message | Next message →
JP Jamous wrote:
> Umm, what if the CSS breaks and does not load? Did they take that in consideration?
>
> This should remain untouched and left to the browser's default outline.
If the CSS doesn't load, then it reverts to the browser's default.
A primary reason people turn off outlines is because they don't like
the visual appearance of the browser defaults - and this varies
greatly by browser. I don't think there's anything wrong with
customizing it - especially if it can be made visually appealing and
match the site's visual design.
WCAG doesn't address contrast for keyboard focus indicators. I believe
this is an item to hopefully be addressed in WCAG 2.1. Regardless of
what WCAG requires, users need visually distinctive focus outlines in
order to meaningfully navigate a site.'
Jared
From: Paul J. Adam
Date: Tue, Jan 03 2017 10:37AM
Subject: Re: Visible focus
← Previous message | Next message →
The problem is that WCAG does not define the terms "keyboard focus indicator" or "visible". They have definitions in other success criteria. I think that leaves it open to interpretation. If you say it's not "visible" then it's not right? Everyone else has a different opinion on what's visible or not visible.
2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)
https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html
Paul J. Adam
Accessibility Evangelist
www.deque.com
From: JP Jamous
Date: Tue, Jan 03 2017 10:44AM
Subject: Re: Visible focus
← Previous message | Next message →
Jared,
I agree with what you stated. I hope they address it in 2.1, because it keeps coming up. I think it should have guidelines related to browsers manufacturers and to developers. That way, the manufacturers provide a clear outline and developers can customize their own that would work with low vision folks.
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jared Smith
Sent: Tuesday, January 3, 2017 11:31 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Visible focus
JP Jamous wrote:
> Umm, what if the CSS breaks and does not load? Did they take that in consideration?
>
> This should remain untouched and left to the browser's default outline.
If the CSS doesn't load, then it reverts to the browser's default.
A primary reason people turn off outlines is because they don't like the visual appearance of the browser defaults - and this varies greatly by browser. I don't think there's anything wrong with customizing it - especially if it can be made visually appealing and match the site's visual design.
WCAG doesn't address contrast for keyboard focus indicators. I believe this is an item to hopefully be addressed in WCAG 2.1. Regardless of what WCAG requires, users need visually distinctive focus outlines in order to meaningfully navigate a site.'
Jared
From: Jared Smith
Date: Tue, Jan 03 2017 10:55AM
Subject: Re: Visible focus
← Previous message | Next message →
JP Jamous wrote:
> I think it should have guidelines related to browsers manufacturers and to developers. That way, the manufacturers provide a clear outline and developers can customize their own that would work with low vision folks.
You mean something like this -
https://www.w3.org/TR/UAAG20/#gl-interaction-highlight ?
Jared
From: Rakesh P
Date: Wed, Jan 04 2017 2:09AM
Subject: Re: Visible focus
← Previous message | Next message →
As I understand from one of my friend, Chrome has a default indicator of
light blue. I think unless the background is dark the light blue indicator
does not pass contrast. On the other hand, FireFox and IE shows black
dotted indicator which needs light background to have a good contrast. If
we need to serve the needs of all the three browsers author supplied CSS is
required. All these are good practices but are not WCAG violations. See
G165: Using the default focus indicator for the platform so that high
visibility default focus indicators will carry over
https://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G165
However, author supplied good contrast CSS technique is also recommended by
WCAG.
G195: Using an author-supplied, highly visible focus indicator
https://www.w3.org/TR/WCAG20-TECHS/G195.html
Thanks & Regards
Rakesh
www.maxability.co.in
On Tue, Jan 3, 2017 at 11:25 PM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
> JP Jamous wrote:
> > I think it should have guidelines related to browsers manufacturers and
> to developers. That way, the manufacturers provide a clear outline and
> developers can customize their own that would work with low vision folks.
>
> You mean something like this -
> https://www.w3.org/TR/UAAG20/#gl-interaction-highlight ?
>
> Jared
> > > > >
From: Beranek, Nicholas
Date: Wed, Jan 04 2017 7:46AM
Subject: Re: Visible focus
← Previous message | Next message →
Firefox will change the outline color to match the font color. This can be very effective unless the outline surrounds a dark button with light text on a light background (i.e. the light outline falls on the light background). We do have a property called outline-offset and, when set to a negative value, it pulls the light outline in to display on the dark background.
This is the most effective approach I have witnessed from a browser vendor, but it could still be improved. I was never crazy about the 1px dotted or dashed outlines, nor am I crazy about the box-shadow that Chrome applies. The real issue is that none of the sufficient techniques declares what exactly "highly visible" equates to. I remember we had this discussion before: http://webaim.org/discussion/mail_thread?threadx04
I feel like we should define "highly visible" in the next version of WCAG. Perhaps a 4.5 to 1 color contrast ratio for AA and 7 to 1 for AAA would be sufficient. We would then need to think about how to handle box shadows and determine a best practice for minimum border width (e.g. 2 pixels).
Nick
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Rakesh P
Sent: Wednesday, January 04, 2017 4:10 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Visible focus
As I understand from one of my friend, Chrome has a default indicator of light blue. I think unless the background is dark the light blue indicator does not pass contrast. On the other hand, FireFox and IE shows black dotted indicator which needs light background to have a good contrast. If we need to serve the needs of all the three browsers author supplied CSS is required. All these are good practices but are not WCAG violations. See
G165: Using the default focus indicator for the platform so that high visibility default focus indicators will carry over
https://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G165
However, author supplied good contrast CSS technique is also recommended by WCAG.
G195: Using an author-supplied, highly visible focus indicator https://www.w3.org/TR/WCAG20-TECHS/G195.html
Thanks & Regards
Rakesh
www.maxability.co.in
On Tue, Jan 3, 2017 at 11:25 PM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
> JP Jamous wrote:
> > I think it should have guidelines related to browsers manufacturers
> > and
> to developers. That way, the manufacturers provide a clear outline and
> developers can customize their own that would work with low vision folks.
>
> You mean something like this -
> https://www.w3.org/TR/UAAG20/#gl-interaction-highlight ?
>
> Jared
> > > archives at http://webaim.org/discussion/archives
> >
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: Jonathan Avila
Date: Wed, Jan 04 2017 9:04AM
Subject: Re: Visible focus
← Previous message | No next message
> Firefox will change the outline color to match the font color.
In addition to Nick's insightful comment. Use of outline is better for accessibility rather than changing the background color of an element to indicate interaction. For example, in high contrast mode both Firefox and IE will change the outline color -- background colors will get stripped and won't be seen.
In high contrast, IE and Firefox both seem to add back in an outline for button even if outline:none is set. However, for links if underline is turned off with CSS no outline is added back in for high contrast mode when outline none is set.
As mentioned before my favorite approach is Apple's approach with VoiceOver which adds a double border, one white and one black so there is always sufficient contrast. Another approach browsers could do is an inverted (XOR) type approach where the dots are a negative of the color underneath them I haven't seen that approach in many years when it was used in software back when keyboard navigation was mainstream.
Jonathan
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
= EMAIL ADDRESS REMOVED =
703.637.8957 (Office)
Vis Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
See you at CSUN in March!
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.
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Beranek, Nicholas
Sent: Wednesday, January 04, 2017 9:47 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Visible focus
Firefox will change the outline color to match the font color. This can be very effective unless the outline surrounds a dark button with light text on a light background (i.e. the light outline falls on the light background). We do have a property called outline-offset and, when set to a negative value, it pulls the light outline in to display on the dark background.
This is the most effective approach I have witnessed from a browser vendor, but it could still be improved. I was never crazy about the 1px dotted or dashed outlines, nor am I crazy about the box-shadow that Chrome applies. The real issue is that none of the sufficient techniques declares what exactly "highly visible" equates to. I remember we had this discussion before: http://webaim.org/discussion/mail_thread?threadx04
I feel like we should define "highly visible" in the next version of WCAG. Perhaps a 4.5 to 1 color contrast ratio for AA and 7 to 1 for AAA would be sufficient. We would then need to think about how to handle box shadows and determine a best practice for minimum border width (e.g. 2 pixels).
Nick
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Rakesh P
Sent: Wednesday, January 04, 2017 4:10 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Visible focus
As I understand from one of my friend, Chrome has a default indicator of light blue. I think unless the background is dark the light blue indicator does not pass contrast. On the other hand, FireFox and IE shows black dotted indicator which needs light background to have a good contrast. If we need to serve the needs of all the three browsers author supplied CSS is required. All these are good practices but are not WCAG violations. See
G165: Using the default focus indicator for the platform so that high visibility default focus indicators will carry over
https://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G165
However, author supplied good contrast CSS technique is also recommended by WCAG.
G195: Using an author-supplied, highly visible focus indicator https://www.w3.org/TR/WCAG20-TECHS/G195.html
Thanks & Regards
Rakesh
www.maxability.co.in
On Tue, Jan 3, 2017 at 11:25 PM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
> JP Jamous wrote:
> > I think it should have guidelines related to browsers manufacturers
> > and
> to developers. That way, the manufacturers provide a clear outline and
> developers can customize their own that would work with low vision folks.
>
> You mean something like this -
> https://www.w3.org/TR/UAAG20/#gl-interaction-highlight ?
>
> Jared
> > > archives at http://webaim.org/discussion/archives
> >
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.