Question

<div>有替代方案吗？我的网站正在失去“可访问性”，因为我无法将注意力集中在<div>上。我应该使用什么控制来复制<div>并仍然保持焦点？

这就是我的HTML：

<div style="height:70px; overflow:hidden" id="divMsg">
   <div class="DivClass">abcdefg abcdkfjghfjdfkj</div><br>
   <div class="DivClass">abcdefg abcdkfjghfjdfkj</div><br>
</div>

Answer 1

您可以添加tabindex以使其可聚焦;但是，这通常是不够的。如果您希望元素可单击，则还需要添加keydown或keypress处理程序，以便用户可以使用ENTER激活它，类似于A链接。否则，用户将能够对其进行制表，但可能无法对其后的链接执行任何操作。

如果您正在尝试创建可点击元素，则有时可以更简单地使用A标记开始，然后对其进行样式设置，使其看起来不像链接。一个元素响应键盘和鼠标以及两个触发点击，因此您不必像使用DIV那样进行额外的键盘输入处理。

最后，如果您正在制作视觉上看起来像按钮或其他控件的DIV或A，请添加相应的ARIA角色，以便屏幕阅读器调出相应的元素类型 - 例如。

<a HREF="javascript:void(0)" onclick="dosomething()" role="button">Complete Transaction</a>

Answer 2

只需给它一个tabindex属性。

Answer 3

如果您专门寻找辅助功能，请尝试新的HTML 5标记，例如<article>。因此，例如，文本阅读器知道要阅读的内容，并且您的页面结构更好。

查看此site。

Answer 4

要回答您的确切问题，这取决于您使用div的原因;我猜测布局。标签排序取决于tabindex以上，因为默认值和溢出会影响定位和焦点。

更具体地说，你不会使用div来锁定tabindex。依靠JavaScript和唯一ID; <div class="content" id="page1">

这也会为您提供一个锚点，以便您可以使用http://index.html#divMsg将焦点链接到HTML文档中的确切位置。请注意，您只有一个div ID，并在示例中重复使用两次相同的div类。 If this is all new to you the article on difference between ID and CLASS may be of interest to you

Answer 5

链接（元素a）和表单元素（输入文本和类似内容，文件，广播和复选框，提交，图片和类型按钮，选择，textarea，按钮元素，等）默认是可聚焦的 Thumb规则：如果元素执行某些操作，则它应该是表单的链接或表单元素部分。（OT：我想我在这里遇到了一个问题，但找不到确切的问题 - 英语不是我的母语）

在使用tabindex属性之前请三思（至少:)）：它会在你的项目中工作一段时间，然后你在其他地方进行一些修改，突然间一切都被打破了。它会一次又一次地破裂。

要使用Safari进行测试，您需要修改偏好设置：此浏览器（也可能是Chrome？）仅默认通过表单元素循环，而不是链接。键盘用户可以通过我想到的每个可聚焦元素循环，比如IE和Firefox。

为了进一步了解，Web内容可访问性指南2.0（WCAG 2.0）有关于 keyboard 使用的充足技术（以及“失败”）。

是否有接受焦点的<div>的替代方案？</div>

5 个答案: