在读取偏移文本后，画外音返回页面标题

Question

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

<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将其视为页面刷新。