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