屏幕阅读器正在跳过菜单复选框答案

【问题标题】：Screen reader is skipping menu checkbox屏幕阅读器正在跳过菜单复选框
【发布时间】：2019-06-13 23:19:58
【问题描述】：

这是 HTML：它跳过的部分是输入元素。它将读取 alt 标签和徽标名称，但会跳过。

<div class="row topheader">
  <div class="col-12 text-upper-logo">
    <a href="home.html"><img class="header-handlogo" src="images/iconlogoOG2.png" alt="the Buddy Jane logo which depicts a hand holding a bud."></a>
    <a href="home.html" class="text-logo ml-2">Buddy Jane</a>
    <input type="checkbox" id="toggle-menu"/>
    <label for="toggle-menu" class="menu-button mt-4">
     <span id="hamburger-icon" class="menu-icon"></span>
    </label>
  </div>  
</div>

不确定 css 是否对它很重要，但它是：在我的css中，我确实没有显示输入元素，但在它之后我有一个输入图像显示块，所以我不确定这是否是导致它的原因。

    .menu-button{
        background:none;
        border:none;
        float:right;
    }
    .menu-icon {
        font-size: 3em;
        max-width: 45px;
        text-align: center;
        display: block;
        margin: 15% auto;
        cursor: pointer;
        transition: transform .2s ease;
    }
    .menu-icon:hover {
        transform: scale(0.9);
    }
    .menu-icon:before, .menu-icon:after {
        line-height: .5;
    }
    .menu-icon:before {
        content: '☰';
        display: block;
        margin-left:7px;
    }
    .menu-icon:after {
        content: '╳';
        font-size: .65em;
        font-weight: 800;
        display: none;
        margin-top:11px;
    }
    #toggle-menu:checked ~ label[for="toggle-menu"] .menu-icon {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    #toggle-menu:checked ~ label[for="toggle-menu"] .menu-icon:before {
        display: none;
    }
    #toggle-menu:checked ~ label[for="toggle-menu"] .menu-icon:after {
        display: block;
    }
    input {
        display: none;
    }
    input[type="image"] {
        display: block !important;
        -webkit-transform: scale(0.5) translateY(-24px);
        transform: scale(0.5) translateY(-24px);
        }
        * {
        -webkit-font-smoothing: antialiased;
        box-sizing: border-box;
    }

【问题讨论】：

标签： accessibility screen-readers

【解决方案1】：

您代码中的input 具有type="checkbox"，因此应用于它的CSS 将只是display: none;。 input[type="image"] 永远不会匹配您的输入，除非您更改 CSS 选择器或输入类型。

display: none; 规则在视觉上和可访问性树中完全隐藏了元素，这就是屏幕阅读器不会大声朗读它的原因。

如果您希望保持输入可访问但在视觉上隐藏，一种方法是将以下规则应用于您的输入：

.visually-hidden {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0;
    margin: -1px;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
    white-space: nowrap;
}

【讨论】：