nav - distinguishing links/page titles, esp. when wrapped

[shawna-slh]

Some links/page titles will wrap, so need to have separator lines &/or bullets &/or hanging indents -- or something to make it clear what is a new title or not.

fyi, /me finds in current prototype it's a little hard to distinguish the items even without the wrapping issue

I think clearer separation of the items will improve usability and accessibility :)

(Existing WAI site uses lines, e.g., left nav of https://www.w3.org/WAI/training/accessible )

[aliciafrausto]

added lines between items https://visa.invisionapp.com/share/RUCY9YUQE#/223719150_Menu_-_Expanded https://zpl.io/aRX95N2

[James-Green]

Shawn suggests slightly darker lines and Eric suggest removing last line and maybe first (below heading) per Alicia's discretion.

[shawna-slh]

Discussion on 11 Aug of having only one level of nav per fly-out and having tertiary nav in additional fly-outs, as is https://w3c.github.io/wai-website-components/components/preview/example-home.html#

[lakeen]

I believe it was also suggested to add on focus underlines for a secondary nav item that is a link and > for secondary nav item that has a flyout. See Microsoft site for example: https://www.microsoft.com/en-us/defaultb.aspx

[shawna-slh]

@yatil - What about making the flyout boxes wider -- at least for the first few menu items? That would limit wrapping and make reading easier. :-)

[yatil]

@slhenry It would also mean longer distance for the mouse when opening sub-menus. It’s a tradeoff. How much more space would be appropriate? 20% 50%?

[shawna-slh]

Good point. Well, the sub-menus would open with no horizontal mouse movement, but longer mouse movement to open an item in a submenu. ;-)

/me too fried to think about it now... :(