Hey all,

I’m a completely-blind developer experiencing an interesting issue when testing my app.

For those of you unfamiliar with Voiceover, Apple has screen-reading software built-in to all of their products, which is how I’m able to use modern technology, like this computer.

What I’m encountering is a fully-functional app that launches on my phone and navigates as-intended, when using Voiceover. However, I’m told that, visually, my app isn’t presenting different Views, and this seems to be some sort of issue with the ’tappable area’ of the buttons. So, how can I make these buttons tappable?

Here’s what I’m working with:```

NavigationStack {

NavigationLink() { PuzzlePacksView() } label: { Button("Puzzles") { allSheetViewBooleans.showingPuzzlePacksView = true }//button .font(.title) .clipShape(Capsule()) }//navLink

}//NavigationStack

Think you trying to mix two action together!

A NavigationLink has the same similarity to a button but will present a View.

So you can do this

NavigationLink {
    PuzzlePacksView()
} label: {
    Text("Puzzles")
}
.font(.title)
.foregroundColor(.white)
.padding()
.background(Color.red)
.clipShape(Capsule())

or use a button to present a sheet with the View in like this

Button("Puzzles") {
    showingPuzzlePacksView = true
}
.font(.title)
.foregroundColor(.white)
.padding()
.background(Color.red)
.clipShape(Capsule())
.sheet(isPresented: $showingPuzzlePacksView) {
    PuzzlePacksView()
}

Both should read in voice "Puzzles", then say "isButton"

I’m intentionally doing this for a few reasons.

First, to control the appearance of the NavigationLink, while retaining its functionality. I can’t see what they look like, but from the descriptions of them on HackingWithSwift, it sounds like buttons would look better, as NavigationLinks are tinted blue and include a ‘>’ sign next to their presented names.

As for retaining functionality, the code snippet I included is essentially from my game’s main menu, so the next views lead to sub-menus, before leading to one more View.. So, pushing the sub-menus onto the NavigationStack seems more-appropriate than displaying multiple sheets over the top of one another.

Lastly, I use similar code elsewhere, with NavigationLink having a Button as a label so that I can run functions when a NavigationLink is pressed.

So, if there’s a way to dictate the tappable area of these controls for sighted users that you know of, that would be a better fit for my needs, as the interfaces, including the NavigationLink/Button combos I’m using function just-fine when using Voiceover.

Do you have any suggestions?

Hi! It is a bit unclear to understand what exactly you are trying to solve, nevertheless let me try to suggest a possible option. I am not sure why you use allSheetViewBooleans.showingPuzzlePacksView = true and what its purpose in your snippet of code. But it seems like you are using it to navigate it to another view...

If you need an option that looks like a button you might try use the following ->

 NavigationStack {
            NavigationLink {
                PuzzlePacksView()
            } label: {
                Text("Puzzles")
                    .font(.title)
                    .padding()
            }
            .buttonStyle(.borderedProminent)
            .accessibilityLabel("Navigates to puzzles")
        }

visually it looks like a button with blue background in form of rounded rectangle so it looks like regular button. When you press it it navigates you in a stack so in navigated view you will have back button etc... to navigate back if you need. I intentionally added accessibility label so voiceover will read it as "navigates to puzzled button". But you can change to whatever you wish.

As for your note "NavigationLinks are tinted blue and include a ‘>’ sign next to their presented names." It's not exaclty like that. But default navigation link looks like a tinted text without '>" sign.

So if your task is to make navigation link that looks like rounded rectangle button, that might be possible solution. BTW you can change the color of it witn .tint() modifier added to navlink itself.

NavigationLinks only have the > when in a list if you paste my code above you will see that both have the same look!

The only different is how the next screen is presented.