Можно ли заставить программу чтения с экрана читать внутреннее содержимое набора полей? - PullRequest
Новая
       20

Можно ли заставить программу чтения с экрана читать внутреннее содержимое набора полей?

0 голосов
/ 29 октября 2018

При чтении страницы Chromevox и Voice Over (у меня нет JAWS или NVDA), кажется, пропускают внутренние элементы <fieldset>. В приведенном ниже примере HTML есть кнопка для фокусировки на элементе <main id="content" tabindex="-1">: 

<html lang="en">
<head><script>
    function focusOnContent() {
        document.getElementById('content').focus()
    }
</script></head>
<body>
    <button onclick="focusOnContent()">Focus on main</button>
    <main id="content" tabindex="-1">
        <h1>User Sign-up</h1>
        <fieldset>
            <legend>Name</legend>
            <label for="firstname">First</label>
            <input type='text' id='firstname'><br>
            <label for="lastname">Last</label>
            <input type='text' id='lastname'>
        </fieldset>
        <button>Submit</button>
    </main>
</body>
</html>

При нажатии на <main> элемент получает фокус, и программа чтения с экрана говорит:

Регистрация пользователя, Имя, Отправить

Однако я бы хотел, чтобы это читалось как

Регистрация пользователя, Имя, Первый, Последний , Отправить

Удаление элемента <fieldset> устраняет проблему, но, очевидно, я бы хотел сохранить это, поскольку оно решает другие проблемы с доступностью.

1 Ответ

0 голосов
/ 30 октября 2018

Если вы используете семантически правильный html, не беспокойтесь о том, как программа чтения с экрана его читает. Вариантов слишком много, и разные комбинации будут читать по-разному.

Существуют различные программы чтения с экрана (Chromevox, VoiceOver, JAWS, NVDA), различные браузеры (Chrome, Safari, Firefox, IE, Edge), разные ОС (Mac, PC, Mobile) и различные настройки многословия в программе чтения с экрана. сам.

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

Ваш пример выглядит хорошо.

  • У вас есть tabindex="-1" на цели фокуса ()
  • Вы используете атрибут for <label>, чтобы указать на соответствующий элемент <input>
  • У вас есть <fieldset> и <legend> для группировки элементов
...