html sr-only中的链接扰乱了有视觉的键盘用户的聚焦顺序

o2g1uqev  于 2023-03-27  发布在  其他
关注(0)|答案(1)|浏览(140)

我正在做一个在SVG中有多个可点击链接的浮动图,计划是使用<svg aria-hidden="true">从屏幕阅读器中隐藏SVG,并在图像<div class="sr-only">下面有一个描述(bootstrap 4)包含描述和相同的链接。虽然SVG对屏幕阅读器隐藏,并且.sr-only内部的信息对具有视觉的用户隐藏,.sr-only中的链接将焦点放在隐藏链接上。由于隐藏链接,视力正常的用户可能会遇到错误的焦点顺序。
有没有一个通用的解决方案?.sr-only只用于文本而没有链接吗?

jbose2ul

jbose2ul1#

基于您自己的亲身经历,将链接或任何其他可聚焦元素放在.sr_only或aria-hidden=true区域内确实是个坏主意。
如果你这样做,在这两种情况下,你都在给人们带来麻烦:

  • 有视觉的人不会看到焦点只在隐藏区域.sr_。或者他们可能会看到它,因为浏览器会检测到它在屏幕外,并发出某种视觉伪像,只要焦点在那里,它就可以看到,但无论如何它看起来都很奇怪。
  • 当aria-hidden=true中的元素获得焦点时,屏幕阅读器会出现问题。焦点元素根本不会被宣布,或者会被宣布但会从虚拟缓冲区中消失,这在两种情况下都是不方便的。

因此,.sr_only和aria-hidden=true都将保留给对特定用户有用而对其他用户无用的相当短的非交互式指示。
需要提醒的是,.sr_only和aria-hidden=true并不是完全对立的。.sr_only下的内容对屏幕是隐藏的,屏幕阅读器可以读取,而aria-hidden=true则对屏幕阅读器和所有其他辅助工具隐藏内容。不要忘记屏幕放大镜、眼动追踪器、语音控制、故障突出显示器等。

相关问题