Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Quality Assurance

Posted by Kristian Woods
Kristian Woods
23,414 Points

Why is the screenreader reading the content behind my nav?

I'm working with accessibility - specifically screen readers. I have a nav that pops out in mobile. I have to have the screen reader jump straight to the close button on the nav as soon as the mobile nav opens. However, even though I've applied my JQuery to select that element, the screenreader is actually reading out the content that is behind the nav. (because the mobile nav is 100% width and height of the viewport).

I thought it was a Z-Index issue - so I boosted the index waaaay up. still nothing. I added aria labels too. nothing. I did, however, target the first menu item in the mobile nav...that worked! As soon as I opened the nav, it jumped straight to the first link.

I can't really show the code, but I can show you how I have implemented by JQuery.

    $('.navMenu').on('click', function () {
        $('nav.fullScreen').addClass('active');
        $('body').addClass('noOverflow');
        $('.closeNav').focus(); // button I want to focus on when menu opens 
    })