Prevent Tabstop on a Element (Anchor Link) in HTML

Prevent tabstop on A element (anchor link) in HTML

Some browsers support the tabindex="-1" attribute, but not all of them, since this is not a standard behaviour.

How to avoid tab stop on the link?

You can set the tabindex to a higher value then all other elements of the page (unique way without js). Disabling this causes accessibility issues.

People use tabs to navigate between elements and some softwares use this as the navigation order among other factors. (More detail here: http://accessibleculture.org/articles/2010/05/tabindex). If your objective is hide this link from screen readers and people with some limitations, there's no problem through.

How to ignore HTML element from tabindex?

You can use tabindex="-1".

Only do this if you are certain it does not remove functionality for keyboard users.

The W3C HTML5 specification supports negative tabindex values:

If the value is a negative integer

The user agent must set the element's tabindex focus flag, but should not allow the element to be reached using sequential focus navigation.

---

Watch out though that this is a HTML5 feature and might not work with old browsers.

To be W3C HTML 4.01 standard (from 1999) compliant, tabindex would need to be positive.

---

Sample usage below in pure HTML.

<a href="#" onclick="return false">Focusable</a>
<a tabindex="-1" href="#" onclick="return false">Not focusable</a>
<a href="#" onclick="return false">Focusable</a>

Accessibility: better place to place tabindex=-1 to avoid duplicate links?

I don't see a use case for having both an image link and an adjacent textual link that use the same URL. It should be a single link, so you have three options:

1. get rid of the image link,
2. get rid of the textual link,

3. combine the image and the text into a single link, where the image has an empty alt attribute:

   <a href="https://example.com/url-to-details"><img src="https://example.com/item.png" alt="Sample Image"> some description</a>

In the third case, the alt attribute should be empty in order to avoid duplication of text (screen reader users don't want to hear the link text twice). This also results in simpler code that does not rely on tabindex="-1". See also WCAG Technique H2: Combining adjacent image and text links for the same resource.

Note that using two adjacent links, both with the href attribute and one of them having tabindex=-1, as proposed in the question, will result in both links being listed in a screen reader's list of links. This duplication should be avoided.

Why does tabindex default to -1 on anchor links but not buttons?

HTML 5.1¹ defines what user agents should do when the tabindex attribute is omitted:

The user agent should follow platform conventions to determine if the element’s tabindex focus flag is set […]

The spec suggests a few elements that should get this flag, including a elements (as long as they have an href attribute) and button elements.

So user agents that follow the spec’s recommendation² don’t make a distinction between a and button elements with regards to the default focus behaviour.

---

I’m not sure why the linked MDN page contains the quoted statement (it seems to be wrong). Maybe it’s a misunderstanding of what the spec says about the tabIndex IDL attribute?

The tabIndex IDL attribute must reflect the value of the tabindex content attribute. Its default value is 0 for elements that are focusable and -1 for elements that are not focusable.

---

¹ HTML 5.1 is, as of now, the latest W3C Recommendation. But previous HTML W3C Recommendations and WHATWG’s HTML Living Standard probably don’t define this aspect differently w.r.t. to a and button.

² It’s not a requirement, as the spec uses should instead of must.

How do you make an anchor link non-clickable or disabled?

I just realized what you were asking for(I hope). Here's an ugly solution

var preventClick = false;

$('#ThisLink').click(function(e) {
    $(this)
       .css('cursor', 'default')
       .css('text-decoration', 'none')

    if (!preventClick) {
        $(this).html($(this).html() + ' lalala');
    }

    preventClick = true;

    return false;
});

Focus not highlighting anchor link on tab

To use focus you need to assign a tabindex to the element as it is not an input. Otherwise you could use active. Also your code is not correct. Currently it is looking for an a element within an element with that ID.

The correct way would be

a#login-as-guest:focus{ background-color: yellow; }

Both ways:
DEMO http://jsfiddle.net/kevinPHPkevin/t2hbS/

How to give focus to anchor tag without href= #

First, class selector should start with a dot:

.ui-datepicker-prev:focus {border: 1px solid red; }

As for being able to use keyboard navigation for elements that are nonfocusable by default, setting tabindex="0" attribute should help.

---

Related Topics