是否有等同于"alt"的div元素的属性? [英] Is there an equivalent to the "alt" attribute for div elements?

问题描述

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

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

如果我有这样的div:

If I have a div like so:

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

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

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

那么对于下面列出的div，屏幕阅读器会说:购物车项目2"?

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

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

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

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

推荐答案

尝试role="listitem"或role="group"和aria-labelledby="shopping cart items".请参阅示例1 . 2是文本内容，应已由屏幕阅读器读取，并且属性已作为内容的上下文读取.请参阅此部分.

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

添加aria-readonly=true role=textbox(如果使用输入).如果不确定是使用aria-label还是aria-labelledby，请阅读文章.在JAWS的文档中并对其进行测试，我自己支持aria-label被忽略的事实.此外，当您关注可访问性时，语义非常重要.当您可以使用输入时使用div在语义上并不合理，就像我之前说的那样，JAWS比div更容易接受form元素.我认为这个购物车"是一种形式或形式的一部分，如果您不喜欢它的边框，就语义而言，input {border: 0 none transparent}或使用<output> *都是A +.

Add aria-readonly=true role=textbox if you use an input. If there are doubts whether to use aria-label or aria-labelledby, read this article. In the documentation for JAWS and testing it myself supports the fact that aria-label is 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.

对不起，@ RadekPech提醒我；我忘了补充一点，使用aria-labelledby需要可见的文本，并且该文本需要一个ID，该ID也作为aria-labelledby的值列出.如果出于美观原因不希望使用文本，请使用color: transparent，line-height: 0或color:<same as background>.就DOM而言，这应该满足可见性*，并且仍然是肉眼看不见的.请记住，这些措施是因为JAWS忽略了aria-label.

Sorry, @RadekPech reminded me; I forgot to add that using aria-labelledby needs 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.

*未测试

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

---

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

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

1. 单击实用程序菜单项.
2. 然后设置中心.
3. 语音和声音方案
4. 情绪计划...
5. HTML 标签

1. Click the Utilities menu item.
2. Then Settings Center.
3. Speech and Sounds Schemes
4. Modiy Scheme...
5. HTML Tab

在这个特定的对话框中，您可以添加特定的属性以及将元素制表符时的内容. JAWS将可以更轻松地响应表单元素，因为它们可以触发focus事件.相反，您可以更轻松地进行示例2 :

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 focus event. You'll have an easier time doing Example 2 instead:

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

这篇关于是否有等同于"alt"的div元素的属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！