Как сделать так, чтобы NVDA считывал элементы в одной строке отдельно?

У меня проблема с программой чтения с экрана NVDA, так как она считывает все элементы в одной строке в одном блоке.

Например, с помощью следующего кода:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Title</title>
        <style>
        nav > ul > li {
            list-style: none;
            display:inline-block;
        }   

        </style>
    </head>
    <body>
        <h1>Title 1</h1>
        <nav role="navigation">
            <ul>
                <li>
                  <a href="#">Link 1</a>
                </li>
                <li>
                  <a href="#">Link 2</a>
                </li>
                <li>
                  <a href="#">Link 3</a>
                </li>
                <li>
                  <a href="#">Link 4</a>
                </li>
            </ul>
        </nav>
    </body>
</html>

Это отобразит все навигационные ссылки в строке, что визуально правильно, но NVDA в режиме просмотра при прокрутке с помощью клавиш со стрелками будет читать все ссылки вместе. Пользователь не может перемещаться между каждой отдельной ссылкой, то есть невозможно оставаться на одной и выбирать ее.

То же самое происходит со ссылкой в ​​середине абзаца:

<p>NVDA will not stop on <a href="#">This link</a> so a user can select it.</a>

В моем примере навигации изменение стиля, чтобы каждая ссылка была в отдельной строке:

        nav > ul > li {
            list-style: none;
            display:block;
        }

Исправляет проблему для NVDA - пользователь может перемещаться между ссылками - но визуально ошибается.

Единственный способ сделать это визуально правильным и заставить NVDA читать его отдельно, это отобразить каждый якорь как блок внутри элемента списка:

        nav > ul > li {
            list-style: none;
            display:inline-block;
        }   

        nav > ul > li > a {
            display: block;
        }

Но это кажется хакерским и не является решением в любой ситуации (это не будет работать в параграфе, например).

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

Эта проблема существует во всех браузерах.

Источник

2 ответа

Решение

Вам не нужно ничего делать, пользователь может перейти к каждой ссылке и может активировать их. Пользователь может прервать чтение в любой момент с помощью клавиши CONTROL. Также после прочтения ссылки пользователь может использовать клавишу SHIFT-TAB для перехода назад к каждой ссылке. Также пользователь может использовать клавишу K для навигации между ссылками. Кроме того, пользователь может использовать клавишу NVDA+control+leftArrow для перемещения назад по словам.

Ключевым моментом здесь является обеспечение того, чтобы каждая ссылка была фокусируемой с TAB, обеспечивая, чтобы она имела href приписывать. Так <a>Not really a link</a> не будет определяться как ссылка и не будет фокусироваться на TAB.

Вот справочник по командам клавиатуры для NVDA http://community.nvda-project.org/documentation/userGuide.html

Если вы хотите изменить поведение по умолчанию, чтобы NVDA считывала ссылки, как если бы в каждой строке было только одно, как это делает JAWS, сделайте следующее:

  1. Перейдите в меню NVDA (вставьте |n).
  2. Перейти в настройки.
  3. Выберите режим просмотра.
  4. Снимите второй флажок "Использовать макет экрана, когда поддерживается".
  5. Выберите ОК.
  6. Вернитесь в меню NVDA (вставьте |n).
  7. Выберите "сохранить конфигурацию". Если вы этого не сделаете, в зависимости от того, как настроена NVDA, это изменение может не сохраниться при перезапуске.
Источник

Изменениеdisplayсвойства и изменяет способ чтения списка NVDA. Из того, что я видел до сих пор, изменение любого из них на такие вещи, какinlineиinline-blockприведет к тому, что NVDA будет читать их как абзац (со «списком с x элементами» в начале), делая паузу после определенного количества слов в конфигурации по умолчанию.

Чтобы заставить его работать со встроенным списком, вы можете использоватьdisplay: flexна элементе

      <!DOCTYPE html>
<html lang="en">
    <head>
        <title>Title</title>
        <style>
        nav > ul {
            display: flex;
        }

        nav > ul > li {
            list-style: none;
        }   

        </style>
    </head>
    <body>
        <h1>Title 1</h1>
        <nav role="navigation">
            <ul>
                <li>
                  <a href="#">Link 1</a>
                </li>
                <li>
                  <a href="#">Link 2</a>
                </li>
                <li>
                  <a href="#">Link 3</a>
                </li>
                <li>
                  <a href="#">Link 4</a>
                </li>
            </ul>
        </nav>
    </body>
</html>

Вы также можете использоватьdisplay: block; float: leftна обоихulэлемент иliэлементы

      <!DOCTYPE html>
<html lang="en">
    <head>
        <title>Title</title>
        <style>
        nav > ul {
            display: flex;
        }

        nav > ul > li {
            display: block;
            float: left;
        }   

        </style>
    </head>
    <body>
        <h1>Title 1</h1>
        <nav role="navigation">
            <ul>
                <li>
                  <a href="#">Link 1</a>
                </li>
                <li>
                  <a href="#">Link 2</a>
                </li>
                <li>
                  <a href="#">Link 3</a>
                </li>
                <li>
                  <a href="#">Link 4</a>
                </li>
            </ul>
        </nav>
    </body>
</html>
Источник
Другие вопросы по тегам