Question

屏幕阅读器将读取设置为＆＃34; alt＆＃34;的任何字符串。属性。此属性的使用专门用于图像标记。

如果我有这样的div：

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

有没有办法让屏幕阅读器拾取属性以读取字符串的方式与使用alt标签的方式相同？

因此，对于下面列出的div，屏幕阅读器会说ie：＆＃34;购物车项目2＆＃34;？

我尝试使用咏叹调标签，但屏幕阅读器不会捡起来：

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

Answer 1

尝试role="listitem"或role="group"和aria-labelledby="shopping cart items"。请参阅示例1 。 2是文本内容，屏幕阅读器应该已将其读取为内容的上下文。请参阅此section。

更新2

如果您使用输入，请添加aria-readonly=true role=textbox。如果怀疑是否使用aria-label或aria-labelledby，请阅读此article。在JAWS的documentation和测试中，我自己支持aria-label被忽略的事实。此外，当您关心可访问性时，语义非常重要。当你可以使用输入时使用div不是语义上的声音，就像我之前说的那样，JAWS比div更容易接受表单元素。我假设这个＆＃34;购物车＆＃34;是一种形式或形式的一部分，如果你不喜欢它的边界，input {border: 0 none transparent}或使用<output> *就语义而言，这将是A +。

对不起，@ RadekPech提醒我;我忘了添加使用aria-labelledby需要可见文本，并且文本需要一个id，它也被列为aria-labelledby的值。如果您因为美观而不想要文字，请使用color: transparent，line-height: 0或color:<same as background>。就DOM而言，这应该满足可视性*并且肉眼仍然是不可见的。请记住，这些措施是因为JAWS忽略了aria-label。

*未测试

实施例3

<span id="shopping">Shopping</span>&nbsp;
<span id="cart">Cart</span>&nbsp;
<span id="items">Items</span>&nbsp;
<input id='cart' tabindex="0" aria-readonly=true readonly role="textbox" aria-labelledby="shopping cart items" value='2'>

<小时/>

更新1

对于JAWS，您可能需要稍微配置一下：

单击 Utilities 菜单项。
然后设置中心。
言语和声音方案
Modiy Scheme ...
HTML 标签

在此特定对话框中，您可以添加特定属性以及元素选项卡时的内容。 JAWS将更容易响应表单元素，因为它们可以触发focus事件。您可以更轻松地执行示例2 ：

示例1

<div id=myCoolDiv tabindex="0" role="listitem" aria-labelledby="shopping cart items"> 2 <div>

示例2

<input id='semantic' tabindex="0" role="listitem" aria-labelledby="shopping cart items" value='2' readonly>

Answer 2

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

ARIA角色img的任何内容都必须（必须）具有alt属性。请参阅WAI-ARIA img role。
```
<div role="img" alt="heart">
♥︎
</div>
```

但是，只有在元素真正代表图像（例如心脏unicode字符）的情况下才应该使用它。

如果元素包含实际文本，只需要不同的阅读，则应将ARIA角色设置为text，并将aria-label添加到屏幕阅读器要读取的内容中。请参阅WAI-ARIA text role。
```
<div role=text aria-label="Rating: 60%">
Rating: ★★★☆☆︎
</div>
```

不要与aria-labeledby不匹配，alt应该包含相关元素的ID。

您可以使用两个ARIA角色将前两个案例合并为一个并添加aria-label和<div role="img text" alt="heart" aria-label="heart"> ♥︎ </div>：
```
<!DOCTYPE html>
```

当定义了更多ARIA角色时，浏览器应使用受支持的第一个角色，并处理具有该角色的元素。

最后一件重要的事情是您必须将网页类型设置为HTML5 （通过设计支持ARIA）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+ARIA 1.0//EN"
   "http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">

使用HTML4或XHTML需要特殊的DTD才能启用ARIA支持。

val typeTag = typeTag[Nothing]

Answer 3

如果您使用Bootstrap Framework，则可以快速轻松地解决问题。您应该在sr-only元素中使用sr-only sr-only-focusable或span Bootstrap的CSS classes，其中将写入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>

屏幕阅读器输出： “两个购物车项目”


由Fangs Screen Reader Emulator Addon for Firefox提供

您可以在此处找到上述工作示例：Fiddle

根据Oriol的建议，如果您不使用Bootstrap Framework，只需在CSS文件中添加以下内容。

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

Answer 4

不，没有相当于alt元素的<div>属性。

对于您要做的事情，基于ARIA的解决方案过度。您不仅会遇到屏幕阅读器兼容性问题，而且在不需要它们的情况下应用ARIA属性（如果像<div>这样的话，可以说不属于。）

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

通过阅读你的问题，我认为这就是你所追求的目标。

我做了a pen demonstrating this technique。在full-page version中进行测试可能更容易。

编辑：从示例中添加了HTML和CSS，但请注意，规格和浏览器/辅助技术支持会随着时间的推移而发生变化，因此如果您在一年内阅读此内容，则应继续使用上面的链接来验证此CSS仍然是当前的最佳实践。

HTML

 <div tabindex="0">
  <span class="offscreen">Items in shopping cart: </span>2
 </div>

CSS

.offscreen {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  /* for Internet Explorer */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

Answer 5

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

话虽如此，它对大白鲨并不起作用，对于这种昂贵的工具来说，这是一种耻辱。

其余选项是使用一个链接转到您的购物车页面，同时使用title和aria-label来满足任何人：

<a href="#cart" title="2 shopping cart items" aria-label="2 shopping cart items">2</a>

您还可以使用透明的1像素选项：

2 <img src="pixel.png" height="1" width="1" alt="shopping cart items" />

Answer 6

在div中使用标签作为其if (Enum.IsDefined(typeof(MyStatus), (int)_status)) { var status = (MyStatus)_status; Console.WriteLine(status); } else { Console.WriteLine("Not a valid value."); }属性的图像。这样，那些没有屏幕阅读器的人只能看到数字和图像，而那些有读者的人会听到整个句子：

alt

见：Shopping cart items http://icons.iconarchive.com/icons/icons8/ios7/16/Ecommerce-Shopping-Cart-Empty-icon.png 2

阅读：＆＃34;购物车项目：2＆＃34;

图片存在<div> <img src="http://tny.im/57j" alt="Shopping cart items" /> 2 </div>属性，因为无法大声朗读＆＃34;图像的内容，因此使用提供的文本。但对于div，它已经包含文本和图像。因此，如果您希望屏幕阅读器读取它，则需要在div的内容中包含text和alt文本。

Answer 7

尝试：

HTML

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

CSS

.aria-hidden {
  position: absolute;
  left: -100000px;
}

这将宣布跨度内的文字。父母div不会失去视觉焦点。 Aria隐藏类将隐藏可见屏幕区域的范围，但会将其读取为具有焦点的div内部。

Answer 8

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

.screen-reader-text { 
   clip: rect(1px, 1px, 1px, 1px); 
   height: 1px; 
   width: 1px; 
   overflow: hidden; 
   position: absolute !important;
}

然后，在您的代码中，您只需添加<span>屏幕阅读器文本即可：

<div>
I am a div!
<span class="screen-reader-text">This is my screen reader text</span> 
</div>

查看此处的示例：https://jsfiddle.net/zj1zuk9y/

（资料来源：http://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated/）

Answer 9

您可以在div中放置一个标题标签，该标签与alt标签一样，如下所示：

你好，世界

在浏览器中移动光标时，将显示“我是HELLO WORLD”

Answer 10

可访问性（屏幕阅读器）可以通过 role 上的 aria-label 和 div 标签实现。这在使用 svg 时非常有用。

<div role="img" aria-label="I can speak the text">
  <svg>...</svg>
</div>

是否有等同于＆＃34; alt＆＃34; div元素的属性？

10 个答案:

更新2

实施例3

更新1

示例1

示例2

HTML

CSS