2017-09-27 97 views
0

我试图找出一种忽略装饰性文字的方式,类似于忽略使用空的alt装饰性图像。如何忽略可访问性原因的装饰性文字

实施例:

<!-- This is decorative image --> 
<img src="example.jpg" alt=""> 

<!-- This should be decorative text or element --> 
<div> 
    Some decorative text line 
    <div> 
     Another decorative text line 
    </div> 
</div> 

CSS是无用的。

aria-hidden是 - “表示该元素及其所有的后代是不可见或可感知到由作者实施的任何用户” - 所以它不是一个选项。

+0

[有没有写屏幕阅读器会忽略的内容的方法?](https://stackoverflow.com/questions/672156/is-there-a-way-to-write-content-that- screen-readers-will-ignore) – Anodyne

+0

@Anodyne不,没有答案,但是谢谢。 – lessismore

回答

1

文档中最重要的部分是解释

直接通过DOM一些辅助技术访问WAI-ARIA的信息,而不是通过平台的无障碍浏览器支持。无论用于隐藏它的机制,作者都必须在未显示的内容上设置aria-hidden="true"。这允许辅助技术或用户代理正确地跳过文档中的隐藏元素。

设置aria-hidden="true"不会在标准浏览器上将屏幕上的元素隐藏起来。这是实用的解决方案。

问题是,你想做的事永远不会被访问。

只要文字在屏幕上可见,视觉上缺乏视觉缺陷的人就会想要阅读他认为是文本的东西。如果你从可访问的树中隐藏这些可以理解的文本,这个人将无法实现其他具有全部视野的人可以做的事情。

+0

也许我不明白'alt =“”'是如何工作的。是'alt =“”'图片的'aria-hidden =“true”'的快捷方式吗?例如,将 lessismore

+0

具有空alt属性的'img'具有隐含的“演示”角色。 “演示”角色不会从可访问性树中删除元素,但会删除其本地语义。请参阅https://www.w3.org/TR/wai-aria-practices/#presentation_role_effects – Adam

+0

但是,不删除'img'元素的本地语义会将其从可访问性树中删除?如果没有,那么它仍然保留在可访问性树中的原因是什么?还有一件事:如果我在装饰文本上使用相同的方式 - 通过将'tabindex'设置为'-1'并为'presentation'设置'role',我将使其无法执行,当然也会根据子元素如果需要 - 它会保留在可访问性树中以及img? Adam – lessismore

0

正确的做法是使用aria-hidden="true"期间。

我同意你在你的W3C Spec for Aria-Hidden阅读的报价:

不可见或感知到任何用户...

但是,如果你继续进一步阅读,你将会看到:

作者MAY,如果隐藏此内容的行为旨在通过删除冗余或无关内容来改善辅助技术用户的体验,请使用隐藏咏叹调来隐藏辅助技术中明显呈现的内容仅限。使用咏叹调隐藏的作者隐藏屏幕阅读器中的可见内容必须确保相同或相当的含义和功能暴露于辅助技术。

此外,你可以去的另一条路线是将文本内容转换为图像,然后使用空白alt属性来表明它是装饰图像。根据您的具体情况,这可能会或可能不会更好。