Bootstrap 3推/拉和可访问性 Interactive_content可通过键盘进行交互式聚焦“此问题的答案：

问题描述

我试图使我们的网页更易于访问，并对推/拉部分的制表符顺序感到困惑。

这里是一个例子：

    <section class="section">
                 <div class="container-fluid">
<div class="row">
                     
                        <div class="col-md-6">
<a href="#" aria-label="Lorem ipsum" target="_blank"><img src="https://via.placeholder.com/770x560" alt="Image" /></a>        
                     
          </div>
                        <div class="col-md-6">
                    <h3>Lorem ipsum</h3>
            <p>Sed ut perspiciatis unde omnis iste natus</p>

          <div class="btn">
<a href="#" role="button" tabindex="0" target="_blank">Lorem ipsum</a></div>
    </div>
          </div>
<div class="row">
                     
                        <div class="col-md-6 col-md-push-6">
<a href="#" aria-label="Lorem ipsum" target="_blank"><img src="https://via.placeholder.com/770x560" alt="Image" /></a>        
                     
          </div>
                        <div class="col-md-6 col-md-pull-6">
                    <h3>Lorem ipsum</h3>
            <p>Sed ut perspiciatis unde omnis iste natus</p>

          <div class="btn">
<a href="#" role="button" tabindex="0" target="_blank">Lorem ipsum</a></div>
    </div>
          </div>
        </div>

</section>      

当我使用“推/拉”选项卡浏览行时，图像首先聚焦，然后按钮聚焦，即使它在桌面上显示为按钮第一，然后是图像。我知道为什么会这样做，但是这是可访问性的最佳实践吗？似乎会使用户感到困惑。如果这不是最佳做法，我将如何反转制表符顺序？我是否需要浏览整个网页并为每个可聚焦元素设置tabindex =“ 0”，“ 1”，“ 2”等？

解决方法

您的Q有点笼统。

可访问性问题：

避免使用大于0的tabindex值。这样做会使它 对于依靠辅助技术进行导航和 操作页面内容。而是使用以下元素编写文档： 逻辑顺序。

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

Interactive_content（可通过键盘进行交互式聚焦）

默认情况下，某些HTML元素是可聚焦的（按钮/链接/表单输入等）。

此选项卡的顺序

 <a href="#" tabindex="0">First in tab order</a>
 <a href="#" tabindex="0">Second in tab order</a>

与此相同（没有tabindex="0"）：

 <a href="#">First in tab order</a></div> | 
 <a href="#">Second in tab order</a></div>

“此问题的答案：

“我需要浏览整个网页并设置tabindex =“ 0”，“ 1”，“ 2”“

NO。

如果多个元素共享相同的正tabindex值，则它们的 彼此相对的顺序遵循其在文档中的位置 来源MDN。

document source =通过CSS flexbox，grid等更改顺序，依此类推不会影响标签的顺序。因此，辅助技术导航会按正确顺序投放您的内容。

Flexbox order示例：

.flex-container {
  display: flex;
}

.flex-item:nth-of-type(1) { order: 3; }
.flex-item:nth-of-type(2) { order: 4; }
.flex-item:nth-of-type(3) { order: 1; }

<div class="flex-container">
  <div class="flex-item"><button>Tab order 1</button></div>
  <div class="flex-item"><button>Tab order 2</button></div>
  <div class="flex-item"><button>Tab order 3</button></div>
</div>

在下面的示例中，由于tabindex，div是可Tabable的。

<label>First in tab order:<input type="text"></label>
<br>
<a href="#">Second in tab order</a> 
<div tabindex="0"><b>Tabbable</b> due to tabindex.</div>
<label>Third in tab order:<input type="text"></label>