WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessibility or usability recommendations for differentiating menus visually

for

From: Preast, Vanessa
Date: Feb 9, 2017 9:33AM

Thanks. The color contrast is fine. I should have mentioned that.



No, they haven't done any usability studies, and probably won't in this instance, so I may be the "last line of defense", so to speak. 😊 Are there any usability best practices you know of that address this?



Vanessa



-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Moore,Michael (Accessibility) (HHSC)
Sent: Thursday, February 09, 2017 8:56 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Accessibility or usability recommendations for differentiating menus visually



There are contrast requirements which may not be met within the design that you describe. WCAG 2.0 1.4.3 https://www.w3.org/TR/WCAG20/#visual-audio-contrast



Beyond that there are usability concerns. Have they done any usability studies. My guess would be no.



Mike Moore

EIR (Electronic Information Resources) Accessibility Coordinator Texas Health and Human Services Commission Civil Rights Office

(512) 438-3431 (Office)

(512) 574-0091 (Cell)







Making electronic information and services accessible to people with disabilities is everyone's job. I am here to help.



-----Original Message-----

From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Preast, Vanessa

Sent: Thursday, February 09, 2017 8:45 AM

To: WebAIM Discussion List < <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >>

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