Set focus in JS with accessibility - voiceOver IOS

Question

I am not able to set focus on an element when IOS accessibility - voiceOver is set. When navigating on my site, the element that is read is the element closest to the navigation button on the last page. I want it to set focus on a specific h tag that is the title of the page.

Things I have tried:

• js id and focus() method when vue is mounted
• vue ref and focus() method when vue is mounted
• same as both above but with select() as well

Stack: Laravel, Jetstream, Vue, Inertia

Simplified example:

<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

When focusing any element that is not designed to receive focus you should add a tabindex to it to make it focusable.

Now as this is a heading we do not want it adding to the focus order on the page as that would not be logical, (ie you can't Tab to it) so you should add tabindex="-1" .

"Negative one" on a tabindex essentially tells the browser "allow me to focus this programatically, but do not add it to the focus order of the page".

Answer 2

As horrible as the solution is I have a solution to the problem. Changed the h1 tag with a input tag, changed the role to "text" and put a "readonly" on it.

Solution with tailwind classes:

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