WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessibility or usability recommendations for differentiating menus visually

for

From: EA Draffan
Date: Feb 9, 2017 8:05AM

I remember Nielsen Norman Group had an article on the subject https://www.nngroup.com/articles/low-contrast/
and Simply accessible had a guide as we have been exploring these issues for those with cognitive impairments.

WCAG have general techniques on the subject

https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

Here is a Webaim page about font readability http://webaim.org/techniques/fonts/#readability and a checker http://webaim.org/resources/contrastchecker/

Best wishes
E.A.

Mrs E.A. Draffan
WAIS, ECS , University of Southampton
Mobile +44 (0)7976 289103
http://access.ecs.soton.ac.uk
UK AAATE rep http://www.aaate.net/



From: WebAIM-Forum [ <EMAIL REMOVED> ] on behalf of Preast, Vanessa [ <EMAIL REMOVED> ]
Sent: 09 February 2017 14:45
To: WebAIM Discussion List
Subject: [WebAIM] Accessibility or usability recommendations for differentiating menus visually

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