screen-readers 相关问题

屏幕阅读器将读取设置为“ alt”属性的任何字符串。该属性专门用于图像标签。如果我有这样的div： 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更容易接受form元素。我认为这个“购物车”是一种形式或形式的一部分，如果您不喜欢它的边界，就语义而言，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。 * unested 示例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，您可能需要对其进行一些配置：单击实用程序菜单项。然后设置中心。语音和声音方案莫迪计划... 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 role。 <div role="img" alt="heart"> ♥︎ </div> 但是，仅在元素真正代表图像（例如心脏unicode字符）的情况下才应使用。如果元素包含实际文本，仅需要不同的阅读，则应将ARIA角色设置为text，然后将aria-label与想要由屏幕阅读器阅读的内容相加。参见WAI-ARIA text role。 <div role=text aria-label="Rating: 60%"> Rating: ★★★☆☆︎ </div> 不要与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"> 如果使用Bootstrap Framework，则有一个快速简便的解决方案。您应该在将要写入sr-only文本的sr-only sr-only-focusable元素中使用classes或span Bootstrap的CSS screen-reader-only。检查下面的示例，类别为span的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> 屏幕阅读器输出： “两个购物车项目” 由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; } 不，alt元素没有等效于<div>属性的属性。对于您要尝试做的事情，基于ARIA的解决方案是过大的。您不仅会遇到屏幕阅读器兼容性问题，而且还会在不需要它们的地方应用ARIA属性（如果在<div>之类的东西上，它们可能不属于它们）。相反，请考虑使用屏幕外技术（例如from The Paciello Group或WebAIM中的一种）。使用此技术隐藏的内容仍将由屏幕阅读器读取，但将在视觉上隐藏。通过阅读您的问题，我想这就是您想要的。我制作了a pen demonstrating this technique。在full-page version中进行测试可能会更容易。 Edit ：从示例中添加了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; } 根据text alternative computation algorithm of the W3C和Accessible Name and Description: Computation and API Mappings 1.1您绝对应该使用aria-label。话虽这么说，但它不适用于Jaws，对于这种昂贵的工具来说实在是太可惜了。剩下的选择是使用将转到您的购物车页面的链接，同时使用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" /> 尝试： 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的类将在可见的屏幕区域中隐藏跨度，但会将其读取为具有焦点的div中的跨度。您可以使用以下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/） [在div内使用带有标签作为alt属性的图像。这样，那些没有屏幕阅读器的人只会看到数字和图像，而那些没有屏幕阅读器的人会听到整个句子： <div> <img src="http://tny.im/57j" alt="Shopping cart items" /> 2 </div> 查看为：2 读取为：“购物车项目：2” alt属性存在于图像，因为无法“大声读取”图像内容，因此将使用提供的文本代替。但是对于div，它已经包含文本和图像。因此，如果希望屏幕阅读器可以读取它，则需要在div的内容中包含文本和alt文本。

javascript html css accessibility screen-readers

回答 8 投票 35

screen-readers 相关问题

最新问题