CODEWITHSUNDEEP
html
Mark W
Mark W

Reputation: 5964

How to set image to be tabbable

I have an image and I want the user to be able to naviagte to it using the tab button. I am unable to set the tab-index due to the way the page is changed dynamically. How can I set the image to be tabbable?

Upvotes: 2

Views: 9938

Answers (2)

caisah
caisah

Reputation: 2087

You could wrap the image in a span which has a tabindex of 0.

<span tabindex="0">
  <img src="./img.png" alt="img.png">
</span>

But I don't see the utility in doing that. If the users use only keyboard or you ant to have good accessibility for your app this wouldn't make much sense.

Check out https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex#accessibility_concerns

Upvotes: 1

I.G. Pascual
I.G. Pascual

Reputation: 5995

Try wrapping them inside anchors <a tabindex="1"><img src="..." /></a> and set tabindex attribute to dynamically created elements $("<a>").attr("tabindex",tabindex):

var anchor = $("<a>").attr("href",image_link).attr("tabindex", tabindex);
var img = $("<img>").attr("src", image_src).appendTo(anchor);

See this example http://jsfiddle.net/EsEeN/

Upvotes: 5

Related Questions