E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 5 (In chronological order)

From: TRAUTWEIN_PAUL
Date: Wed, Mar 23 2016 10:51AM
Subject: Accessible and Responsive Navigation
No previous message | Next message →

I have been working on building a navigation system for one of the sections of our website. The main focus has been to make things Accessible, but we also need it to be Responsive to different mobile devices.

It's a catalog of a course schedule so the navigation is both deep and long.

Our current navigation uses a form based solution with a "Go" button. It works fine but our designers have problems with the extra click it involves to navigate to the pages, and they don't like the way it looks. It also doesn't work very will with mobile devices.

http://www2.smc.edu/schedules/2016/summer/index.html

I found a menu system that will satisfy the designers aesthetic ideals, shrinks to be responsive, and also works with JAWS, NVDA, and the Mac's VoiceOver, although it's clunkier. There are extra steps someone with a screen reader, or keyboard only navigator, has to do – listing the links before and after expanding the menus, etc. – but it doesn't prohibit their usage.

http://www2.smc.edu/schedules/2016/summer/index2.html

My question: Is this the best we can do? I'm not a "programmer" so I needed a pre-fabricated script that I could modify. I found this: http://www.smartmenus.org/

If anyone has a better solution, please share.

Thanks.
Paul

Paul Trautwein | Web Coordinator
Santa Monica College | Marketing Department
1900 Pico Blvd. Santa Monica CA 90405
310.434.4204 | www.smc.edu

From: Andrews, David B (DEED)
Date: Wed, Mar 30 2016 3:29PM
Subject: Re: Accessible and Responsive Navigation
← Previous message | Next message →

As a Jaws user I liked the first choice the best, what I should do, and where I was was clear.

Dave



David Andrews | Chief Technology Officer
Department of Employment and Economic Development
State Services for the Blind, 2200 University Ave. W., Suite 240, St. Paul MN 55114
Direct: 651-539-2294 | Mobile: 612-730-7931
Web | Twitter | Facebook



-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of TRAUTWEIN_PAUL
Sent: Wednesday, March 23, 2016 11:51 AM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Accessible and Responsive Navigation

I have been working on building a navigation system for one of the sections of our website. The main focus has been to make things Accessible, but we also need it to be Responsive to different mobile devices.

It's a catalog of a course schedule so the navigation is both deep and long.

Our current navigation uses a form based solution with a "Go" button. It works fine but our designers have problems with the extra click it involves to navigate to the pages, and they don't like the way it looks. It also doesn't work very will with mobile devices.

http://www2.smc.edu/schedules/2016/summer/index.html

I found a menu system that will satisfy the designers aesthetic ideals, shrinks to be responsive, and also works with JAWS, NVDA, and the Mac's VoiceOver, although it's clunkier. There are extra steps someone with a screen reader, or keyboard only navigator, has to do – listing the links before and after expanding the menus, etc. – but it doesn't prohibit their usage.

http://www2.smc.edu/schedules/2016/summer/index2.html

My question: Is this the best we can do? I'm not a "programmer" so I needed a pre-fabricated script that I could modify. I found this: http://www.smartmenus.org/

If anyone has a better solution, please share.

Thanks.
Paul

Paul Trautwein | Web Coordinator
Santa Monica College | Marketing Department
1900 Pico Blvd. Santa Monica CA 90405
310.434.4204 | www.smc.edu

From: Gijs Veyfeyken
Date: Fri, Apr 01 2016 1:14AM
Subject: Re: Accessible and Responsive Navigation
← Previous message | Next message →

This might help?
https://github.com/AnySurfer/dropdown

It's based on Simply Accessible's CSS Dropdown Menu examples:
http://examples.simplyaccessible.com/css-menu/option-2.php

Kind regards,

Gijs

---
Gijs Veyfeyken
AnySurfer - towards an accessible internet
http://www.anysurfer.be/en
Brussels - Belgium

From: Birkir R. Gunnarsson
Date: Fri, Apr 01 2016 2:00PM
Subject: Re: Accessible and Responsive Navigation
← Previous message | Next message →

That last example is not screen reader or keyboard friendly.
There is no indication for screen readers that putting focus on the
trigger displays a menu (aria-expanded attribute could be used to
enhance it, set it to "false" in its original state, have JavaScript
flip it to "true" when element receives focus and the submenu is
displayed.
Alternatively, keep the submenus visually hidden but available to
screen readers, then make them visible when the trigger element
receives focus.

There are no keyboard shortcuts for navigating through the submenu,
tab key has to be used.



On 4/1/16, Gijs Veyfeyken < = EMAIL ADDRESS REMOVED = > wrote:
> This might help?
> https://github.com/AnySurfer/dropdown
>
> It's based on Simply Accessible's CSS Dropdown Menu examples:
> http://examples.simplyaccessible.com/css-menu/option-2.php
>
> Kind regards,
>
> Gijs
>
> ---
> Gijs Veyfeyken
> AnySurfer - towards an accessible internet
> http://www.anysurfer.be/en
> Brussels - Belgium
> > > > >


--
Work hard. Have fun. Make history.

From: TRAUTWEIN_PAUL
Date: Thu, Apr 07 2016 3:06PM
Subject: Re: Accessible and Responsive Navigation
← Previous message | No next message

Thanks for the response, Dave,

I am not an experienced JAWS user, but we were able to find someone who
was, and who was kind enough to test the different options.

When she tested the navigation with the fly away menus, (the second
choice) she was able to find the page we asked her to look for within
seconds. She also just did some browsing, based on her own interests and
curiosity, without any problems. She managed to jump in and out of a link
list where she could start typing in letters and jump to specifics in the
sub-navigation. I was able to do the same with VoiceOver on a Mac,
although the keyboard interface is a bit clunkier than JAWS. That could
also be due to my lack of experience.

I know that the preferred method is the first choice, (with the form
containers) but I was contending with designers who wanted a cleaner
visual look and feel and didn¹t like the ³go² buttons.

For anyone interested, we changed the URLs once we were satisfied with our
test results. Below are the URLs again so you can compare:

http://www2.smc.edu/schedules/2016/spring/index.html (our older navigation
system)

http://www2.smc.edu/schedules/2016/summer/index.html (our newer navigation
system)

Thanks again.
Paul



Paul Trautwein | Web Coordinator
Santa Monica College | Marketing Department
1900 Pico Blvd. Santa Monica CA 90405
310.434.4204 | www.smc.edu






On 3/30/16, 2:29 PM, "Andrews, David B (DEED)"
< = EMAIL ADDRESS REMOVED = > wrote:

>As a Jaws user I liked the first choice the best, what I should do, and
>where I was was clear.
>
>Dave
>
>
>
>David Andrews | Chief Technology Officer
>Department of Employment and Economic Development
>State Services for the Blind, 2200 University Ave. W., Suite 240, St.
>Paul MN 55114
>Direct: 651-539-2294 | Mobile: 612-730-7931
>Web | Twitter | Facebook
>
>
>
>-----Original Message-----
>From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
>Behalf Of TRAUTWEIN_PAUL
>Sent: Wednesday, March 23, 2016 11:51 AM
>To: = EMAIL ADDRESS REMOVED =
>Subject: [WebAIM] Accessible and Responsive Navigation
>
>I have been working on building a navigation system for one of the
>sections of our website. The main focus has been to make things
>Accessible, but we also need it to be Responsive to different mobile
>devices.
>
>It¹s a catalog of a course schedule so the navigation is both deep and
>long.
>
>Our current navigation uses a form based solution with a ³Go² button. It
>works fine but our designers have problems with the extra click it
>involves to navigate to the pages, and they don¹t like the way it looks.
>It also doesn¹t work very will with mobile devices.
>
>http://www2.smc.edu/schedules/2016/spring/index.html
><http://www2.smc.edu/schedules/2016/summer/index.html>;
>
>I found a menu system that will satisfy the designers aesthetic ideals,
>shrinks to be responsive, and also works with JAWS, NVDA, and the Mac¹s
>VoiceOver, although it¹s clunkier. There are extra steps someone with a
>screen reader, or keyboard only navigator, has to do ­ listing the links
>before and after expanding the menus, etc. ­ but it doesn't prohibit
>their usage.
>
>http://www2.smc.edu/schedules/2016/summer/index.html
><http://www2.smc.edu/schedules/2016/summer/index2.html>;
>
>My question: Is this the best we can do? I¹m not a ³programmer² so I
>needed a pre-fabricated script that I could modify. I found this:
>http://www.smartmenus.org/
>
>If anyone has a better solution, please share.
>
>Thanks.
>Paul
>
>Paul Trautwein | Web Coordinator
>Santa Monica College | Marketing Department
>1900 Pico Blvd. Santa Monica CA 90405
>310.434.4204 | www.smc.edu
>>>at http://webaim.org/discussion/archives
>