CODEWITHSUNDEEP
htmlcsssafarifocusaccessibility
lmenus
lmenus

Reputation: 613

Safari anchor tags with href attribute not getting focus?

I came across this issue and I thought my code was just wrong, but after searching around and looking at related examples, I wonder if Safari really doesn't focus <a> tags with href attribute?

In my use case, I wanted to use <a href="#top">jump</a> to skip to a page section. To make the anchor tag focusable, we need to add tabindex="0" like so -> <a href="#top" tabindex="0">jump</a>. However, it seems the presence of href attribute is not OK with Safari. See this fiddle and try to Tab through the page (modified from other SO example).

HTML

<a tabindex="0">Test 1</a>
<a href="#" tabindex="0">Test 2</a>

CSS

a:focus { color: orange; }

Is there any way to fix this? Same code works fine in Chrome.

Upvotes: 1

Views: 4034

Answers (1)

Josh
Josh

Reputation: 4322

It appears that this behavior is by design, and as such there's not much that you as a web-developer can do about it. Ultimately, it's up to the end-user whether or not they want to enable these settings.

I can tell you that Safari is used regularly by screen reader users, particularly on iOS. You can see evidence of this in the latest WebAIM Screen Reader User Survey. These people seem to navigate the technology without issue, so I suspect that it's not really a problem.

Technologies frequently change, so the best thing that you can do is to code to the specification and provide graceful fallbacks for poor accessibility support where you can. Unfortunately, I don't see any way of doing that in this case.

I would not recommend trying to implement workarounds (via scripting), as this will likely only cause more problems.

Upvotes: 2

Related Questions