Tab Indexing for Accessibility

No more mouse moves .The tab index is used to define the content  flow when we traverse the webpage through tab key.by default the tab index order according to the source order.but some time’s we need to change the order of the tab flow. For that we are using tab indexing.

we are adding a tag like tabindex attribute.It can start at 0 and increment to any value.simply 1,2,3,4,5…. but the Recommended way is to use the tabindex like bellow 10,20,30,40…. because sometimes you may use to add any links or button to your page So you need some unwritten indexes for that .Simply you can inject other controls.And main advantage is we don’t need to re index if we use above technic.

If a tabindex of "-1" is used, the element it’s applied to will no longer be keyboard focusable.Therefore if you want your webpage contain web accessibility then try to avoid marking tab index as –1. by default the tabindex will start from the lowest value incase where ever you placed the code.It will increment until it reach the maximum.

Also tab index only support for specific elements like bellow,

  • a <a/>
  • area <area />
  • button <button tabindex="value" name="" value="" id="" />
  • input <input tabindex="value" name="" value="" id="" />
  • object <object tabindex="value" name="" value="" id="" />
  • select <select tabindex="value" name="" value="" id="" ></select>
  • textarea <textarea tabindex="value" cols="" rows=""></textarea>

1 comment:

  1. Note that if your tag list other than the above list then focus will not work for that say if your tag is Li then it will not work for tab index

    ReplyDelete