Проблема не в NVDA, а в браузере.Какой браузер вы используете?Я слышу «Заголовок примера» дважды при использовании программы чтения с экрана с Firefox и Chrome, но не с Internet Explorer.Не имело значения, использовал ли я NVDA или JAWS.Проблема была вызвана браузером.
И Firefox, и Chrome рассматривают <figcaption> как роль group .Это допустимая роль для этого элемента, как отмечено в спецификации html для figcaption , но обычно браузер должен не выбирать роль по умолчанию, если в спецификации html не указано, какой должна быть роль по умолчанию,Например, элемент <section> сообщает роль по умолчанию region, но ему могут быть назначены несколько других типов ролей.Если ни одна из других ролей не назначена html-разработчиком, , тогда должна использоваться роль по умолчанию region.
<figcaption>, с другой стороны, не имеет роль по умолчанию, и браузер не должен выбирать group для вас.Имеет смысл, что <figcaption> должна быть групповой ролью, поэтому, возможно, спецификация html должна измениться, сказав это, но до тех пор это не правильно для роли по умолчанию, которую браузер выбирает.
Сейчас, если все это имеет смысл, что Firefox и Chrome (неправильно) выбирают групповую роль для вас, когда вы переходите в группу с помощью клавиши tab , сначала объявляется имя группы, а затем любой элемент, который выприземлился на объявлено следующее.
Имя группы, в данном случае, это весь текст, содержащийся в <figcaption>.Это означает текст ссылки, «заголовок примера», а также дату «24 сентября 1999 года».И затем элемент, на который переместился ваш фокус, является ссылкой, содержащейся в заголовке, поэтому текст ссылки (правильно) объявляется как «пример заголовка».В общем, я слышу "Example Title September 24, 1999 grouping, Example Title, link, heading level 3".
То есть вы слышите две объявленные вещи: название группы и элемент, который получил фокус.
Если вы перемещаетесьиспользуя клавиши навигации DOM для чтения с экрана (клавиши вверх / вниз), вы не слышите текст вашей ссылки дважды.Вы переходите к каждому элементу отдельно.
Конечным результатом является то, что вам не нужно ничего делать, чтобы это исправить.Ваш код правильный, и это ошибка в браузере.Однако, если вы хотите решить проблему, вы можете дать <figcaption> определенную роль group, а , а не - 1045 *.Это предотвращает чтение вашего figcaption как метки группировки, но, опять же, я бы не рекомендовал сделать это.
Если вам интересно, почему этот хак работает, если вы даете элементуроль, но не присваивайте роли метку (через aria-label или aria-labelledby), тогда большинство браузеров не обнаружат роль этого элемента, поэтому программа чтения с экрана не будет его читать.
Update:
Я забыл прокомментировать проблему "кликабельности".Это означает, что NVDA сообщает, что элемент или его родитель или кто-то в дереве предков имеет обработчик щелчков, когда щелчок обычно не обрабатывается.Например, если у вас есть <div> или <h2>, или <p>, или какой-либо другой неинтерактивный элемент с обработчиком onClick, это обычно не интерактивные элементы, поэтому NVDA сообщает, что вы можете выбрать этот элемент.
Подробнее о https://github.com/nvaccess/nvda/issues/7430#issuecomment-318984375