Accessibility Issue with Burger menu not showing on initial load

Question

const menuIcon = document.querySelector(".hamburgerMenu");
const navbar = document.querySelector("nav");

 document.addEventListener("DOMContentLoaded", event => {
  menuIcon.addEventListener("click", () => {
    navbar.classList.toggle("change");
    let burgerExpanded = document.getElementById('hamburger_Id').getAttribute("aria-expanded");
    if (burgerExpanded == "true"){
  burgerExpanded = "false"
  } else {
  burgerExpanded = "true"
  }
  document.getElementById("hamburger_Id").setAttribute("aria-expanded", burgerExpanded);

  });
 
});

*:focus {
  outline: 3px solid rgb(115, 255, 0);
}

body {
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

header,
footer,
nav {
  margin: 0 auto;
  width: 100vw;
  overflow-x: hidden;
  height: auto;
}

footer {
  background-color: #aed3eb;
  width: 100%;
  margin: 0 auto;
  height: auto;
  text-align: center;
}

main {
  width: 100%;
  margin: 0 auto;
  height: auto;
  position: relative;
}

h1,
h2,
h3,
h5,
p,
a,
li,
span,
.form-control,
button,
caption,
table {
  font-family: "Roboto", helvetica, arial, sans-serif;
  color: white; /* look at changing this style elsewhere and making black*/
  text-align: center;
}

h1 {
  font-size: 1.7rem;
  color: black;
}

h2 {
  font-size: 1.3rem;
  font-weight: 400;
  text-align: center;
}

h3 {
  font-weight: normal;
  margin: 0 auto;
  width: 100%;
  color: black;
  text-transform: capitalize;
  font-size: 1.4rem;
}
a,
button {
  cursor: pointer;
}

p,
button,
li {
  font-size: 16px;
}

p,
li {
  line-height: 26px;
  color: black;
}

aside,
section {
  margin: 0 auto;
  width: 100%;
  height: auto;
}

.container ul li {
  width: 80%;
  text-align: justify;
  margin: 0 auto;
}

/*#################### SKIP LINK STYLES##################*/

.skip {
  background-color: #1d78b3;
  margin: 3px 0;
}

.skip a {
  position: absolute;
  left: 10000px;
  top: auto;
  height: 1px;
  overflow: hidden;
  font-size: 16px;
  display: block;
  padding: 10px;
  background-color: #1d78b3;
}
.skip a:focus {
  margin-left: 1rem;
  position: static;
  height: auto;
  width: max-content;
  overflow: hidden;
  display: block;
  padding: 10px;
  z-index: 30;
}
/*#################### BURGER MENU STYLES ##################*/

.hamburgerMenu {
  width: 45px;
  height: 55px;
  position: fixed;
  top: 20px;
  right: 5px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: #1d78b3;
  border: 1px solid #fff;
  border-radius: 3px;
  z-index: 40;
}

span.menu {
  width: 35px;
  font-size: 0.8rem;
  color: white;
  margin: 0 auto;
  font-size: 14px;
}

.change {
  right: 0px;
  z-index: 35;
}
.line {
  width: 35px;
  height: 3px;
  background-color: white;
  transition: all 0.8s;
  margin: 0 auto;
}

.line-3 {
  margin-bottom: 5px;
}

.change .line-1 {
  transform: rotate(-405deg) translate(-6px, 6px);
}
.change .line-2 {
  opacity: 0;
}
.change .line-3 {
  transform: rotate(405deg) translate(-6px, -6px);
}

/*#################### PAGE BANNER STYLES ##################*/

.pageBannerContainer {
  background-color: black;
  height: 200px;
  width: 100%;
  position: relative;
}

.pageBanner {
  height: 200px;
  width: 100vw;
  background-position: bottom;
  position: absolute;
  bottom: 0;
  overflow: hidden;
  opacity: 0.3;
}
.pageBannerContent {
  height: 200px;
  width: 100%;
}
/*#################### BLUE HEADER NAVIGATION  ##################*/

.flexHeaderContainer {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  height: 200px;
  /*padding-top: 3rem;*/
}

img.dove {
  display: none;
}

.logoDiv {
  height: 200px;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
}

.logoHomeLink {
  height: 60px;
  display: block;
}

img.cqLogo {
  height: 60px;
  width: 60px;
  outline: none;
}

.outer {
  display: none;
  position: absolute;
}
/*#################### PAGE BANNER HEADER TITLE STYLES ##################*/

.maintitles {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 50%;
  transform: translateX(-18px);
}
h1.mainTitle {
  color: #fff;
  font-weight: 400;
  padding-bottom: 1rem;
  width: 100%;
  text-align: center;
}

h1 > span.h1Color {
  color: rgb(245, 196, 106);
}

h2.whiteText {
  color: #fff;
  text-align: center;
  font-weight: 400;
  margin: 0 auto;
  width: 100%;
}

h2.ourValues {
  color: white;
}

/*#################### END OF HEADER TITLE STYLES ##################*/

/*#################### MOBILE NAVIGATION STYLES ##################*/

nav {
  width: 160px;
  height: 50%;
  position: fixed;
  top: 0px;
  right: -300px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30% 0 0% 50%;
  background-color: #000;
  z-index: 35;
  transition: right 0.8s cubic-bezier(1, 0, 0, 1);
}

nav ul {
  text-align: right;
  line-height: 0.8;
  height: 100%;
}

nav ul li {
  width: 100%;
  position: relative;
  list-style-type: none;
}

nav ul li a {
  display: block;
  font-size: 18px;
  text-decoration: none;
  color: white;
  letter-spacing: 1px;
  position: relative;
  padding: 8px 0;
  font-weight: 300;
}
nav ul li a:hover,
nav ul li a:focus {
  font-weight: 400;
}

nav ul li a::before,
nav ul li a::after {
  content: "";
  width: 100%;
  height: 2px;
  background-color: #1d78b3;
  position: absolute;
  left: 0;
  transform: scaleX(0);
  transition: 0.5s;
}
nav ul li a::after {
  bottom: 0;
  transform-origin: right;
}
nav ul li a::before {
  top: 0;
  transform-origin: left;
}

nav ul li a:hover::before,
nav ul li a:hover::after {
  transform: scaleX(1);
}

nav ul li a[aria-current="'page'"] {
  font-weight: 400;
  color: #f5c46a;
}

<header>
 
  <div class="skip">
    <a href="#content">Skip to main content</a>
  </div> 
<div class="pageBannerContainer"> 
 
     <div class="pageBanner" style="background-image: url(<?php echo get_theme_file_uri('/img/coventryImage.jpg') ?>);" ></div>
                      
     
         <!--  <nav class="mainNavigation">-->
        <nav class="mainNavigation">
          
 <!--create burger menu here and position top right -->
 <button id="hamburger_Id" class="hamburgerMenu" aria-label="Main menu" aria-expanded="false">
          <span class="menu">Menu</span>
         <div class="line line-1"></div>
         <div class="line line-2"></div>
         <div class="line line-3"></div>
         </button>
 
      <!--end of hamburgerMenu --> 
      
           <?php wp_nav_menu(array(
           'theme_location' => 'mainHeaderNavigation'
          )); ?>
 
      </nav>

    <div class="pageBannerContent">
       <!--PARENT FLEX-->
    <div class="flexHeaderContainer">
       
        <!--CHILD FLEX 1-->
        <div class="logoDiv">
            <a href="<?php echo site_url() ?>" class="logoHomeLink" tabindex="0" >
          <img class="cqLogo" src="<?php echo get_theme_file_uri('img/cqLogo.png')?>;" alt="Homepage"/>
          </a>
        </div>

        <!--CHILD FLEX 2-->
        <div class="maintitles">
          <img class="dove" src="<?php echo get_theme_file_uri('img/doveOrange.png')?>" alt="Dove representing peace" />
          <h1 class="mainTitle">
            <span class="h1Color">Coventry</span> Quakers
          </h1>
          <h2 class="whiteText">Religious Society of Friends</h2>
        </div>
        <!--CHILD FLEX 3-->
        <div class="outer">
          <h2 class="ourValues">
            We value
          </h2>
          <div class="inner">
            <span>Equality </span><br />
            <span> Peace </span><br />
            <span>Justice </span><br />
            <span>Integrity </span><br />
            <span>Simplicity </span><br />
            <span>Sustainability</span><br />
            <span> Equality </span><br />
          </div><!--end of inner -->
        </div><!--end of outer -->
       
      </div><!--end of flexHeaderContainer -->
</div><!--end of pageBannerContent -->
</div><!--end of pageBannerContainer -->
    </header>

I'm not even sure if this is an issue or not but want to be certain especially for those relying on assistive technology to navigate site.

My burger does not appear on initial load...That said, if I drag the side scroll bar in or out (while viewing in responsive mode) it suddenly appears. It also appears when I press the icon "disable touch simulation" on firefox which is set by default to 'enabled'.

Update: I've also noticed, if i don't get that burger menu to appear by doing either of the above it does not get focused with outline. The tabindex appears to jump straight from 'skip to main content' link to the actual links inside the navigation.

From Chrome: It gets even more strange. Doesn't focus outline on my skip to content or hamburger from initial load but focuses first on logo...but if I hit shift+tab it will focus them retrospectively. However when focus moves from 'Skip to content' link to the burger menu all the header content vanishes displaying only white background with burger menu. Only once tabindex focus has skipped through all the nav links and hit the organisation logo does all other header content appear again.

This question is for anyone that can help but I would most welcome input from any experts in accessibility.

It's taken ages for me to even post this question as I really didn't know how to explain it when the issue is manifesting differently in different browsers and scenarios.

Happy to post code if needed but wanted to outline the issue first.

T.I.A - I apologise if i've not 'formatted' properly... this is all new to me

chrome tabindex 1st item

tabindex 2nd item

tabindex 3rd/example nav link

tabindex item logo

could do with the code as it isn't entirely clear what you mean, could you put the code in a fiddle so that we can see the issue you are describing please? — Graham Ritchie
I feel very silly asking but what is 'fiddle' and how can I do that? lol — Missy Mare
A fiddle is a codepen or a working code example. You can either create them at jsfiddle.net, codepen.io etc. and include a link or if you edit your question the 7th item from the left (<>) allows you to create a "snippet" directly within your question. p.s. Never feel silly for asking questions! 😁 — Graham Ritchie
@GrahamRitchie jsfiddle.com doesn't seem a real site. Perhaps jsfiddle.net? — JBentley
oops, my apologies, yes I have corrected the link now! To be fair it is best practice to use the "snippet" button I mentioned anyway as that means people can copy your snippet to their answer easily. (EDIT: nevermind you already did it!) — Graham Ritchie

Missy Mare Missy Mare · Accepted Answer · 2021-06-21T22:59:49

I solved it. The problem was the skip link. I had "left:10000" which i'd lazily copied from an accessibility course from udemy... that'll teach me LOL. All's well that ends well!

Accessibility Issue with Burger menu not showing on initial load

1 Answers