Question

这里是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;
    }

Answer 1

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

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;
}

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

1 个答案: