Categories
Windows

Improving Keyboard Navigation with NavigationView

Thy Phone uses the NavigationView control to provide a pop out navigation pane to provide a similar UI to Your Phone. I was contacted this week by a user indicating problems with the app for blind users – it doesn’t play well with screen readers and the keyboard navigation is not clear. My first investigation was to see how Your Phone differs and if there is anything I can learn from that. I’m also porting the entire app away from UWP and to desktop WinUI so this has also created a number of changes and issues. Ultimately I think this will make it a much more powerful app and this seems like a good time to rethink the UI and make it more inclusive.

Instantly something which struck me was that the NavigationView in Your Phone implements a number of AccessKeys, not just for the navigation items but also for the expand/contract button and the built-in Settings button. These are not a standard feature of the NavigationView control and I couldn’t find examples in any other first-party apps using the NavigationView. We are in a strange transition where some apps have a Windows 11 feel and others don’t – Compare Microsoft Store, To Do and Your Phone apps and even though all adopt a Windows 11 look they are wildly different.

Your Phone showing AccessKey tips.

I found that applying an AccessKey to the NavigationView control itself implemented the key for the expand/contract action. For Settings you have to access the SettingsItem, cast it to a NavigationViewItem and then set the AccessKey property. For both of these the tip placement must be manually set in order for all of them to line up.

I created a reusable code snipped in this Gist to apply the same behaviour as used in Your Phone to any NavigationView. It doesn’t allow for localisation in this iteration, I’ll leave it as an exercise for the reader to supply the strings from a resource so that you can change the keys to match the UI language.

https://gist.github.com/peterfoot/296548c8910525990e0f8f1223b9fd10.js

This is only a tiny step on the way to improving the usability of the app. It will involve making lots more changes and probably deviating from the Your Phone look where it makes more sense.

By Peter Foot

Microsoft Windows Development MVP