WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Default visual focus ring in Safari and other browsers

for

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

From: Subramanian, Poornima (PCL)
Date: Thu, Nov 08 2018 9:51AM
Subject: Default visual focus ring in Safari and other browsers
No previous message | Next message →

Hi Everyone,

I have a question re. the 'default visual focus ring in browsers'. Each browser varies in showing the focus ring, and there is a technique in WCAG that recommends to use the default focus ring on browsers.

However on the website that I am testing fails on the visual focus ring on specific browsers e.g. in Safari, the focus ring shows like 'dull/faint blue shadow box' which is hard to see on both white and dark backgrounds.

Any thoughts on the criticality of this issue, and what is the best way to address this?

Thanks!

Best,
Poornima
Accessibility Consultant

The information contained in this email and any attachment may be confidential and/or legally privileged and has been sent for the sole use of the intended recipient. If you are not an intended recipient, you are not authorized to review, use, disclose or copy any of its contents. If you have received this email in error please reply to the sender and destroy all copies of the message. Thank you.

To the extent that the matters contained in this email relate to services being provided by Princess Cruises and/or Holland America Line (together "HA Group") to Carnival Australia/P&O Cruises Australia, HA Group is providing these services under the terms of a Services Agreement between HA Group and Carnival Australia.

From: Sandy Feldman
Date: Thu, Nov 08 2018 10:12AM
Subject: Re: Default visual focus ring in Safari and other browsers
← Previous message | Next message →

hey Poornima,

It's really important for sighted keyboard users to have eye-catching
focus styles. The default visual focus ring can be better than nothing,
but not necessarily! What's really good is to use css to style the focus
so that it works with the styles of the page.

--
Sandy
sandyfeldman.com



On 2018-11-08 11:51 AM, Subramanian, Poornima (PCL) wrote:
> Hi Everyone, > > I have a question re. the 'default visual focus ring in browsers'.
> Each browser varies in showing the focus ring, and there is a >
technique in WCAG that recommends to use the default focus ring on >
browsers. > > However on the website that I am testing fails on the
visual focus > ring on specific browsers e.g. in Safari, the focus ring
shows like > 'dull/faint blue shadow box' which is hard to see on both
white and > dark backgrounds. > > Any thoughts on the criticality of
this issue, and what is the best > way to address this? > > Thanks! > >
Best, Poornima Accessibility Consultant > > The information contained in
this email and any attachment may be > confidential and/or legally
privileged and has been sent for the sole > use of the intended
recipient. If you are not an intended recipient, > you are not
authorized to review, use, disclose or copy any of its > contents. If
you have received this email in error please reply to > the sender and
destroy all copies of the message. Thank you. > > To the extent that the
matters contained in this email relate to > services being provided by
Princess Cruises and/or Holland America > Line (together "HA Group") to
Carnival Australia/P&O Cruises > Australia, HA Group is providing these
services under the terms of a > Services Agreement between HA Group and
Carnival Australia. > manage your > subscription, visit http://list.webaim.org/ List archives
at > http://webaim.org/discussion/archives = EMAIL ADDRESS REMOVED = >

From: Henry, Michael (IntelliDyne)
Date: Thu, Nov 08 2018 10:19AM
Subject: Re: Default visual focus ring in Safari and other browsers
← Previous message | Next message →

I've read that it's best not to remove or defeat it, but is it OK to customize it based on the design and style of your site?

My guess is yes, as long as the focus change it clear and easily seen by low-vision users.


---
Mike S. Henry
Creative Services Lead
IntelliDyne Contract Employee
Supporting Enterprise Infrastructure (formerly Military Health System Cyberinfrastructure Services - MCiS)
Desk: (703) 882-3962

From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Sandy Feldman < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, November 8, 2018 12:12:18 PM
To: WebAIM Discussion List; Subramanian, Poornima (PCL)
Subject: Re: [WebAIM] Default visual focus ring in Safari and other browsers

hey Poornima,

It's really important for sighted keyboard users to have eye-catching
focus styles. The default visual focus ring can be better than nothing,
but not necessarily! What's really good is to use css to style the focus
so that it works with the styles of the page.

--
Sandy
sandyfeldman.com



On 2018-11-08 11:51 AM, Subramanian, Poornima (PCL) wrote:
> Hi Everyone, > > I have a question re. the 'default visual focus ring in browsers'.
> Each browser varies in showing the focus ring, and there is a >
technique in WCAG that recommends to use the default focus ring on >
browsers. > > However on the website that I am testing fails on the
visual focus > ring on specific browsers e.g. in Safari, the focus ring
shows like > 'dull/faint blue shadow box' which is hard to see on both
white and > dark backgrounds. > > Any thoughts on the criticality of
this issue, and what is the best > way to address this? > > Thanks! > >
Best, Poornima Accessibility Consultant > > The information contained in
this email and any attachment may be > confidential and/or legally
privileged and has been sent for the sole > use of the intended
recipient. If you are not an intended recipient, > you are not
authorized to review, use, disclose or copy any of its > contents. If
you have received this email in error please reply to > the sender and
destroy all copies of the message. Thank you. > > To the extent that the
matters contained in this email relate to > services being provided by
Princess Cruises and/or Holland America > Line (together "HA Group") to
Carnival Australia/P&O Cruises > Australia, HA Group is providing these
services under the terms of a > Services Agreement between HA Group and
Carnival Australia. > manage your > subscription, visit http://list.webaim.org/ List archives
at > http://webaim.org/discussion/archives = EMAIL ADDRESS REMOVED = >

From: Philip Kiff
Date: Thu, Nov 08 2018 11:16AM
Subject: Re: Default visual focus ring in Safari and other browsers
← Previous message | No next message

On 2018-11-08 11:51 AM, Subramanian, Poornima (PCL) wrote:

> I have a question re. the 'default visual focus ring in browsers'....Any thoughts on the criticality of this issue, and what is the best way to address this?
You're talking about the border around input boxes in different focus
states, right? These things are all controlled by your CSS or by the
built-in browser defaults. WebAIM recently updated their article on
colour contrast requirements in light WCAG 2, and they address the
question of different colours for different focus "states" on input box
borders under the heading "Non-text Contrast":
https://webaim.org/articles/contrast/#sc1411

The quick summary is that interface components in different states (like
focus) must have 3:1 contrast now, except when "determined by user
agent" - i.e., you can leave them at their defaults and don't apply any
custom CSS at alland that will pass WCAG even if the contrast is poor,
but it is probably best practice is to actively customize them using
custom CSS to ensure that they have 3:1 contrast in each different state.

Phil.

Philip Kiff
D4K Communications