Javascript 是否有与 div 元素的“alt”属性等效的属性？

Is there an equivalent to the "alt" attribute for div elements?

提问by Kode_12

Screenreaders will read whatever string is set to the "alt" attribute. The use of this attribute is specifically for image tags.

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

If I have a div like so:

如果我有一个像这样的 div：

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

Is there a way to have a screen reader pickup an attribute to read a string the same way an alt tag is used?

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

So for the div listed below, the screen reader will say ie: "shopping cart items 2"?

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

I tried using aria-label but the screenreader won't pick it up:

我尝试使用 aria-label 但屏幕阅读器不会选择它：

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

回答by zer00ne

Try role="listitem"or role="group"and aria-labelledby="shopping cart items". See Example 1. The 2is text content which should be read by screen reader already with the attribute read as context to the content. Refer to this section.

尝试role="listitem"或role="group"和aria-labelledby="shopping cart items"。参见示例 1。该2是文本内容应当由屏幕阅读器已经与属性改为上下文的内容来读。请参阅本节。

UPDATE 2

更新 2

Add aria-readonly=truerole=textboxif you use an input. If there are doubts whether to use aria-labelor aria-labelledby, read this article. In the documentationfor JAWS and testing it myself supports the fact that aria-labelis ignored. Furthermore, semantics are very important when accessibility is your concern. Using a div when you could use an input is not semantically sound and like I said before, JAWS would accept a form element more readily than a div. I assume that this "shopping cart" is a form or part of a form, and if you don't like it's borders, input {border: 0 none transparent}or use <output>* which would be A+ as far as semantics are concerned.

aria-readonly=truerole=textbox如果使用输入，则添加。如果有怀疑是否使用aria-label或aria-labelledby，读此文章。在JAWS的文档和测试中，我自己支持aria-label被忽略的事实。此外，当您关心可访问性时，语义非常重要。当您可以使用输入时使用 div 在语义上是不合理的，就像我之前所说的，JAWS 比 div 更容易接受表单元素。我假设这个“购物车”是一种形式或形式的一部分，如果你不喜欢它的边框，input {border: 0 none transparent}或者使用<output>* 就语义而言这将是 A+。

Sorry, @RadekPech reminded me; I forgot to add that using aria-labelledbyneeds visible text and that the text needs an id which is also listed as the value(s) of aria-labelledby. If you don't want text because of aesthetics, use color: transparent, line-height: 0, or color:<same as background>. That should satisfy visibility as far as the DOM is concerned* and still be invisible to the naked eye. Keep in mind these measures are because JAWS ignores aria-label.

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

*untested

*未经测试

EXAMPLE 3

例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'>

---

---

UPDATE 1

更新 1

For JAWS, you probably have to configure it a little:

对于 JAWS，您可能需要对其进行一些配置：

1. Click the Utilitiesmenu item.
2. Then Settings Center.
3. Speech and Sounds Schemes
4. Modiy Scheme...
5. HTMLTab

1. 单击Utilities菜单项。
2. 然后Settings Center。
3. Speech and Sounds Schemes
4. Modiy Scheme...
5. HTML标签

In this particular dialog box, you can add specific attributes and what is said when an element is tabbed to. JAWS will respond to form elements easier because they can trigger the focusevent. You'll have an easier time doing Example 2instead:

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

EXAMPLE 1

例 1

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

EXAMPLE 2

例2

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

回答by Radek Pech

There are two ways (which can be combined) to have screen reader to read alternative text:

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

1. Anything with ARIA role imgcan (MUST) have altattribute. See WAI-ARIA img role.

   <div role="img" alt="heart">
   ??
   </div>
   

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

   <div role="img" alt="heart">
   ??
   </div>
   

However this should be used only in case the element really represent an image (e.g. the heart unicode character).

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

1. If an element contain actual text, that just need different reading, you should set ARIA role to textand add aria-labelwith whatever you want to be read by the screen reader. See WAI-ARIA text role.

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

2. 如果一个元素包含实际文本，只需要不同的阅读，您应该将 ARIA 角色设置为text并添加aria-label您希望屏幕阅读器阅读的任何内容。请参阅WAI-ARIA 文本角色。

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

Do not mismatch it with aria-labeledbywhich should contain ID of an related element.

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

1. You can combine the previous two cases into one using two ARIA roles and adding both altand aria-label:

   <div role="img text" alt="heart" aria-label="heart">
   ??
   </div>
   

3. 您可以使用两个 ARIA 角色并添加altand将前两种情况合二为一aria-label：

   <div role="img text" alt="heart" aria-label="heart">
   ??
   </div>
   

When more ARIA roles are defined, browser should use the first one that is supported and process the element with that role.

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

---

---

One last important thing is that you must set page type to HTML5(which support ARIA by design).

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

<!DOCTYPE html>

Using HTML4 or XHTML requires special DTD to enable ARIA support.

使用 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">

回答by Peter Darmis

In case you use Bootstrap Frameworkthere is a quick and easy solution. You should use sr-onlyor sr-only sr-only-focusableBootstrap's CSS classesin a spanelement where your screen-reader-onlytext will be written.

如果您使用Bootstrap 框架，有一个快速简便的解决方案。您应该在要写入文本的元素中使用sr-only或sr-only sr-only-focusableBootstrap 的 CSS类。spanscreen-reader-only

Check the following example, a spanelement with class glyphicon glyphicon-shopping-cartis also used as cart icon.

检查以下示例，span带有 class的元素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>

Screen Reader Output:"two shopping cart items"

• provided by Fangs Screen Reader EmulatorAddon for Firefox

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

• 由Fangs Screen Reader EmulatorAddon for Firefox 提供

You can find the above working example in this: Fiddle

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

As suggested by Oriol, in case you don't use Bootstrap Frameworkthen simply add the following in your CSS file.

正如Oriol所建议的，如果您不使用Bootstrap 框架，那么只需在您的 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;
}

回答by Adam

According to the text alternative computation algorithm of the W3Cand the Accessible Name and Description: Computation and API Mappings 1.1you definitely should use aria-label.

根据W3C的文本替代计算算法和 Accessible Name and Description: Computation and API Mappings 1.1你绝对应该使用aria-label.

That being said, it does not work with Jaws. Text alternative is only computed for elements having an ARIA role.

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

The remaining option is to use a link that will go to your cart page, using both titleand aria-labelto satisfy anyone:

剩下的选项是使用一个链接，该链接将转到您的购物车页面，同时使用title并aria-label满足任何人：

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

You can also use a transparent 1 pixel option:

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

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

回答by aardrian

No, there is no equivalent to an altattribute for <div>elements.

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

For what you are trying to do, an ARIA-based solution is overkill. Not only are you bumping into screen reader compatibility problems, you are applying ARIA attributes where they are not needed (and arguably do not belong if on something like a <div>).

对于您正在尝试做的事情，基于 ARIA 的解决方案是矫枉过正的。您不仅会遇到屏幕阅读器兼容性问题，还会在不需要它们的地方应用 ARIA 属性（并且可以说不属于类似 a 的东西<div>）。

Instead, consider using an off-screen technique (such as this one from The Paciello Groupor this one from WebAIM). Content hidden using this technique will still be read by screen readers but will be visually hidden.

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

From reading your question, I think this is what you are after.

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

I made a pen demonstrating this technique. It may be easier to test in the full-page version.

我制作了一支钢笔来演示这种技术。在整页版本中测试可能更容易。

Edit: Added HTML and CSS from the example, but please note that both the specs and browser / assistive technology support change over time, so if you are reading this in a year you should continue to use the links above to verify this CSS is still the current best practice.

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

HTML

HTML

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

CSS

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

回答by UIPassion

Try:

尝试：

HTML

HTML

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

CSS

CSS

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

This will announce the text inside the span. And the Parent div will not lose visual focus. Aria-hidden class will hide the span from the visible screen area but will read it as its inside the div that has focus.

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

回答by Ashwin Ramaswami

You can create a class such as screen-reader-text with the following css:

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

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

Then, in your code, you can just add a <span>with the screenreader text as so:

然后，在您的代码中，您可以<span>像这样添加带有屏幕阅读器文本的a ：

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

See an example over here: https://jsfiddle.net/zj1zuk9y/

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

(Source: http://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated/)

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

回答by Serge Gavrilov

You can just put a title tag in the div which will do the same as an alt tag like so:

您可以在 div 中放置一个标题标签，它的作用与 alt 标签相同，如下所示：

你好，世界

"I AM HELLO WORLD" will be printed once you move your cursor around it on a browser

一旦您在浏览器上移动光标，就会打印“I AM HELLO WORLD”

回答by rvighne

Use an image inside the div that has the label as its altattribute. That way, those without screen readers just see the number and an image, whereas those with readers will hear the whole sentence:

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

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

Seen as: 2

Read as: "Shopping cart items: 2"

视为：2

阅读为：“购物车项目：2”

The altattribute exists for images because there is no way to "read aloud" the content of the image, so the provided text is used instead. But for the div, it already contains text and images. Therefore, if you want it to be read by a screen-reader, you need to include the text and alt text in the content of the div.

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