HTML中的分页顺序是否合理？

Question

嗨，我面临着一个关于选项卡顺序的非常棘手的问题。我的选项卡通过jquery.ui.min.js起作用。选项卡顺序，类和功能都来自那里。尽管所有选项卡都可以正常工作，但是当我确认我遇到可访问性问题时。请以其他方式建议我。

我只是在寻找可访问性的观点。此库还有另一件事，在每个元素上添加空白样式（style =“”）。如何删除它，请提出建议。

<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;"><a href="#tab-content4" title="test" class="ui-tabs-anchor" tabindex="0" id="ui-id-1" style="">tab1</a></li>
    <li tabindex="-1" class="ui-state-default ui-corner-top" aria-controls="tab-content1" aria-selected="false" style=""><a href="#tab-content1" title="abc" class="ui-tabs-anchor" tabindex="0" id="ui-id-2" style="">tab2</a></li>
    <li tabindex="-1" class="ui-state-default ui-corner-top" aria-controls="tab-content2" aria-selected="false" style=""><a href="#tab-content2" title="Cde" class="ui-tabs-anchor" tabindex="0" id="ui-id-3" style="">tab3</a></li>
    <li tabindex="-1" class="ui-state-default ui-corner-top" aria-controls="tab-content3" aria-selected="false" style=""><a href="#tab-content3" title="efg" class="ui-tabs-anchor" tabindex="0" id="ui-id-4" style="">tab4</a></li>
    <!-- <li><a href="#tab-content4">Others</a></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">&amp;nbsp;</div> -->
</div>

Answer 1

运行siteimprove插件时，对于指定了tabindex的任何元素，您都会获得一个“审阅”项（而不是“错误”或“警告”）。或者至少这就是我的测试所显示的。

使用有效的tabindex值0或-1似乎无关紧要。如果tabindex大于0，我会期望“审查”或“警告”，因为在html spec中强烈建议不要这样做。

  

警告！
使用tabindex的正值来指定元素在sequential focus navigation顺序中的位置会与所有可聚焦元素的顺序互动。它易于出错，因此不建议使用。作者通常应保留元素以其默认顺序显示。

因此，siteimprove有点过于热心，并标记每次将tabindex用作审核候选人。

请注意，在您的示例中，所有元素上的tabindex="0"都是不必要的（*）。它们已经在选项卡序列中。

（*）如果锚点（）不没有href属性，则该锚点是 not 一个制表符和如果您想将焦点移到元素上，将需要tabindex="0" 。但是，锚点还需要键盘和鼠标事件处理程序来处理点击，因为没有href的锚点不会处理任何事件。

代码示例也有点奇怪，因为列表项（

）具有tabindex="0" ，并且该列表项中的嵌套链接允许焦点。对于相同的元素，这是两个制表位。那将是一个可访问性问题。