У меня проблема с программой чтения с экрана 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 читать каждый элемент отдельно?
Эта проблема возникает во всех браузерах.
