6

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>.

unor
  • 92,415
  • 26
  • 211
  • 360
Naele
  • 510
  • 2
  • 10
  • 2
    Could you explain what you're trying to achieve? – Valross.nu Dec 14 '17 at 10:24
  • 2
    Maybe you should be using a `` instead of a link? – Danield Dec 14 '17 at 10:28
  • @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. – Naele Dec 14 '17 at 10:30
  • 3
    According to [this WebAIM article](https://webaim.org/techniques/keyboard/tabindex), 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. – T.J. Crowder Dec 14 '17 at 10:34
  • @Danield As I mentioned in my question, I can't. I have to use `` because that's the way Bootstrap dropdown has implemented keyboard navigation in dropdowns. – Naele Dec 14 '17 at 11:12
  • 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. – Bergi Dec 15 '17 at 14:58

2 Answers2

2

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.

MatTheCat
  • 18,071
  • 6
  • 54
  • 69
0

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.

stringy
  • 1,323
  • 7
  • 16