I know that maybe this layout is not the best practice, but I have a code that I should **NOT** and can **NOT** modify, so it is very exciting for me to understand and find some way with the current code using the structure of having an `anchor tag` and inside it and a text and a `button` as it is in this case:

```
<a href="home.html">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti quidem
    quia beatae cupiditate tenetur doloremque rerum facilis vel fugiat
    tempora, voluptates ipsum alias eius dolor omnis modi numquam perferendis
    sint?
    <br /><br />
    <button onclick="functionClick(event)">clickme</button>
</a>

```

I have an `anchor tag` that inside has a text and a `button`, when I tap on the `button` it executes the function "`function click()`" and it avoids continuing to the navigation of `home.html`. This is the desired behavior and it works on the web.

But in **ios**, with the `screen reader` (`voiceover`) happens what you see in this gif:

[![enter image description here](https://i.stack.imgur.com/UrwCo.gif)](https://i.stack.imgur.com/UrwCo.gif)

when selecting the `button` the `screen reader` navigates without taking into account the behavior of the `button`, the function is **not** executed.

I want the screen reader to execute the `button` and not navigate to `home.html` unless you manually select what is outside the `button`.

this is my edit code:

<https://codesandbox.io/s/confident-neumann-2dm2fe>

this is my live code:

<https://0d7cnh.csb.app/>

my full code:

```
<!DOCTYPE html>
<html>
    <head>
        <title>Parcel Sandbox</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>

    <body>
        <a href="home.html">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti quidem
            quia beatae cupiditate tenetur doloremque rerum facilis vel fugiat
            tempora, voluptates ipsum alias eius dolor omnis modi numquam perferendis
            sint?

            <br /><br />
            <button onclick="functionClick(event)">clickme</button>
        </a>

        <script>
            function functionClick(event) {
                event.preventDefault();
                alert("click");
                console.log("click");
            }
        </script>
    </body>
</html>

```

How can I fix it?