Bootstrap 3 推/拉和可访问性

Question

我正在努力使我们的网页更易于访问，但我对推/拉部分的标签顺序感到困惑。

这是一个例子：

<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" 等？

Answer 1

你的 Q 有点笼统。

可访问性问题：

避免使用大于 0 的 tabindex 值。这样做会使 依赖辅助技术的人难以导航和 操作页面内容。相反，编写包含元素的文档 一个逻辑顺序。

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

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

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

这个的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.

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

document source = 通过 CSS flexbox、grid 等更改顺序将不影响 Tab 键顺序。因此，辅助技术导航按正确顺序显示您的内容。

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>

在下面的示例中，div 由于 tabindex 是 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>