Aria-label не работает в Chrome и Firefox с NVDA

Question

У меня есть простое текстовое поле:

<input type="text" aria-label="First Name" title="First Name" />

Я показываю всплывающую подсказку First Name при наведении на текстовое поле.

Я использовал aria-label, а также aria-labelledby, но ни один из них не работает с Chrome или Firefox.

Он работает при выделении текстового поля, но не работает при наведении мыши.

Но он отлично работает при IE при наведении мыши а также в текстовом поле выберите.

Я использую программу чтения с экрана NVDA.

Answer 1

Чтобы избежать путаницы, правильный метод для маркировки входа - просто использовать <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, Inte rnet Explorer, а не в Chrome для объявить при наведении.

Однако, если метка видна, она работает нормально (если вы наводите курсор на метку, она не объявляет, если вы наводите курсор на сам ввод, даже с видимой меткой), она также отлично работает, если вы focus input.

Заключительные мысли - показывают ярлыки (в третий раз я сказал это в одном ответе. Хе-хе), проблема решена, не нужно усложнять ее.

Кроме того, я не уверен, почему вы считаете это важным, если кто-то использует программу чтения с экрана, чтобы помочь при использовании мыши, он нажимает на вход, я никогда не сталкивался с кем-то, кто обнаружил бы, что у него нет Если в поле формы при наведении указывать на поле формы, возникает проблема с доступностью, если она работает правильно.

Кроме того, это может повлиять только на: -

• пользователей программы чтения с экрана,
• , которые используют мышь,
• , которые имеют проблемы со зрением,
• , которые используют Google Chrome,
• , которые также используют NVDA,
• и не используйте экранную лупу.

довольно точно c, поэтому вряд ли проблема.

Answer 2

Он работает при выделении текстового поля, но не работает при наведении мыши.

Он не предназначен для работы при наведении мыши.

NVDA читает метка для элементов ввода при наведении мыши, а не доступное имя .

Если вы хотите что-то прочитать, вы должны добавить метку.

Answer 3

Я тестировал с NVDA на Firefox и Chrome, и я могу подтвердить, что программа чтения с экрана не объявляет значение aria-label на input

Я смотрел на 2.10 Практическая поддержка: aria-label, aria-labelledby и aria-описаны by и обнаружил, что aria-label не поддерживается для input элементов, но aria-labelledby и aria-describedby. Взятые из ссылки выше:

aria-labelledby и aria-descriptionby надежно поддерживаются для интерактивных элементов содержимого, таких как ссылки и элементы управления формой, включая множество типов ввода.

Поэтому я изменил код, который этот фрагмент работает с NVDA на Chrome и Firefox.

<input type="text"  aria-labelledby="label" />
<span id="label">First Name</span>

Убедитесь, что заключили input и «метку» внутри form, чтобы он работал оптимально ,