Kevin Powell - Community•2y ago

keyboard accessibility

Hey everyone, I have a menu where the links are keyboard accessible. I just learned that for mobile viewports where the menu is minimized, the menu links should not be keyboard accessible unless, the menu is not minimized when in the mobile viewport. so, my nav looks like this

  <nav class="menu">
        <ul class="menu__links">
          <li><a tabindex="-1" href='/' autofocus>Home</a></li>
          <li><a tabindex="-1" href='/about'>About Me</a></li>
          <li><a tabindex="-1" href='/portfolio'>Portfolio</a>
          <li><a tabindex="-1" href='/viewResume'>Resume</a>
            <ul class='nested-menu'>
              <li><a href="/design">UX/UI Design</a></li>
              <li><a href="/development">Web Development</a></li>
            </ul></li>
          <li><a href='/contact'>Contact</a></li>
          <li><a href='/blog'>Blog</a></li>
        </ul>
    </nav>

  <nav class="menu">
        <ul class="menu__links">
          <li><a tabindex="-1" href='/' autofocus>Home</a></li>
          <li><a tabindex="-1" href='/about'>About Me</a></li>
          <li><a tabindex="-1" href='/portfolio'>Portfolio</a>
          <li><a tabindex="-1" href='/viewResume'>Resume</a>
            <ul class='nested-menu'>
              <li><a href="/design">UX/UI Design</a></li>
              <li><a href="/development">Web Development</a></li>
            </ul></li>
          <li><a href='/contact'>Contact</a></li>
          <li><a href='/blog'>Blog</a></li>
        </ul>
    </nav>

When the viewport goes below 847px the desktop navigation is changed with a mobile hamburger icon. If you click this icon, the CSS open class get's added to it and it shows the menu links. So, my thinking was, in JavaScript I should check if the viewport width is <= 847

if (window.innerWidth <= 847) {
  // if (the menuElement classList contains 'open' {
  // menuLinks.forEach(link => remove the tabindex Attribute}
}

if (window.innerWidth <= 847) {
  // if (the menuElement classList contains 'open' {
  // menuLinks.forEach(link => remove the tabindex Attribute}
}

3 Replies

NazCodelandOP•2y ago

this works but only if the user opens the website at a viewport that is <= 847 otherwise the if statement results in false. I can't use a while(condition){} because it will run forever sometimes I have a browser open and change it to half of my screen, so if I did that with my site, it would activate the mobile menu. So, I want it to dynamically check if the viewport is <= 847. Just as a recap, the problem I am trying to solve here is to have my menu links not keyboard accessible when the menu is minimized in mobile viewports I figure this is a common issue, so I thought I ask to see if there is a common solution

MarkBoots•2y ago

you could do it with a resize event listener on window

window.addEventListener("resize", handleScreenResize)
function handleScreenResize(){
  if(window.innerWidth <= 847) { .... }
}

window.addEventListener("resize", handleScreenResize)
function handleScreenResize(){
  if(window.innerWidth <= 847) { .... }
}

but!!! I don't think you need it. Just put visibility: hidden on the mobile menu when minimized

NazCodelandOP•2y ago

man, how can I say THANK YOU!!!! Didn't even know we had a "resize" event listener (gonna go look for a list of all eventListeners) and also that visbility: hidden worked perfectly, such a nice simple solution. Thank you so much MarkBoots

Gaming

Programming

keyboard accessibility