使用辅助功能在 JS 中设置焦点 - voiceOver IOS

Question

当设置了 IOS 辅助功能 - 画外音时，我无法将焦点设置在某个元素上。在我的网站上导航时，读取的元素是最靠近最后一页导航按钮的元素。我希望它把焦点放在作为页面标题的特定 h 标签上。

我尝试过的事情：

vue挂载时的js id和focus()方法
挂载 vue 时的 vue ref 和 focus() 方法
与上面两个相同，但也有 select()

堆栈： Laravel、Jetstream、Vue、惯性

简化示例：

<template>
    <div>
        <h1 ref="title">My Page Title</h1>
        <p>
            Some lorem ipsum text   
        </p>
        <p>
            Some more lorem ipsum text   
        </p>
    </div>
</template>
<script>
export default {
    mounted() {
        this.$refs.title.focus(); // This does not work for voiceOver
    }
}
</script>

Answer 1

当聚焦任何不是为了接收焦点而设计的元素时，您应该向其添加 tabindex 以使其可聚焦。

既然这是一个标题，我们不希望它添加到页面上的焦点顺序，因为这不符合逻辑，（即您不能 Tab ) 所以你应该添加 tabindex="-1".

tabindex 上的“负一”本质上告诉浏览器“允许我以编程方式聚焦它，但不要将它添加到页面的聚焦顺序”。

Answer 2

尽管解决方案很糟糕，但我有解决问题的方法。用输入标签更改 h1 标签，将角色更改为“文本”并在其上添加“只读”。

顺风解决方案类：

<input role="text" value="My text header" class="font-bold outline-none bg-transparent" readonly autofocus>

使用辅助功能在 JS 中设置焦点 - voiceOver IOS

Set focus in JS with accessibility - voiceOver IOS

javascript

accessibility

focus

voiceover

vue.js