iOS Safari：焦点样式不适用

编程问答 2022-08-18

问题描述

我目前正在尝试创建skip-link功能，在其中我向页面上的主要内容添加了一个内部链接，以便屏幕阅读器用户可以直接访问重要内容，而不必通过导航栏进行切换。这是我的做法：

<a href="#main" class="button-skip-content">
    Skip to Main Content
</a>

.button-skip-content {
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
    clip: rect(1px,1px,1px);
    word-wrap: normal;
}

.button-skip-content:focus,.button-skip-content:active {
    font-family: proxima-nova,sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    outline: 2px dotted #c41230;
    outline-offset: 4px;
    visibility: visible;
    position: static;
    overflow: visible;
    clip: auto;
    width: auto;
    height: auto;
    display: block;
    padding: 10px;
    color: #c41230;
    background-color: #fff;
    outline-offset: -2px;
}

这在台式机浏览器上非常有用，在台式机浏览器中，该链接是隐藏的，除非通过将其链接并给予焦点来访问，然后该链接将变为可见。但是，在iOS上，链接已正确读出，但是没有应用:focus样式，因此它仍然不可见。更广泛地说，似乎我所有的:focus样式都被忽略了，浏览器只是使用自己的:focus高亮显示。除了可以中断我的跳过链接视觉功能之外，我对此表示满意。为什么iOS野生动物园无法触发我的:focus样式？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

accessibilityiosiosmobile-safarisafari