Accessibility Issue - aria-hidden attribute on Off-Canvas wrap.

[manwithacat]

In header.php the aria-hidden attribute on the off-canvas-wrap is set to true. The effect of this is that screen readers (particularly JAWS) return a message that the document is empty.

<div class="off-canvas-wrap" data-offcanvas aria-hidden="true">

Changing it to false solves the problem.

<div class="off-canvas-wrap" data-offcanvas aria-hidden="false">

[olefredrik]

Hi James

From the Foundation Docs:

The off-canvas menu is not yet fully accessible. Because it's tucked away off-screen but not totally hidden, the user's browser will still tab through each item, and screen readers will read each item in the navigation. However, the off-canvas menu will not appear when focused with the keyboard.

If your page has two primary navigation menus, perhaps a horizontal one for larger screens and an off-canvas menu for small screens, it's best to hide one so screen readers won't read through two whole navigation menus. Add the attribute aria-hidden="true" to the container of one navigation, which will tell assistive devices to skip it entirely.

I see your point, and I guess I have missed something on the way. Perhaps it would be a good idea to move the aria-hidden="true" attribute from the off-canvas-wrap class to the left-off-canvas-menu class?

[manwithacat]

I was going to do a pull request, but honestly I'm not too sure what the right approach is. I think it would make sense to put aria-hidden="true" on the <aside> containing the off-canvas menu because screen readers would be triggering the large layout and thus not requiring knowledge of the off-canvas links. Maybe.

[olefredrik]

Then I think we agree. Removing the aria-hidden="true" attribute on the off-canvas-wrap and putting it on the <aside> containing the off-canvas makes sense. Well spotted, thumbs up! If you submit a pull request, I would be more than happy to merge it. Cheers

[olefredrik]

Thanks! #109