汉堡菜单在初始加载时未显示的可访问性问题答案

【问题标题】：Accessibility Issue with Burger menu not showing on initial load汉堡菜单在初始加载时未显示的可访问性问题
【发布时间】：2021-06-21 09:18:45
【问题描述】：

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>

我什至不确定这是否是一个问题，但我想确定一下，尤其是对于那些依赖辅助技术来导航网站的人。

我的汉堡在初始加载时没有出现...也就是说，如果我将侧滚动条拖入或拖出（在响应模式下查看时），它会突然出现。当我按下默认设置为“启用”的Firefox上的“禁用触摸模拟”图标时，它也会出现。

更新：我还注意到，如果我没有通过执行上述任何一项操作来显示汉堡菜单，它就不会以轮廓为焦点。 tabindex 似乎直接从“跳转到主要内容”链接跳转到导航内的实际链接。

来自 Chrome： 它变得更加奇怪。不会将大纲重点放在从初始加载跳到内容或汉堡包上，而是首先重点放在徽标上……但是如果我点击 shift+tab ，它将回顾性地关注它们。但是，当焦点从“跳到内容”链接移动到汉堡菜单时，所有标题内容都会消失，仅显示带有汉堡菜单的白色背景。只有当 tabindex 焦点跳过所有导航链接并点击组织徽标时，所有其他标题内容才会再次出现。

此问题适用于任何可以提供帮助的人，但我非常欢迎任何可访问性专家提供意见。

我什至花了很长时间才发布这个问题，因为当问题在不同的浏览器和场景中表现不同时，我真的不知道如何解释它。

如果需要，很乐意发布代码，但想先概述问题。

T.I.A - 如果我没有正确“格式化”，我深表歉意……这对我来说是全新的

chrome tabindex 1st item

tabindex 2nd item

tabindex 3rd/example nav link

tabindex item logo

【问题讨论】：

可以处理代码，因为您的意思并不完全清楚，您能否将代码放在小提琴中，以便我们可以看到您描述的问题？
我觉得很傻，但什么是“小提琴”，我该怎么做？大声笑
小提琴是一个代码笔或工作代码示例。您可以在jsfiddle.net、codepen.io 等处创建它们并包含一个链接，或者如果您编辑您的问题，则左起第 7 项 (<>) 允许您直接在您的问题中创建一个“sn-p” . p.s.永远不要因为提问而感到愚蠢！ ??????
@GrahamRitchie jsfiddle.com 似乎不是一个真实的网站。也许是 jsfiddle.net？
哎呀，很抱歉，是的，我现在已经更正了链接！公平地说，最好的做法是使用我提到的“sn-p”按钮，因为这意味着人们可以轻松地将您的 sn-p 复制到他们的答案中。（编辑：没关系你已经做到了！）

标签： javascript accessibility hamburger-menu

【解决方案1】：

我解决了。问题是跳过链接。我有“left:10000”，我懒洋洋地从 udemy 的无障碍课程中复制了它……这会教我哈哈。一切都好，结局好！

【讨论】：

抱歉，我没有收到您已回复的通知，很高兴您对它进行了排序！
没关系@GrahamRitchie :)