WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible and Responsive Navigation


From: Andrews, David B (DEED)
Date: Mar 30, 2016 3:29PM

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


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 REMOVED> ] On Behalf Of TRAUTWEIN_PAUL
Sent: Wednesday, March 23, 2016 11:51 AM
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.


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.


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.


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