WebAIM - Web Accessibility In Mind

E-mail List Archives

Accessibility or usability recommendations for differentiating menus visually

for

From: Preast, Vanessa
Date: Feb 9, 2017 7:45AM

Hello,

I'm looking at a site design which is generally a "flat", minimalist, monochrome design of Black on very light grey. I, personally, am having trouble easily differentiating the menu from the content areas below. There is a thin line separating the menu from the body of the page. The body of the page contains two columns of "widgets", each with a title bar with a gradient background. The menu text is about the same size or smaller than the widget title bar text. The menu has no background shading different from the rest of the page.

Is there any accessibility or usability advice about menus clearly distinguished from body text? (Please share the links/resources)

I'm wanting to advise increasing the weight of the separator line, bolding the menu font and/or increasing the menu font to help differentiate the menu area from the rest of the page. I thinking that it would really help a user's ability to scan the page and quickly find what they need. All I could find for references were articles such as "Flat Design" https://www.w3.org/WAI/PF/cognitive-a11y-tf/wiki/Flat_Design, but these refer to buttons having a more 3-d appearance, not menus clearly differentiated from document body.

Best,
Vanessa