NVDA считывает кнопку aria-label при нажатии, но не при наведении

Я создал слайд-шоу для веб-сайта, используя HTML-код W3Schools (отсюда: https://www.w3schools.com/w3css/w3css_slideshow.asp)

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

Я изменил код W3Schools с настоящих кнопок на этот:

<div class="direction prev" tabindex="0" onclick="plusSlides(-1)" role="button" aria-label="previous">❮</div>

<div class="direction next" tabindex="0" onclick="plusSlides(1)" role="button" aria-label="next">❯</div>

и попробовал несколько комбинаций, в том числе:

  1. добавление идентификаторов в диапазон с текстом, а затем ссылка на него с помощью aria-labelledby в кнопке div
  2. используя title="Previous Slide"
  3. используя специальный class="visually-hidden", используя метод clip, чтобы скрыть текст (уже используется в меню, но он также не читает его)
  4. различные другие подобные варианты, но безрезультатно.

Что я могу сделать, чтобы NVDA читала метку / текст при наведении? JavaScript в порядке, но не jQuery, пожалуйста. Спасибо.


javascript html css accessibility nvda
person Gillian    schedule 25.03.2021    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я думаю, вам нужно использовать aria-describeby = previous или next, чтобы NVDA могла это прочитать. Дополнительная информация здесь: https://www.powermapper.com/tests/screen-readers/labelling/a-aria-describedby/

Если это не сработает, мне очень жаль. Дайте мне знать, и я могу удалить

person robariissa01    schedule 25.03.2021
comment
aria-describedby принимает идентификатор элемент, который содержит описание элемента, а не само описание. Вы можете увидеть это в связанной статье, где атрибут указывает на span со связанным идентификатором. - person Heretic Monkey; 25.03.2021
comment
Вы правы ... aria-label - правильный атрибут для этого ... хм ... может быть, это браузер, который вы используете. Надеюсь, эта ссылка поможет вам найти решение вашей проблемы github.com/nvaccess/nvda/issues / 7807 - person robariissa01; 25.03.2021
comment
Спасибо. aria-label не работает с NVDA, но я нашел решение, которое опубликую здесь. - person Gillian; 26.03.2021

arrow_upward
0
arrow_downward

Следующий код работает. Я не включил JavaScript, поскольку он не имеет отношения к этой публикации.

.gallery /*code for this demo only */ {
 width: 100%;
 margin: 1rem 0;
 border: 1px solid red;
 height: 50px;
}
.prev,
.next {
  background-color: rgba(0,0,0,0.2);
  cursor: pointer;
  position: absolute;
  top: 30px;
  width: 10px;
  padding: 15px;
  margin-top: 22px;
  color: var(--dark-green);
  font-weight: bold;
  font-size: 1.25rem;
  transition: 0.6s ease;
  border: none;
  user-select: none;
  left: 1rem;
}
.next {
  left: unset;
  right: 1rem;
  border-radius: 3px 0 0 3px;
}
.visually-hidden {
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    white-space: nowrap;
}
<div class="direction prev" tabindex="0" onclick="plusSlides(-1)" role="button">❮<span class="visually-hidden">Previous slide</span></div>
<div class="direction next" tabindex="0" onclick="plusSlides(1)" role="button">❯<span class="visually-hidden">Next slide</span></div>

person Gillian    schedule 26.03.2021