问题描述
屏幕阅读器将读取设置为alt"属性的任何字符串.此属性的使用专门用于图像标签.
如果我有一个像这样的 div:
2 有没有办法让屏幕阅读器选择一个属性来读取字符串，就像使用 alt 标签一样?
所以对于下面列出的 div，屏幕阅读器会说:购物车项目 2"?
我尝试使用 aria-label 但屏幕阅读器不会选择它:
2 解决方案 有两种方式(可以组合)让屏幕阅读器阅读替代文本:
任何具有 ARIA 角色 img 的东西都可以(必须)具有 alt 属性.请参阅 WAI-ARIA img 角色.
♥︎
但是，只有在元素真正代表图像(例如心脏 Unicode 字符)的情况下才应使用此方法.
如果一个元素包含实际文本，只需要不同的阅读，你应该将 ARIA 角色设置为 text 并添加任何你想要的 aria-label由屏幕阅读器阅读.请参阅WAI-ARIA 文本角色.
评分:★★★☆☆︎
不要将它与 aria-labeledby 不匹配，后者应该包含相关元素的 ID.
您可以使用两个 ARIA 角色并添加 alt 和 aria-label 将前两种情况合二为一:
♥︎
当定义更多 ARIA 角色时，浏览器应使用第一个支持的角色并处理具有该角色的元素.
最后一件重要的事情是您必须将页面类型设置为 HTML5(设计上支持 ARIA).
使用 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">
Screenreaders will read whatever string is set to the "alt" attribute. The use of this attribute is specifically for image tags.
If I have a div like so:
<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?
So for the div listed below, the screen reader will say ie: "shopping cart items 2"?
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>
解决方案 There are two ways (which can be combined) to have screen reader to read alternative text:
Anything with ARIA role img can (MUST) have alt attribute. See WAI-ARIA img role.
<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).
If an element contain actual text, that just need different reading, you should set ARIA role to text and add aria-label with whatever you want to be read by the screen reader. See WAI-ARIA text role.
<div role="text" aria-label="Rating: 60%">
Rating: ★★★☆☆︎
</div>
Do not mismatch it with aria-labeledby which should contain ID of an related element.
You can combine the previous two cases into one using two ARIA roles and adding both alt and 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.
One last important thing is that you must set page type to HTML5 (which support ARIA by design).
<!DOCTYPE html>
Using HTML4 or XHTML requires special DTD to enable ARIA support.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+ARIA 1.0//EN"
"http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">
这篇关于是否有等效于“alt"?div 元素的属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
08-11 23:59