I'm building a website where the primary navigation is an off-canvas menu that slides in from the left when the user clicks the "Menu" button (for both desktop and mobile).
The menu even has a backdrop that overlays the page.
Is it ok to nest a <nav> inside of a <dialog> (in regards to accessibility, functionality, etc?)
I will be using showModal(); on the dialog to open the dialog and navigation.
The reason I want to use the dialog/modal element is because it visually is a modal and functionally works like a modal where hitting Esc will close it.
It can be ok, but it probably wont be. The HTML5 spec permits it, even with a corresponding ARIA implementation.
The main problem is that when a user invokes the "nav" shortcut on their assistive tech (screen reader, braille device or whatever), you can't be sure that the dialog will be open. If the parent dialog (and its content) is excluded from the accessibility tree when closed, it might appear as if the nav doesn't exist at all.
In general, your front end imperative code (i.e. JavaScript) will not receive an event when someone presses the "nav" shortcut, so you (or rather, your code) wont even know that it's time to open the dialog. This shortcoming is deliberate, btw. Revealing (or hiding) the fact that you are using assistive tech is regarded as a privacy/security issue.
Of course, if you have hidden the dialog without removing it from the accessibility tree, a screen reader might still be able to access it without opening the dialog visually. However, I would be cautious not to violate SC 2.4.7 Focus Visible or even SC 1.3.1 Info and Relationships in such a case.
Remember that there are many screen reader users who can see perfectly well. (For example, sighted dyslexic users). I assume they'd want to see the nav.
I would not feel comfortable relying on a nav that was only available inside a dialog, especially if it is usually closed. However, if your dialog is extensive enough to require its own nav, it would make sense to do that.
Just remember that if there is more than one nav, they all need distinct accessible names.