Bootstrap 3 push/pull 和辅助功能

Question

我正在努力使我们的网页更易于访问，但我对 push/pull 部分的 Tab 键顺序感到困惑。

这是一个例子：

<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>

当我使用 push/pull 在行中切换时，图像首先聚焦，按钮第二聚焦，即使它在桌面上显示为按钮第一，图像第二。我理解它为什么这样做，但这是可访问性的最佳实践吗？似乎会让用户感到困惑。如果这不是最佳做法，我将如何反转 Tab 键顺序？我是否需要浏览整个网页并为每个可聚焦元素设置 tabindex="0", "1", "2" 等？

Answer 1

你的Q有点笼统

无障碍问题：

Avoid using tabindex values greater than 0. Doing so makes it difficult for people who rely on assistive technology to navigate and operate page content. Instead, write the document with the elements in a logical sequence.

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

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

一些 HTML 元素默认是可聚焦的（buttons/links/Form 输入，等等）。

这个

的tab顺序

 <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.

If multiple elements share the same positive tabindex value, their order relative to each other follows their position in the document source 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 是 Tabbable。

<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>

Bootstrap 3 push/pull 和辅助功能

Bootstrap 3 push/pull and accessibility

html

accessibility

wcag

tabindex

twitter-bootstrap-3

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

“这个问题的答案：

Bootstrap 3 push/pull 和辅助功能

Bootstrap 3 push/pull and accessibility

html

accessibility

wcag

tabindex

twitter-bootstrap-3

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

“这个问题的答案：

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