我正在做一个在SVG中有多个可点击链接的浮动图,计划是使用<svg aria-hidden="true">
从屏幕阅读器中隐藏SVG,并在图像<div class="sr-only">
下面有一个描述(bootstrap 4)包含描述和相同的链接。虽然SVG对屏幕阅读器隐藏,并且.sr-only
内部的信息对具有视觉的用户隐藏,.sr-only
中的链接将焦点放在隐藏链接上。由于隐藏链接,视力正常的用户可能会遇到错误的焦点顺序。
有没有一个通用的解决方案?.sr-only
只用于文本而没有链接吗?
1条答案
按热度按时间jbose2ul1#
基于您自己的亲身经历,将链接或任何其他可聚焦元素放在.sr_only或aria-hidden=true区域内确实是个坏主意。
如果你这样做,在这两种情况下,你都在给人们带来麻烦:
因此,.sr_only和aria-hidden=true都将保留给对特定用户有用而对其他用户无用的相当短的非交互式指示。
需要提醒的是,.sr_only和aria-hidden=true并不是完全对立的。.sr_only下的内容对屏幕是隐藏的,屏幕阅读器可以读取,而aria-hidden=true则对屏幕阅读器和所有其他辅助工具隐藏内容。不要忘记屏幕放大镜、眼动追踪器、语音控制、故障突出显示器等。