Is tabIndex: 0 in links considered a good practice in order to avoid href="javascript: void(0);"?

Question

a href="javascript: void(0)" is considered a bad practice and I can't use href="#" in every case, so I'm thinking to add an empty a with tabIndex=0 in order to be accessible with keyboard.

Is it considered a good practice?

P.S. Bootstrap's dropdown needs <a> in inner elements for keyboard navigation, so I have to use <a>.

Eurydice

Could you explain what you're trying to achieve? – Chetnik

Maybe you should be using a <button type="button">...</button> instead of a link? – Meyerbeer

@Kaddath I could but it's used in many cases..it's not so special. I would have to use href="#" and then add prevent default in many files. I'm trying to avoid this. – Eurydice

According to this WebAIM article, if you make an element focusable via tabindex="0", it must support the relevant keyboard interaction (e.g., it should respond to Enter or Space). By default, at least in Chrome and Firefox, a elements with no href but with tabindex="0" do not (not even with role="link" or role="button"). So if you do this, ensure that those work (Bootstrap may already do so). I would also suggest that if you do this, you add the appropriate role value. – Stampede

@Meyerbeer As I mentioned in my question, I can't. I have to use <a> because that's the way Bootstrap dropdown has implemented keyboard navigation in dropdowns. – Eurydice

Uh, href="#" is not a good practice either. You should put a link to the site that would take you to the actual target of the navigation entry. – Chalcidice

Answer 1

If you don’t have a href then it’s not a link, period.

You can use <button type="button"> in bootstrap dropdown menu so I recommend you do it.

Dulcie

Answer 2

Tabindex=0 will make your links focusable but not clickable. Instead of just using #, use the id attribute of the item which is changing or that you are navigating to. E.g. <a href="#section2">Step 2</a> or similar. This way you get the href so the link is both focusable and operable, and when that link is clicked the browser will send the user to that location.

Heptahedron