Black Border Around Navigation

Site URL: https://www.jadejohnsonillo.com

Hi,

When I click around the navigation links, a black border pops up. I've never seen this before and I can't figure how to remove it in the style settings. I've attached a screenshot below.

Does anyone know how to get rid of it?

2 hours ago, jadejohnsonillo said:

When I click around the navigation links, a black border pops up. Does anyone know how to get rid of it?

This is a "focus outline" and it appears when you move around the site using the keyboard. It is an essential navigation tool for visitors with vision and movement disabilities so please don't try to disable it.

The contrasting black outline is added to the area of the page that has focus. Removing focus outlines can create issues for people navigating the web with a keyboard, and isn't recommended. In some territories, there are legal stipulations for accessibility so removing accessibility features may cause legal issues for the website owner.

18 hours ago, paul2009 said:

This is a "focus outline" and it appears when you move around the site using the keyboard. It is an essential navigation tool for visitors with vision and movement disabilities so please don't try to disable it.

The contrasting black outline is added to the area of the page that has focus. Removing focus outlines can create issues for people navigating the web with a keyboard, and isn't recommended. In some territories, there are legal stipulations for accessibility so removing accessibility features may cause legal issues for the website owner.

This is new to me, can you explain why it's showing up now but wasn't before? And why it shows up when I click with my mouse and not my keyboard?

I don't mind there being an accessibility feature, though it's strange that I can't replicate it on anyone else's Squarespace site.

Site URL: https://objekts.squarespace.com/?password=demo

Hi! I'm having a hard time figuring out the class to turn off the outline on the nav when that area is clicked. This only happens in Safari.

Thanks!

Hi there,

I just checked on Safari and didn't see any outline on the Nav.

Did you solve the problem?

On 7/11/2022 at 7:01 PM, lizasem said:

I'm having a hard time figuring out the class to turn off the outline on the nav when that area is clicked.

The border is usually due to accessibility features. I don't see this when I view your site using Safari, so it is likely others are not seeing it either. I recommend you check the following:

Are you using the latest version of Safari (version 15.5)?

Have you enabled accessibility features so that the border appears?

There have been a number of posts about it this week, so if you still experience the issue it could also be due to a technical fault ("bug"). I recommend that you report it directly to Squarespace Customer Care to see if they can help.

Site URL: https://www.sallyfaithphotography.com

Hi,

A dark blue border seems to appear when I click on anything in the header. Is there a way to remove this? I'm not very experience with CCS 

Thank you!

You mean Navigation Links underline or?

On 7/11/2022 at 3:10 PM, Wolfsilon said:

Hi there,

I just checked on Safari and didn't see any outline on the Nav.

Did you solve the problem?

On 7/12/2022 at 12:19 PM, paul2009 said:

The border is usually due to accessibility features, although I don't see it when I view your site. 

I can still see the border when I click my navigation, and on @lizasem's site too.

Weird that other people can't see it, and that it's only shown in Safari. Is this a setting that I can turn off for myself, not for my site?

I have been having same problem with my site's header and scrolling text for the past few days.

By tapping header or scrolling text, a strange border appears around it.

This problem occurs when using mobile browser like iOS safari.

7 hours ago, Hirotada said:

I have been having same problem with my site's header and scrolling text for the past few days.

By tapping header or scrolling text, a strange border appears around it.

This problem occurs when using mobile browser like iOS safari.

What is your site url?

3 hours ago, tuanphan said:

What is your site url?

https://www.kicka.jp/

Thanks in advance.

Hmm... Yeah, it's happening on all of my 7.1 sites (in Safari) currently. Not sure why yet.

See images so you can see.

same here 😞

Also experiencing this issue

I don't know for sure but I've seen several similar posts on this issue and I've had it happen to me a couple of times. The issue appears to be accessibility features being activated for some reason. I had it happen to me a couple of days back and when I reloaded the page, the issue was gone. I was unable to trigger it again on purpose. This could be an SS issue or it might even be a browser issue. I'm on Chrome (latest)/macOS.

Not much help I know but the more data we can gather the better a chance for a solution. 🙂

Site URL: https://www.coastalgrain2.squarespace.com

Hey guys,

I'm having an issue where a black outline appears whenever a link or section is clicked on mobile, see attached image.

Any ideas of how to prevent this?

Cheers!

I'm having the same problem - anyone found a fix?

<strike>This problem has been fixed 😉</strike>

Partly fixed.  Same problem with items under the hamburger menu.