CODEWITHSUNDEEP
safarikeyboardanchoraccessibilitytabbing
ajeshrkurup
ajeshrkurup

Reputation: 175

Keyboard Accessibility - links not getting focus on tabbing - Safari Browser

I'm facing an accessibility issue with Safari browser on tabbing. Anchor tags are not getting focus on tabbing.
I have checked with and without tabindex. Setting tabindex="0", but nothing changed, not sure this is a bug in Safari or not. Tested in other websites including https://www.microsoft.com , the same experience.

Safari Version 10.1.1 (11603.2.5)
Mac : OS X El Capitan

Button element is getting focus, only issue is with anchor tag

<a id="footer-linkedin-link" target="_blank" class="social-footer-icon" aria-label="Follow on LinkedIn" href="https://www.linkedin.com/"></a>

Any valuable inputs will help me. Thanks in advance.

Upvotes: 2

Views: 3760

Answers (1)

Steve Repsher
Steve Repsher

Reputation: 400

You can't have an empty anchor tag - there's nothing to tab to. That's an HTML validation error so browsers may handle it differently. Without your CSS I'm not sure exactly what you should do, but I'm guessing you really want something like this:

<a target="_blank" href="https://www.linkedin.com/">
    <span id="footer-linkedin-link" class="social-footer-icon" role="img" aria-label="Follow on LinkedIn" ></span>
</a>

The icon being inserted with CSS needs to be the content within the anchor, be properly cast as an image using role="img", and that should have the aria-label.

Upvotes: 2

Related Questions