Голос не читает, что я печатаю в текстовом поле

Ниже мой код:

    <form>
        <div class="form-group loginFormGrp">
            <label class="caption">Backup Cloud</label>
            <div class="custSelect loginSelect">
            <label class="caption">Server URL</label>
                <input type="text" aria-label="Server URL" name="serverUrl" class="form-control" placeholder="example.server.com" value="">
            </div>
            <div class="form-group loginFormGrp">
                <label class="caption">Email</label>
                <input type="text" aria-label="Email" name="email" class="form-control" placeholder="[email protected]" value="">
            </div>
            <div class="loginBtnRow">
                <button tabindex="0" type="submit" class="lgBtn btn btn-primary btn-block">Continue</button>
            </div>
        </div>
    </form>

всякий раз, когда озвучивание подчеркивает входное текстовое поле, оно читает "В настоящее время вы находитесь в текстовом поле, внутри веб-содержимого. Для ввода текста в этом поле введите" Выйти из веб-области... ", и когда я начну вводить текст, он ничего не говорит. и проверил другие приложения или веб-сайты, на которых он читает, что я печатаю. но в моем случае это не чтение. Пожалуйста, помогите, если кто-нибудь знает решение.

Ответ 1

Добавьте атрибут title в элемент ввода и укажите дополнительный текст.

Добавление aria-label к входным элементам также должно быть выбрано считывателями экрана.

http://pauljadam.com/demos/title-aria-label.html предоставляет подробную информацию о том, как различные браузеры и устройства чтения с экрана обрабатывают эти атрибуты.

Ответ 2

Я не уверен, поможет ли это, но вы можете попытаться обновить атрибут value полей, каждый раз, когда пользователь меняет текстовое поле. Что-то вроде того:

document.querySelectorAll('input[type="text"]').forEach(function(v){
    v.addEventListener('input', function(){
        v.setAttribute('value', v.value);
    });
});

Но я хочу, чтобы кто-то дал лучший ответ, не используя лишний JavaScript.

Ответ 3

Ваш код выглядит довольно хорошо. Я пробовал с помощью chrome-плагина под названием ChromeVox, все кажется прекрасным, за исключением того, что добавить атрибут lang в родительский тег html и вложить в тег body все, что угодно.

<html lang="en-US" style="height: 100%;">
<body>
 <form>
        <div class="form-group loginFormGrp">
            <label class="caption">Backup Cloud</label>
            <div class="custSelect loginSelect">
            <label class="caption">Server URL</label>
                <input type="text" aria-label="Server URL" name="serverUrl" class="form-control" placeholder="example.server.com" value="">
            </div>
            <div class="form-group loginFormGrp">
                <label class="caption">Email</label>
                <input type="text" aria-label="Email" name="email" class="form-control" placeholder="[email protected]" value="">
            </div>
            <div class="loginBtnRow">
                <button tabindex="0" type="submit" class="lgBtn btn btn-primary btn-block">Continue</button>
            </div>
        </div>
    </form>
</body>
</html>