Question

我正在使用屏幕阅读器（Chrome Vox）来测试我网站的可访问性。问题是，在阅读菜单后，读者会跳过所有内容并直接进入页脚。

这种行为的主要原因是什么？

Answer 1

在回答这个问题之前，我恳请您查看一个合适的屏幕阅读器进行测试。 ChromeVox适用于高级测试，但不会提供与VoiceOver，JAWS，NVDA，讲述人或Orca相同的体验。

现在回答你的问题。您的tabindex实例具有正值。

当浏览适用于屏幕阅读器用户和键盘用户的页面时，任何具有正tabindex值的内容都将在页面上的其他可聚焦内容之前获得焦点。

以下是四个地方：

<input name="fname" class="olark-form-input" id="olark-form-input-fname" placeholder="" tabindex="1" autocomplete="on" required="" data-reactid=".0.3.1.1.0.0:$fname.0" type="text">

<input name="email" class="olark-form-input" id="olark-form-input-email" placeholder="" tabindex="2" autocomplete="on" required="" data-reactid=".0.3.1.1.0.0:$email.0" type="email">

<input name="phone" class="olark-form-input" id="olark-form-input-phone" placeholder="" tabindex="3" autocomplete="on" required="" data-reactid=".0.3.1.1.0.0:$phone.0" type="tel">

<textarea class="olark-form-message-input" tabindex="4" name="body" id="olark-form-input-body" placeholder="Escreva sua mensagem." title="Escreva sua mensagem." required="" data-reactid=".0.3.1.1.0.0:$body.0.1" style="height: 26px !important;"></textarea>

最简单的解决方案是完全删除tabindex值，因为它没有添加任何值，只会使某些用户的页面复杂化。

以下是tabindex最佳做法的一些提示（使用more detail in this post）：

<强> tabindex="-1"

设置tabindex =＆＃34; -1＆＃34;允许您使用脚本设置元素的焦点，但不会将其放在页面的Tab键顺序中。当您需要将焦点移动到通过脚本或用户操作之外更新的内容时，这非常方便。

<强> tabindex="0"

设置tabindex =＆＃34; 0＆＃34;将采取一个元素，使其可以集中精力。它没有按Tab键顺序设置元素的位置，它只允许用户按照DOM的位置确定的顺序聚焦元素。

tabindex="1"（或任何值> 0）

不要设置tabindex =＆＃34; 1＆＃34;或任何大于零的值（或任何正值）。

屏幕阅读器跳过内容

1 个答案: