Голос за кадром не читает то, что я печатаю в текстовом поле - PullRequest
Новая
       7

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

0 голосов
/ 21 мая 2018

Ниже приведен мой код: 

    <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="user@example.com" value="">
            </div>
            <div class="loginBtnRow">
                <button tabindex="0" type="submit" class="lgBtn btn btn-primary btn-block">Continue</button>
            </div>
        </div>
    </form>

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

Ответы [ 3 ]

0 голосов
/ 31 мая 2018

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

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

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

0 голосов
/ 01 июня 2018

Ваш код выглядит довольно хорошо.Я попробовал с плагином 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="user@example.com" value="">
            </div>
            <div class="loginBtnRow">
                <button tabindex="0" type="submit" class="lgBtn btn btn-primary btn-block">Continue</button>
            </div>
        </div>
    </form>
</body>
</html>
0 голосов
/ 21 мая 2018

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

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

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

...