html - 读完偏移文本后，画外音返回页面标题

Question

我正在尝试使站点可访问，并且默认情况下隐藏一个链接，除非将键盘焦点放在它上面，在这种情况下它变得可见。该链接会跳过 YouTube 视频并跳转到其他内容。我在桌面上运行良好，但在移动设备上使用带有 Voiceover 的 Safari，一旦阅读链接，焦点就会返回到页面的标题。我现在拥有的是：

<div class="skip-link"> <a href="#skipvideo">Skip the Youtube Video</a></div>

...

<a class="hidden" id="skipvideo" name="skipvideo" tabindex="-1"></a>

CSS：

.skip-link a,.skip-linkvideo{left:-10000px;position:absolute;color:#fff} 
.skip-link a:focus, .skip-link a:active{ 
    left:0px;
    position:relative;
    outline-style:solid;
    height:22px;
    padding:2px;
}

有谁知道为什么画外音会这样做？

Answer 1

事实证明，元素正常定位和焦点定位的差异是导致问题的原因。

从绝对更改为相对会导致其他元素被撞倒，这会导致 VoiceOver 将其视为页面刷新。