Menu icon Foundation
508 issue with duplicate navigation

The off-canvas menu on one of my client's sites just got flagged as a 508 violation. Part of the compliance testing requires turning off the CSS, and when done so the content should not overlap (or be duplicated). But because there really are 2 versions of the same navigation bar in the code, the user sees both side by side when CSS is turned off.

Has anyone else dealt with this problem and found a solution or at least a workaround?

508off-canvas

The off-canvas menu on one of my client's sites just got flagged as a 508 violation. Part of the compliance testing requires turning off the CSS, and when done so the content should not overlap (or be duplicated). But because there really are 2 versions of the same navigation bar in the code, the user sees both side by side when CSS is turned off.

Has anyone else dealt with this problem and found a solution or at least a workaround?

Chris M almost 5 years ago

Hey Debbie,

Yes, I use off-canvas a lot, and unfortunately the content will be duplicated on small and large screens.

The only way to get around this (I'm pretty sure, please someone correct me if I'm wrong) would be to use javascript to load the menu into your regular navigation or the off-canvas navigation depending on screen size.

However, the new accessibility standards really help this issue - for example, this would be a problem for people using screen readers, but using aria-hidden="true" means that screen readers know to skip one or other of the navigations.

(More info on off-canvas accessibility at the bottom of the page here http://foundation.zurb.com/docs/components/offcanvas.html)

Hope this helps!