Как разрешить программе чтения с экрана объявлять дополнительный текст

В следующем простом HTML-коде, когда включено средство чтения с экрана (NVDA, VoiceOver на Mac).

Когда я вхожу в поле ввода, оно объявляет This is the test label (отображается на веб-странице)

Я хочу, чтобы средство чтения с экрана объявляло что-то дополнительное, например if you type something, more fields will appear. (скрыто на странице)

Интересно, как мне этого добиться?

<html>
  <head>
    test
  </head>
  <body>
    <label class="large-label" for="your-name">
      This is the test label
    </label>
    <input id="your-name" name="your-name" type="text" />
  </body>
</html>

html accessibility screen-readers nvda
person kenpeter    schedule 18.06.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Визуально скрытый текст

Вам нужен визуально скрытый / только текст для чтения с экрана. Этого можно добиться с помощью класса CSS, расположенного во фрагменте ниже, а затем применив этот класс к <span> внутри метки.

Он будет объявлен программам чтения с экрана, но не виден.

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
    <label class="large-label" for="your-name">
      This is the test label <span class="visually-hidden">if you type something, more fields will appear</span>
    </label>
    <input id="your-name" name="your-name" type="text" />

Лучший способ

В этом случае я бы спросил, должен ли это быть визуально скрытый текст.

В приведенном примере, если вы что-то напечатаете, появится больше полей с информацией, полезной для всех. Это особенно полезно для людей с когнитивными нарушениями или тревожным расстройством, поскольку предварительное предупреждение об изменениях помогает им не запутаться / подготовиться к изменению, чтобы оно не было неожиданным.

Я бы предложил вместо этого иметь раздел инструкций в начале формы или над конкретным вводом, который объясняет это всем.

Затем мы можем связать метку ввода и инструкции с вводом, используя aria-labelledby="id1 id2" и присвоив метке и инструкциям идентификатор.

Вы должны сохранить for="" на метке в качестве резервной копии / чтобы метка была правильно связана с вводом, позволяя вам щелкнуть метку, чтобы сфокусировать ввод, если хотите.

Ниже приведен грубый пример, вам придется использовать свое суждение о том, что работает для вашего варианта использования, но он должен дать вам представление.

#hint{
 width: 90%;
 padding: 5%;
 background-color: #333;
 color: #fff;
 font-size: 1.3rem;
}
<p id="hint">If you type something, more fields will appear</p>

<label class="large-label" for="your-name" id="your-name-label">
      This is the test label
 </label>   
    <input id="your-name" name="your-name" type="text" aria-labelledby="your-name-label hint"/>

person Graham Ritchie    schedule 18.06.2020