E-mail List Archives
Thread: Accessibility or usability recommendations for differentiating menus visually
Number of posts in this thread: 7 (In chronological order)
From: Preast, Vanessa
Date: Thu, Feb 09 2017 7:45AM
Subject: Accessibility or usability recommendations for differentiating menus visually
No previous message | Next message →
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
From: Moore,Michael (Accessibility) (HHSC)
Date: Thu, Feb 09 2017 7:56AM
Subject: Re: Accessibility or usability recommendations for differentiating menus visually
← Previous message | Next message →
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 ADDRESS REMOVED = ] On Behalf Of Preast, Vanessa
Sent: Thursday, February 09, 2017 8:45 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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
From: EA Draffan
Date: Thu, Feb 09 2017 8:05AM
Subject: Re: Accessibility or usability recommendations for differentiating menus visually
← Previous message | Next message →
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 ADDRESS REMOVED = ] on behalf of Preast, Vanessa [ = EMAIL ADDRESS 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
From: Jim Allan
Date: Thu, Feb 09 2017 9:01AM
Subject: Re: Accessibility or usability recommendations for differentiating menus visually
← Previous message | Next message →
do you have a url?
On Thu, Feb 9, 2017 at 8:45 AM, Preast, Vanessa < = EMAIL ADDRESS REMOVED = >
wrote:
> 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
> > > > >
--
Jim Allan, Accessibility Coordinator
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9264 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964
From: Preast, Vanessa
Date: Thu, Feb 09 2017 9:33AM
Subject: Re: Accessibility or usability recommendations for differentiating menus visually
← Previous message | Next message →
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 ADDRESS REMOVED = ] On Behalf Of Moore,Michael (Accessibility) (HHSC)
Sent: Thursday, February 09, 2017 8:56 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Preast, Vanessa
Sent: Thursday, February 09, 2017 8:45 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS 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
From: Preast, Vanessa
Date: Thu, Feb 09 2017 9:58AM
Subject: Re: Accessibility or usability recommendations for differentiating menus visually
← Previous message | Next message →
Hi Jim,
The site is password protected within our LMS. I uploaded a screenshot.
Current Design appearance, with username and logos blurred: https://drive.google.com/file/d/0B0TDrqgrcX7_YTVPejlxb1RySU0/view?usp=sharing
Best,
Vanessa
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jim Allan
Sent: Thursday, February 09, 2017 10:01 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Accessibility or usability recommendations for differentiating menus visually
do you have a url?
On Thu, Feb 9, 2017 at 8:45 AM, Preast, Vanessa < = EMAIL ADDRESS REMOVED = >
wrote:
> 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
> > > archives at http://webaim.org/discussion/archives
> >
--
Jim Allan, Accessibility Coordinator
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9264 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964
From: Angela French
Date: Thu, Feb 09 2017 1:45PM
Subject: Re: Accessibility or usability recommendations for differentiating menus visually
← Previous message | No next message
Is this Sharepoint 2013? Is there anything you can do in the CSS to effect a border on the side of the menu that would create more separation?
Angela FRench
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Preast, Vanessa
Sent: Thursday, February 09, 2017 8:59 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Accessibility or usability recommendations for differentiating menus visually
Hi Jim,
The site is password protected within our LMS. I uploaded a screenshot.
Current Design appearance, with username and logos blurred: https://drive.google.com/file/d/0B0TDrqgrcX7_YTVPejlxb1RySU0/view?usp=sharing
Best,
Vanessa
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jim Allan
Sent: Thursday, February 09, 2017 10:01 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Accessibility or usability recommendations for differentiating menus visually
do you have a url?
On Thu, Feb 9, 2017 at 8:45 AM, Preast, Vanessa < = EMAIL ADDRESS REMOVED = >
wrote:
> 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
> > > archives at http://webaim.org/discussion/archives
> >
--
Jim Allan, Accessibility Coordinator
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9264 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964