Quality Assurance

Kristian Woods
Kristian Woods
21,020 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 
    })