是否有等于div元素的“ a lt”属性？

Question

屏幕阅读器将读取设置为“ alt”属性的任何字符串。此属性专门用于图像标签。

如果我有这样的div：

<div id=myCoolDiv tabindex="0"> 2 <div>

是否有一种方法让屏幕阅读器获取一个属性来读取字符串，就像使用alt标签一样？

因此，对于下面列出的div，屏幕阅读器会说：“购物车项目2”？

我尝试使用aria标签，但屏幕阅读器无法识别它：

<div id=myCoolDiv tabindex="0" aria-label="shopping cart items"> 2 <div>

Answer 1

尝试role="listitem"或role="group"和aria-labelledby="shopping cart items"。参见示例1

Answer 2

有两种方法（可以结合使用）让屏幕阅读器阅读替代文本：

1. 具有ARIA角色的任何事物img都可以（必须）具有alt属性。参见WAI-ARIA img role。

   <div role="img" alt="heart">
   ♥︎
   </div>
   

Answer 3

如果使用Bootstrap Framework，则有一个快速简便的解决方案。您应该在将要写入sr-only文本的sr-only sr-only-focusable元素中使用classes或span Bootstrap的CSS screen-reader-only。

检查下面的示例，类别为span的glyphicon glyphicon-shopping-cart元素也用作购物车图标。

<div id="myCoolDiv">
<h5>
<span class="glyphicon glyphicon-shopping-cart"></span> 2  
<span class="sr-only sr-only-focusable" tabindex="0">shopping cart items</span>
</h5>
<div>

Answer 4

不，alt元素没有等效于<div>属性的属性。

对于您要尝试做的事情，基于ARIA的解决方案是过大的。您不仅会遇到屏幕阅读器兼容性问题，而且还会在不需要它们的地方应用ARIA属性（如果在<div>之类的东西上，它们可能不属于它们）。

相反，请考虑使用屏幕外技术（例如from The Paciello Group或WebAIM中的一种）。使用此技术隐藏的内容仍将由屏幕阅读器读取，但将在视觉上隐藏。

Answer 5

根据text alternative computation algorithm of the W3C和Accessible Name and Description: Computation and API Mappings 1.1您绝对应该使用aria-label。

话虽这么说，但它不适用于Jaws，对于这种昂贵的工具来说实在是太可惜了。

剩下的选择是使用将转到您的购物车页面的链接，同时使用title和aria-label来满足任何人：

Answer 6

尝试：

HTML

<div id=myCoolDiv tabindex="0"><span class="aria-hidden">shopping cart items</span>2<div>

Answer 7

您可以使用以下CSS创建一个类，例如screen-reader-text：

.screen-reader-text { 
   clip: rect(1px, 1px, 1px, 1px); 
   height: 1px; 
   width: 1px; 
   overflow: hidden; 
   position: absolute !important;
}
然后，在您的代码中，您只需添加带有屏幕阅读器文本的<span>：

Answer 8

[在div内使用带有标签作为alt属性的图像。这样，那些没有屏幕阅读器的人只会看到数字和图像，而那些没有屏幕阅读器的人会听到整个句子：

<div>
    <img src="http://tny.im/57j" alt="Shopping cart items" />
    2
</div>
查看为：2