Визуально скрытый текст
Вы хотите, чтобы визуально скрытый / только для чтения с экрана текст. Это может быть достигнуто с помощью класса 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"/>