屏幕阅读器和CSS:我们是否会走出风格(并进入内容)?

开发人员经常会问各种CSS声明如何转换为屏幕阅读器体验严格可视的属性 - 如颜色,边框,字体,边距,填充 - 是透明的,但那些注入内容的属性,如::之前::后? What about properties that communicate meaning, like列表样式行通? And then there are those that visually position or crop content, like,位置,显示,溢出,高度,宽度,能见度......列表还在继续我们都知道使用CSS生成内容很糟糕就像我们都知道我们永远不应该超过速度限制一样它会发生。

今年早些时候,我和三位同事测试并记录了屏幕阅读器中一些广泛使用的CSS声明的行为,将屏幕阅读器用户设置保留为默认值我们报告的发现AccessU 2017并将再次提出一些新材料进入更高的地面

除了自己,我们的团队包括CB Averitt和史蒂夫Sawczyn双端队列,和贡纳尔松Birkir勇于承担who重任我们测试了以下屏幕阅读器 - 浏览器配对:

  • 下巴/ IE 11
  • 下巴/铬
  • JAWS /火狐
  • NVDA /火狐
  • NVDA /镀铬
  • VoiceOver会/ Safari浏览器
  • VoiceOver / Mobile Safari
  • 对讲/移动Chrome

关键要点

不同的屏幕阅读器/浏览器配对表现不同。

如果你这样做,那就很容易断言X,“屏幕阅读器”将宣布ÿ有时候真的只是那么简单,但在一个惊人数量的情况下,它并不是绝对的例如:

  • 在我们测试的配对中,计数器三种不同的方式宣布(CSS计数器是“变量”由CSS的值可以通过CSS规则,增加跟踪多少次使用它们)。
  • 运用垂直对齐:超在我们的一半配对中工作的美元金额内的美分In the other half, $1299宣布为1,299美元。
  • 应用过渡到opacity:0; visibility:hidden在一个段落中,我们在八个配对中记录了五种略有不同的行为。

DOM命令就是一切。

我们发现的一致性是,无论CSS位置如何,内容都按照它在DOM中出现的顺序读取例如,附加一个<DIV>到了最后<BODY>然后使用位置:绝对的来提高它的顶部窗口不会改变屏幕阅读器的阅读顺序——它仍将去年(在这种情况下,我们可以安全地说”“屏幕阅读器)。

浮子也是如此应用浮动:正确一个元素通常将它定位在DOM后面的元素“之后”(右侧),使得视觉阅读顺序与DOM顺序相反因为DOM顺序决定屏幕阅读器阅读顺序(和标签的顺序,在活跃的元素),这些元素将会宣布从视觉阅读顺序相反的顺序。

容器只是视觉的。

许多CSS属性可用于将尺寸应用于容器 -高度,宽度,最大高度,最大宽度,- 和溢出文本溢出决定是否和如何内容超过容器的边界被渲染在我们所有的测试配对中,所有这些都对屏幕阅读器是透明的无论内容是否被视觉剪裁或被遮挡溢出:隐藏,屏幕阅读器将宣布所有内容的容器甚至透明度:0has no effect in the screen reader environment; the content is announced nonetheless.

这个故事的主旨

所有这些都突出了可访问性开发和发布前测试的价值 - 在各种浏览器屏幕阅读器组合中 - 以确保所有网站访问者享受一致的,相同的体验。

的更多信息

这只是一个简短的概述我们的发现有关详情,请查看我们进入更高的地面2017年11月17日星期五在科罗拉多州威斯敏斯特市或联系john@www.kanehsu.com

评论

  1. Shivaji Kumar

    伟大的原始研究,作者的荣誉。

    但仍有实际问题需要回答:有多少测试太多,和多少测试是少?

    除了实际考虑之外,这个屏幕阅读器行为可变性有多少可归因于平台差异以及屏幕阅读器本身的多少?

  2. Reinier Kaper

    尽管我发现可访问性非常重要,但我对“开发人员应该确保行为与屏幕阅读器一致”的一般态度存在问题。

    不要误会我的意思,我完全相信开发者应该做出自己的内容,但如果屏幕阅读器X,Y和Z都产生不同的结果,那么问题就在于屏幕阅读器。

    非常像浏览器渲染不一致有一个规范要遵循,如果浏览器偏离规范,那么它不应该由开发人员来“修复”那个。

    我知道通常不是这种黑白(例如我们都在当天处理过我们的ie.css文件),但我认为那些创作屏幕阅读器的人应该加强并确保所有读者都遵守相同的规范。

  3. 斯蒂芬妮·路易斯

    Great work! One odd thing I’ve found is in using flexbox虽然flexbox允许您对子项重新排序,但它仍应按DOM顺序读取我上次检查时,在FFOX中,它不是(因此我们不使用订单属性)Did you all do any flexbox testing? I’d be interested in the results.

    干杯!

  4. 艾米·卡尼

    Looking forward to hearing more at Accessing Higher Ground! See you there.

  5. Lee Kowalkowski

    从长远来看,我发现尽可能确保更好,不 -一切- 在源HTML中是正确的。

    例如,更喜欢删除/插入内容而不是隐藏/显示我可以看到隐藏的内容,有时候,没有黑客攻击,一些网站只是小故障,突然间它就在那里。

    我也看到许多情况下,作者在视觉上隐藏的内容只有屏幕阅读器用户会发现用户的利益,甚至automatically-hidden内容像图像alt文本。

    同样,如果你喜欢并且手艺,CSS-only解决方案倾向于不适当的语言或语言环境敏感案件(注入的话一个页面,或格式化美分/便士上标)。

    确实我相信有人会设计一个CSS本地化解决方案这样的情况下,但在源HTML一切正确的开始通常是更健壮和简单。

  6. 乔乔esposa

    This is a surprise! I knew that screen readers read codes in a linear way and CSS don’t get in the way非常感谢您提供这个非常有用的信息。

  7. 苏珊娜

    But what about ::before and ::after generated content? That’s particularly what I’d like to know我管理的网站有很多不同的用户,他们非常擅长记住做PDF链接等事情我想在CSS中添加一个文件类型指示符作为生成的内容,但是已经明白它会被屏幕阅读器跳过,这是正确的吗?

  8. 加雷思

    我总是关闭CSS,并假设屏幕阅读器将“看到”并读出来。

    这可能不是100%准确的假设,但HTML用于内容,CSS用于设计(分离关注点)屏幕阅读器应该对前者感兴趣,而不是后者。

  9. 马库斯

    这非常有帮助,谢谢!

    唯一令我惊讶的是它似乎生成的内容完全不好例如,如果我让Jens Meiert正确,那么就有案例当生成的内容有用时Karl Groves提到的案例,与标记PDF链接一样,对于Meiert来说是可以接受的如果我理解他们,也许他们可以评论。

  10. 克兰斯顿

    我目前正在为一些政府网站进行大规模的可访问性改造各种屏幕阅读器/浏览器/操作系统之间的不一致几乎是可笑的在我看来荒谬的,可能通过一项法律,要求遵守未定义的和不一致的规范。

    到目前为止,似乎遵循wcag / w3c文档只是一个开始,并且只在最简单的情况下才有用表格一直是一场噩梦(如果有人能够为响应式,适合移动设备的表格提供一个体面的解决方案,这个表格适用于屏幕阅读器,而不是咏叹调 - 属性比实际表格标记我全都耳朵)描述列表只是作为一个文本块出现伪元素由屏幕阅读器读取(据我所知,没有办法将它们隐藏在屏幕阅读器之外)更改元素的display:属性可能会导致屏幕阅读器以不同方式显示它们Flexbox秩序与DOM秩序——似乎取决于……

    让一个屏幕阅读器正常运行并不意味着其他人会这样做桌面和移动设备之间的画外音不一致每个screenreader可以配置不同,所以什么标准。

    我认为每个人都应该能够以适合他们的方式访问他们想要的任何内容,但这感觉有点像我们法律要求支持一个看似很少可预测标准的非常广泛的软件类别。

  11. Blee Blat

    这对开发人员来说不仅令人沮丧,对用户来说也很难如果我可以使用一个浏览器/屏幕阅读器组合用于计算机和一个用于移动设备,我希望它但遗憾的是,我在至少2个电脑屏幕阅读器和2个浏览器手机只有一个屏幕阅读器方便,所以我在使用它时在Android和iOS上都有必须弹跳浏览器/屏幕阅读器组合只是因为没有准确读取页面是没有帮助的I wonder if there’s anything we can do for this? How common is it for computer users who don’t rely on assistive technology to have to run the same site through multiple browsers to read it effectively? Currently there are weird bugs in some browser screen reader combinations where certain page elements are not read or read incompletely你知道当事情的唯一方法是读错的一些页面上是使用另一个屏幕阅读器,与另一个浏览器或相同的屏幕阅读器这往往主要影响CSS或表单,但可能会影响其他JavaScript和东西我不是网络开发人员,但如果有人认为它有帮助,我可以学习标准往往被忽视,就像立法有标准并没有真正帮助如果有人想要定制他们的系统,他们会,并且你无法测试每个案例这部分是用户知道如何使用技术,和它的一部分开发人员有足够的同情心让最好的工作准确编写页面和代码没有标准你可以写,这将使某人关心足够的事情做到这一点任何事情的立法都可能产生负面影响,特别是在有爱心的人中间另一个问题是,如果您不需要自己使用它,则可接受性意味着什么当我编写一个没有考虑到unicode的程序时,我遇到了同样的障碍,因为我只说英语而无法测试国际化我怀疑开发人员也会遇到这种情况If they don’t know a screen reader user personally, why would they think to make things 万博体育官网网址? You can’t legislate altruism, which is what this comes down to一些屏幕阅读器的部分问题是NVDA的“浏览模式”,我个人不喜欢它,因为它通过键盘快捷键打破了每个网络应用程序我喜欢很多的键盘快捷键Facebook和谷歌音乐就是这种情况特别令人讨厌的例子我有一个大的音乐库和我有更大的可能是,如果特定网站并不是那么笨重的导航和使用但是像Narrator和Voiceover这样的内置屏幕阅读器无法快速接收更新以跟上动态网络W3C建议也不能快速移动它会有助于包括虎鲸和Linux,因为这些平台上的用户更有可能能够帮助开发者解决很多东西坏了您可以做的最糟糕的事情是让屏幕阅读器解析HTML,因为这是大多数麻烦开始的地方我们应该鼓励这种做法屏幕阅读器应该读屏幕,留给用户如何处理数据可能开始是让操作系统制造商公开易访问性API以这样一种方式,比如“浏览模式”或虚拟缓冲区可以永远不会发生这将消除一大类奇怪的行为,并确保用户和开发人员都能确切地知道标记或代码始终在做什么如果这太长或注释掉的地方不会有帮助,随时删除它否则,谢谢你的阅读,我希望有些随意和混乱的想法可能会有所帮助如果您需要帮助测试,我有时间并且会费心学习Web开发来提供帮助有了这么多的网络存在,让事情变得更加健全。

  12. 麦克风

    我们知道在CSS3中,我们有一些高级属性,用于定位元素以及精美地设计它们但是,通常设计师会破坏视觉上完美但不适合屏幕阅读器的内容顺序因此,我们应该更喜欢使用'tab-index'和aria- *属性。

  13. 约翰诺斯普

    人们很容易使用tabindex和咏叹调,但是这可以变成一个真正的维护问题对于HTML无法做到的事情,我们将ARIA视为最后的工具对于tabindex-我们从未见过积极的tabindex值的实现,这不仅会导致更多问题我们建议开发人员结构的HTML的逻辑顺序和位置内容视觉需要用CSS。

  14. 菲利普

    Wouldn’t it be great if there is something like „Browserstack“ but just for screenreader? So you can test different screenreader over different browser (and maybe hardware)
Does somebody know if there is something like that out there somewhere?
    如果有人感兴趣 - >联系我,我会围绕那个做一个项目😉
    (p.holz@inovex.de)