У меня есть простое текстовое поле:
<input type="text" aria-label="First Name" title="First Name" />
Я показываю всплывающую подсказку First Name при наведении текстового поля.
Я использовал aria-label, а также aria-labelledby, но ни один из них не работает с Chrome или Firefox.
Он работает с выбором текстового поля, но не работает с наведением мыши.
Но он отлично работает с IE при наведении курсора мыши, а также при выборе текстового поля.
Я использую программу чтения с экрана NVDA.
Он работает с выбором текстового поля, но не работает с наведением мыши.
Он не предназначен для работы при наведении мыши.
NVDA считывает метку для элементов ввода при наведении курсора мыши. , а не доступное имя.
Если вы хотите, чтобы что-то было прочитано, вы должны добавить метку.
Defines a string value that labels the current element. NVDA должна рассматривать это значение как метку, а не просто доступное имя. Если это не так, это ошибка.
- person ilikesleeping; 15.12.2020
Чтобы избежать путаницы, правильный метод маркировки ввода — просто использовать <label>.
Так что у вас должно быть
<label for="firstName">First Name</label>
<input id="firstName" name="firstName" type="text"/>
Способ связать метки и входные данные — использовать атрибут for и указать его на идентификатор входа.
Дополнительным преимуществом этого является то, что если вы нажмете на label, он сфокусируется на соответствующем input, чего не будет в других решениях.
Если вам по какой-то причине требуется ввод без метки, следующий пример иллюстрирует, как это сделать правильно. (пожалуйста, не делайте этого, если вы можете этого избежать, ярлыки важны для людей с тревожными расстройствами, чтобы иметь возможность проверить, правильно ли они заполнили поле, однако я знаю, что иногда «дизайнеры» просто не сдвинется с места, и вам придется их обойти....)
В этом примере мы «визуально скрываем» метку с помощью CSS и добавляем к элементу placeholder текст. Просто повторю, что это последнее средство для тех дизайнеров, которые не хотят слушать о специальных возможностях, и вам следует использовать видимые метки.
По крайней мере, делая это таким образом, ввод будет работать правильно для пользователей программ чтения с экрана.
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap; /* added line */
}<label for="firstName" class="visually-hidden">First Name</label>
<input id="firstName" name="firstName" placeholder="First Name" type="text"/>Наконец-то у меня появилась возможность протестировать это, работает в Firefox, Internet Explorer, а не в Chrome для объявления при наведении.
Однако, если метка видна, она работает нормально (если вы наводите метку, она не объявляется, если вы наводите курсор на сам ввод, даже с видимой меткой), он также отлично работает, если вы focus input.
Заключительные мысли - показать метки (в третий раз я сказал это в одном ответе, хе-хе), проблема решена, не нужно ее усложнять.
Кроме того, я не уверен, почему вы думаете, что это важно, если кто-то использует программу чтения с экрана для помощи при использовании мыши, они будут нажимать на ввод, я никогда не встречал никого, кто обнаружил бы, что поле формы не читается при наведении проблема доступности, если она работает правильно, когда вы щелкаете в поле.
Также единственные люди, которые могут быть затронуты этим: -
довольно специфично, так что вряд ли проблема.
Я тестировал NVDA в Firefox и Chrome и могу подтвердить, что программа чтения с экрана не объявляет значение aria-label на input
Я просмотрел 2.10 Практическая поддержка: aria-label, aria-labelledby и aria-describedby и обнаружил, что aria-label не поддерживается для input элементов, но aria-labelledby и aria-describedby поддерживаются. Взято по ссылке выше:
aria-labelledby и aria-describedby надежно поддерживаются для интерактивных элементов контента, таких как ссылки и элементы управления формы, включая множество типов ввода.
Поэтому я изменил код, который этот фрагмент работает с NVDA в Chrome и Firefox.
<input type="text" aria-labelledby="label" />
<span id="label">First Name</span>
Не забудьте заключить input и «метку» внутри form для оптимальной работы.
<span> вместо <label> и связывать их с помощью for=, то, как вы это показываете, означает, что когда вы нажимаете «метку», он не фокусируется на <input>. Пожалуйста, удалите пример кода, чтобы я мог дать вам +1 за указание на то, что aria-label не работает на вводе.
- person Graham Ritchie; 30.01.2020
aria-label, поэтому я предполагаю, что он не может использовать <label> Конечно, лучше всего использовать label, но очевидно, что ОП не может использовать его в своем случае.
- person Stefany Newman; 30.01.2020
titleне очень хорошая идея, вот и все. Как люди узнают, о чем поле, если у вас нет реальной метки для ввода? У вас есть более полный пример, поскольку я, возможно, не смогу решить вашу проблему, но я могу помочь вам сделать ввод/форму доступной и совместимой с WCAG, на данный момент у меня есть ощущение, что это не будет работать правильно с большинством программ чтения с экрана, но Я предполагаю, что это одна строка кода. - person Graham Ritchie schedule 30.01.2020<label>для ввода для чтения с экрана и соответствия требованиям aoda. - person Huangism schedule 30.01.2020