Is the tabbing sequence logical?in HTML - html

Question

Hi I am facing a very hard issue regarding tab order for accessibility.My tabs are functioned through jquery.ui.min.js. Tab order,classes & function are coming from there.Although all tabs are functioning properly but when i validate i am getting accessibility issue.Please suggest me other way.
I am looking for accessibility point of view only.One more thing this library adding blank style (style="") on every element.How can i remove it Please suggest.
<div class="tabs ui-tabs ui-widget ui-widget-content ui-corner-all" style="padding: 10px;">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" style="">
<li tabindex="0" class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" aria-controls="tab-content4" aria-selected="true" style="z-index: 2147483646;">tab1</li>
<li tabindex="-1" class="ui-state-default ui-corner-top" aria-controls="tab-content1" aria-selected="false" style="">tab2</li>
<li tabindex="-1" class="ui-state-default ui-corner-top" aria-controls="tab-content2" aria-selected="false" style="">tab3</li>
<li tabindex="-1" class="ui-state-default ui-corner-top" aria-controls="tab-content3" aria-selected="false" style="">tab4</li>
<!-- <li>Others</li> -->
</ul>
<strong style=""> <a class="fl_r" href="#" style="">Subscribe
</a></strong>
<div id="tab-content4" class="tab-content ui-tabs-panel ui-widget-content ui-corner-bottom" aria-expanded="true" aria-hidden="false" style="">
<table class="ui-table" style="border-collapse: collapse;">
<tbody style="">
<tr style="">
<td>test1</td>
</tr>
<tr style="">
<td>test2</td>
</tr>
<tr style="">
<td>test3</td>
</tr>
</tbody>
</table>
</div>
<div id="tab-content1" class="tab-content ui-tabs-panel ui-widget-content ui-corner-bottom" aria-expanded="false" aria-hidden="true" style="display: none;">
<table class="ui-table" style="border-collapse: collapse;">
<tbody style="">
<tr style="">
<td>test2</td>
</tr>
<tr style="">
<td>test21</td>
</tr>
<tr style="">
<td>test22</td>
</tr>
</tbody>
</table>
</div>
<div id="tab-content2" class="tab-content ui-tabs-panel ui-widget-content ui-corner-bottom" aria-expanded="false" aria-hidden="true" style="display: none;">
<table class="ui-table" style="border-collapse: collapse;">
<tbody style="">
<tr style="">
<td>test3</td>
</tr>
<tr style="">
<td>test31</td>
</tr>
<tr style="">
<td>test32</td>
</tr>
</tbody>
</table>
</div>
<div id="tab-content3" class="tab-content ui-tabs-panel ui-widget-content ui-corner-bottom" aria-expanded="false" aria-hidden="true" style="display: none;">
<table class="ui-table" style="border-collapse: collapse;">
<tbody style="">
<tr style="">
<td>test4</td>
</tr>
<tr style="">
<td>test41</td>
</tr>
<tr style="">
<td>test42</td>
</tr>
</tbody>
</table>
</div>
<!-- <div id="tab-content4" class="tab-content">&nbsp;</div> -->
</div>

Answer 1

When running the siteimprove plugin, you will get a "review" item (not an "error" or "warning") for any element that has a tabindex specified. Or at least that's what my testing is showing.
It doesn't seem to matter if valid tabindex values of 0 or -1 are used. I would expect a "review" or "warning" if tabindex were greater than 0 since that's highly discouraged in the html spec.
Warning!Using a positive value for tabindex to specify the element’s position in the sequential focus navigation order interacts with the order of all focusable elements. It is error-prone, and therefore not recommended. Authors should generally leave elements to appear in their default order.
So siteimprove is being a bit overzealous and flagging every use of tabindex as a review candidate.
Note that in your example, the tabindex="0" on all the <a> elements is not necessary (*). They are already in the tab sequence.
(*) If an anchor (<a>) does not have an href attribute, then the anchor is not a tabstop and would need a tabindex="0" if you wanted focus to move to the element. However, the anchor would also need a keyboard and mouse event handler to handle clicks since an anchor without an href does not handle any events.
The code sample is also a little weird in that the list item (<li>) has a tabindex="0" and the nested link in that list item allows focus. That's two tab stops for essentially the same element. That would be an accessibility issue.