WebAIM - Web Accessibility In Mind

E-mail List Archives

Accessible and Responsive Navigation

for

From: TRAUTWEIN_PAUL
Date: Mar 23, 2016 10:51AM

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