是否有与 div 元素的“alt”属性等价的属性？答案

【问题标题】：Is there an equivalent to the "alt" attribute for div elements?是否有与 div 元素的“alt”属性等价的属性？
【发布时间】：2016-11-17 17:16:34
【问题描述】：

屏幕阅读器将读取设置为“alt”属性的任何字符串。该属性的使用是专门针对图片标签的。

如果我有一个如此：

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

有没有办法让屏幕阅读器拾取一个属性来读取字符串，就像使用 alt 标签一样？

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

我尝试使用 aria-label，但屏幕阅读器无法识别：

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

【问题讨论】：

标题怎么样？ span>
@ singebateur：你确定title属性是通过屏幕阅读器读取的吗？ HTML5 spec 明确不鼓励将其用于可访问性。
我鼓励您查看off-screen techniques 之一，该off-screen techniques 专门设计用于向屏幕阅读器用户提供额外内容，同时对有视力的用户隐藏这些内容。另外，请避免在任何不是真实控制的任何内容上放置tabindex。 span>
@Kode_12 你使用 Bootstrap 吗？你可以使用sr-only 类来达到你的目的。
屏幕阅读器不会读取您的aria-label，因为DIV 没有默认的ARIA role。您必须设置 role 以激活 aria-* 属性。

标签： javascript html css accessibility screen-readers

【解决方案1】：

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

任何具有 ARIA 角色 img 的东西都可以（必须）具有 alt 属性。见WAI-ARIA img role。
```
 <div role="img" alt="heart">
 ♥︎
 </div>
```

更新：2017 年，WAI-ARIA 文档已更改，以下文本不再适用。 见下面的 cmets。

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

如果一个元素包含实际文本，只是需要不同的阅读，你应该将 ARIA 角色设置为text 并添加aria-label 任何你想被屏幕阅读器阅读的内容。见WAI-ARIA text role。

<div role="text" aria-label="Rating: 60%"> Rating: ★★★☆☆︎ </div>

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

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

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

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

<!DOCTYPE html>

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

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

【讨论】：

ARIA 角色值绝不是空格分隔的列表。之所以使用列表中的第一项，是因为其余的无效。一个元素只能被分配一个角色，没有例外，AFAIK。
@zer00ne "角色属性的值是一个或多个空格分隔的 TERMorCURIEorAbsIRI，在 RDFa Core 1.1 中定义。"见WAI-ARIA Role Attribute 1.0
我同意，先生。我不知道第一个参考是什么，但我理解第二个。
在测试中，role="text" 在 Chrome 上与 NVDA 配合得很好。不适用于 Firefox 上的 NVDA。
@RadekPech 在 WAI-ARIA 角色的链接中，没有文本角色。 w3c html 验证器说“文本”对于角色属性来说是一个错误的值。验证器还抱怨在 div 标签上使用 alt 属性。 adrianroselli.com/2016/12/accessible-emoji-tweaked.html 谈到结合使用 role="img" 和 aria-label="some description"。

【解决方案2】：

试试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 更容易接受表单元素。我假设这个“购物车”是一个表单或表单的一部分，如果你不喜欢它的边框，input {border: 0 none transparent} 或使用<output>*，就语义而言，这将是 A+。

抱歉，@RadekPech 提醒了我；我忘了补充说使用aria-labelledby 需要可见文本，并且文本需要一个ID，该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，您可能需要稍微配置一下：

单击实用程序菜单项。
然后是设置中心。
语音和声音方案
Modiy 方案...
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>

【讨论】：

JAWS 使用什么浏览器？我添加了关于 JAWS 的更新。
互联网浏览器 11
属性aria-labeledby是对相关标签元素的引用。对于实际标签是属性aria-label。
请注意，用户不会更改他们的 JAWS 配置来阅读您的内容。我从经验中知道这一点。
@aardrian 所以你为每个明显受损的人说话？ OP 要求 JAWS 是游戏的名称并使用 div。我的经验是帮助有特殊需要的客户操作所提供的设备，这些设备已准备好正确使用。

【解决方案3】：

您可以在 div 中放置一个 title 标记，其作用与 alt 标记相同，如下所示：

<div title="I AM HELLO WORLD">HELLO WORLD</div>

“I AM HELLO WORLD”将在您在浏览器上移动光标后打印出来

【讨论】：

【解决方案4】：

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

查看以下示例，glyphicon glyphicon-shopping-cart 类的 span 元素也用作购物车图标。

<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 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;
}

【讨论】：

如果不使用bootstrap，可以到its stylesheet复制.sr-only样式。
我知道 sr-only 属性，但这会隐藏 div。出于我的目的，我需要一个视觉指示器来显示屏幕阅读器正在阅读的 div。
@Kode_12，您可以结合sr-only sr-only-focusable 类来显示焦点上的文本

【解决方案5】：

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

话虽如此，它不适用于 Jaws。仅针对具有 ARIA 角色的元素计算文本替代。

剩下的选择是使用一个链接到您的购物车页面，同时使用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" />

【讨论】：

【解决方案6】：

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

对于您正在尝试做的事情，基于 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;
}

【讨论】：

我知道“隐藏”的 div 来实现这一点，但这对我没有帮助。屏幕阅读器应该正在阅读 FOCUSED 元素中的内容。因此，如果我有一个隐藏的 div，屏幕阅读器将不会有正在阅读的内容的视觉指示器
我很困惑，你说的“视觉指示器”是什么意思？我们谈论的是屏幕阅读器，那么这个视觉指示器是为开发人员设计的吗？
当可聚焦元素获得焦点时，本机浏览器视觉指示器将用虚线边框包裹该 div。因此，如果我有一个 div 生成，比如说一个数字，屏幕阅读器将在获得焦点时读取该数字。但是，如果我要为屏幕阅读器添加一个隐藏的 div，其中包含对该数字所代表内容的更多描述，则需要使用选项卡切换到该 div（尽管它仍然是隐藏的）以供屏幕阅读器阅读。出于我的目的，我正在寻找一种方法来在焦点元素中包含对 div 的描述，而不是创建额外的。我希望澄清一些事情
该视觉指示器对屏幕阅读器用户没有任何作用。无论如何，<div> 的视觉隐藏嵌套子级被读取。如果您认为它必须获得焦点才能让屏幕阅读器听到，则不需要。但是，如果您坚持，那么只需将tabindex=0 放在<div> 上。无论如何，我添加了一个tabindex。你在 JAWS 中测试过吗？它按您指定的方式执行。它宣布嵌套文本。
对于一些非盲人的屏幕阅读器用户来说，失去视觉焦点指示器可能会令人不安（认知问题、阅读障碍、视力不佳的人）。

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

试试：

HTML

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

CSS

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

这将宣布跨度内的文本。并且 Parent div 不会失去视觉焦点。 Aria-hidden 类将隐藏可见屏幕区域的跨度，但会将其读取为它在具有焦点的 div 内。

【讨论】：

为什么不使用 {display:none;说话：正常；} ? （而不是将元素放在屏幕之外）
这是个好建议。但是有显示的元素：无；某些屏幕阅读器不会阅读。例如，我在带有 Vox 阅读器扩展的 chrome 中尝试了这种方法。它没有被阅读。从屏幕上隐藏它是一种可靠的方法。为了隐藏，我们也可以在 span 上使用 hidden 属性。但即使是 NVDA 也没有读取。

【解决方案9】：

您可以使用以下 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/）

【讨论】：

【解决方案10】：

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

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

被视为： 2

读作：“购物车商品：2”

图像存在alt 属性，因为无法“大声朗读”图像的内容，因此使用提供的文本。但对于 div，它已经包含文本和图像。因此，如果您希望它被屏幕阅读器阅读，您需要在 div 的内容中包含 text 和 alt 文本。

【讨论】：

我只是以购物车为例，我需要一个没有图像的简单div来渲染
@Kode_12：我明白了。如果您不需要任何图像，那么@zer00ne's answer 可能就是您想要的；否则，这是最简单的解决方案