Jasonlav
KPCKevin Powell - Community
•Created by Jasonlav on 8/12/2024 in #front-end
Should the HTML5 dialog tag be used for a toggleable responsive navigation menu?
I definitely agree with that concern (see Dialog Cons #2). On the large screen and small screen menu layout, I am able to tab through elements without any issue. Technically, on large screen layout, the dialog is closed, but forced to render via
display: block;. Therefore, I think that proves the rendering assessment by @ἔρως.
Using Safari and OSX voice over, I was able to test it as a screen reader. On the smaller screen layout, it works flawlessly. When the menu is opened, the screen ready notifies the user they are entering a dialog, which is probably helpful to the user. However, on the larger screen layout, it does say "dialog" when you enter the menu, which may be a little confusing. However, a dialog doesn't inherently mean it takes over the screen (e.g. dialog.show()), but probably is expected to be dismissible.
Optimally, I think the best user experience would be for the mobile version to use a dialog in this scenario and the desktop version to not use a dialog. However, that would involve manipulating the HTML so, definitely not an optimal solution technically. 🫤16 replies
KPCKevin Powell - Community
•Created by Jasonlav on 8/12/2024 in #front-end
Should the HTML5 dialog tag be used for a toggleable responsive navigation menu?
The primary advantage of using the
dialog is the accessibility advantages (keyboard trap, esc to close, etc) on small screens that use the hamburger menu. On larger screens, where the full menu is always shown, these accessibility features are not implemented since the dialog is shown with display: block and technically never "opened."
If small screen hamburger menu does not cover the screen, then yes, the dialog element does not make sense and popover is a better solution. However, many websites have the hamburger menu cover the whole site (cnn.com, bbc.com, pbs.org, etc). CCN and BBC do not make the hamburger menu a keyboard trap; PBS does. I would argue that it should be a keyboard trap on all three of those websites since the small screen menu covers the entire screen when toggled otherwise users can potentially "tab" to links that they cannot even see!16 replies