是否有div元素的"alt"属性？
Kod*_*_12 36 html javascript css accessibility screen-readers
屏幕阅读器将读取设置为"alt"属性的任何字符串.此属性的使用专门用于图像标记.
如果我有这样的div:
<div id=myCoolDiv tabindex="0"> 2 <div>
有没有办法让屏幕阅读器拾取属性以读取字符串的方式与使用alt标签的方式相同？
因此,对于下面列出的div,屏幕阅读器会说:"购物车项目2"？
我尝试使用aria-label,但屏幕阅读器不会捡起它:
<div id=myCoolDiv tabindex="0" aria-label="shopping cart items"> 2 <div>
尝试role="listitem"或role="group"和aria-labelledby="shopping cart items".见例1.该2文本内容应由屏幕阅读器读取,该属性已被读取为内容的上下文.请参阅本节.
更新2
aria-readonly=true role=textbox如果使用输入,请添加.如果有疑问是否使用aria-label或aria-labelledby,请阅读本文.在JAWS 的文档和测试中,我自己支持aria-label被忽略的事实.此外,当您关心可访问性时,语义非常重要.当你可以使用输入时使用div不是语义上的声音,就像我之前说的那样,JAWS比div更容易接受表单元素.我假设这个"购物车"是表格或表格的一部分,如果你不喜欢它的边界,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>
<span id="cart">Cart</span>
<span id="items">Items</span>
<input id='cart' tabindex="0" aria-readonly=true readonly role="textbox" aria-labelledby="shopping cart items" value='2'>
更新1
对于JAWS,您可能需要稍微配置一下:
- 单击Utilities菜单项.
- 然后Settings Center.
- Speech and Sounds Schemes
- 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>
有两种方法（可以结合使用）使屏幕阅读器读取替代文本：
具有ARIA角色的任何事物
img都可以（必须）具有alt属性。请参阅WAI-ARIA img角色。
Run Code Online (Sandbox Code Playgroud)<div role="img" alt="heart"> ?? </div>
但是，仅在元素真正表示图像（例如心脏unicode字符）的情况下才应使用此方法。
如果元素包含实际文本，而只是需要不同的阅读，则应将ARIA角色设置为，
text并添加aria-label任何您希望屏幕阅读器阅读的内容。请参阅WAI-ARIA文字角色。
Run Code Online (Sandbox Code Playgroud)<div role=text aria-label="Rating: 60%"> Rating: ?????? </div>
不要与aria-labeledby应该包含相关元素ID的元素不匹配。
您可以使用两个ARIA角色并添加
alt和来将前两种情况组合为一种aria-label：
Run Code Online (Sandbox Code Playgroud)<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">
小智 5
您可以title在 div 中放置一个标签，它的作用与alt标签相同，如下所示：
<div title="I AM HELLO WORLD">HELLO WORLD</div>
一旦您在浏览器上移动光标，就会打印“I AM HELLO WORLD”
rvi*_*hne -1
在 div 内使用具有标签作为其alt属性的图像。这样，没有屏幕阅读器的人只能看到数字和图像，而有阅读器的人会听到整个句子：
<div>
<img src="http://tny.im/57j" alt="Shopping cart items" />
2
</div>
被视为：
2
读作：“购物车商品：2”
该alt属性存在于图像中，因为无法“大声朗读”图像的内容，因此使用提供的文本来代替。但对于 div，它已经包含文本和图像。因此，如果您希望屏幕阅读器能够读取它，则需要在 div 的内容中包含文本和替代文本。