3

I'm working on an angular application where some of the UI elements need to be accessible by hitting the tab key this is for accessibilty reasons. As an example we have content areas that open and close when you click/hit return on a button. I do not want the button to trigger a page refresh so I currently have an empty href. The link to open/close the content area looks like this 

<a href>The link<a>

This works fine in every browser but IE10, on IE10 you can not tab on to the href unless it contains a value for example 

<a href="#">The link<a>

Does anyone know away to fix this issue in IE10. I know I can write some js to preventDefault actions but I would rather not have to added additional js for something like this if there is another work around.

Scott w
  • 495
  • 7
  • 15

2 Answers2

3

You might want to use button, not a.

An a element without href attribute "represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents". This doesn’t seem to be what you want to convey.

The button element in the Button state would be appropriate in your case:

<button type="button">…</button>

It comes with the button WAI-ARIA role ("An input that allows for user-triggered actions when clicked or pressed.") and is focusable by default.

unor
  • 92,415
  • 26
  • 211
  • 360
2

There are a couple of ways you can fix this problem:

  1. Add tabindex="0" to the anchor
  2. Add href="javascript:;" to the anchor, or
  3. Add href="#" to the anchor

The advantage of the first and the second options is they do not require a call to event.preventDefault() in order to stop the page from scrolling back to the top constantly.

unobf
  • 7,158
  • 1
  • 23
  • 36
  • Urgs, please use only the first variant, if accessibility is important to you. – feeela May 06 '15 at 10:41
  • @feeela - the second variant is also accessible - actually all three are, the third one simply requires the preventDefault – unobf May 06 '15 at 14:01
  • Wouldn't using tabindex reflow the entire application tab order and cause accessibility issues? –  May 08 '15 at 15:51
  • 1
    @MrJinPengyou only if you use a tabindex value > 0 – unobf May 08 '15 at 16:31
  • So if I remember correctly: tabindex <0 = you can't focus it (with the keyboard, tabindex 0 you can get focus, tab >0 will override the tab order? –  May 08 '15 at 17:45
  • 1
    @MrJinPengyou correct - except with tabindex<0 you can focus with JavaScript i.e. `element.focus();` You should only ever use `tabindex=-1` or `tabindex=0` – unobf May 08 '15 at 18:54