Программа чтения с экрана пропускает флажок меню

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