使用键盘访问html标签,并使用屏幕阅读器软件使其可读



目前我正在使用锚定标签使标签可以通过键盘访问,并使用屏幕阅读器软件(Jaws或thunder中的任何一个)可读。

例如,我发现的解决方案如下所述:而不是使用:-

<label for="I am label">I am label</label>

我正在使用:-

<a href="#" style="text-decoration:none">I am label</a>

我想要一些替代的方式,我不必为标签提供锚标签,标签应该可以使用键盘访问,并且应该可以通过屏幕阅读器软件读取。。。

您可以进行一些欺骗,并使用tabindex属性创建一个表单元格,以便对其进行制表。然而,tabindexes需要大量维护——每次向页面中添加属于制表顺序的新元素时,都必须更新它们。

从语义上讲,您应该使用<caption>元素来标记表,但也不能用制表符标记<caption>元素。你可以把你的标题放在<th>元素中,如果这是你真正想要的,可以在上面加标签。请记住,这在语义上不如使用<caption>,因为<th>指定的是行或列的标题,而不是整个表。

这里有一个示例,您可以制表到<input>元素,正如注释者所建议的那样,该元素使用标签元素正确标记,然后制表到按tabindex属性排序的表单元格。我在NVDA中测试了这个例子。

<html>
<head>
<title>Screen Reader Test</title>
</head>
<body>
<label for="firstName">First Name:</label>
<input id="firstName" type="text" />
<br />
<table>
    <tr>
        <th colspan="2">Fruit Prices</th>
    </tr>
    <tr>
        <th tabindex="3">Apples</th>
        <th tabindex="4">Oranges</th>
    </tr>
    <tr>
        <td tabindex="4">$0.50</td>
        <td tabindex="5">$1.00</td>
    </tr>
</table>
</body>
</html>

来源:Tabindexhttp://webaim.org/techniques/keyboard/tabindex#spec

标题标签http://www.w3schools.com/tags/tag_caption.asp

最新更新