Добавить aria-метку на кнопку

#javascript #jquery

Вопрос:

Как мне добавить метку aria к кнопке? От:

 <button type="button" class="owl-dot active"><span></span></button>

Для:

 <button role="button" aria-label="slide-dot" class="owl-dot active"><span></span></button>

Я пытался использовать document.getElementById('owl-dot').setAttribute('aria-label', 'slide-dot'); , но это не работает.

1. У вашей кнопки нет идентификатора, owl-dot поэтому getElementById она не находит его. Либо получить по классу, либо присвоить ему идентификатор. Как только у него есть идентификатор, setAttribute работает нормально: jsfiddle.net/fb3pxdoq

Ответ №1:

Ваше решение правильное, пожалуйста, убедитесь, что оно запускается после того, как DOM будет готов.

 document.getElementById('owl-dot').setAttribute('aria-label', 'slide-dot')

На самом деле, вам не нужно добавлять aria-label для текущей кнопки DOM, поскольку вместо этого может быть считано внутреннее содержимое.

aria-label Следует добавлять в button DOM только тогда, когда:

DOMS внутри имеют слишком много уровней, тогда строка count может не быть прочитана.
aria-label отличается от строки содержимого внутри.

Ответ №2:

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

https://www.aditus.io/aria/aria-label/

Ответ №3:

ваш код не работает, потому что owl-dot — это класс. если хотите использовать свой код, добавьте идентификатор owl-dot к своей кнопке, но вы также можете использовать класс для установки значения aria-label.

 $(".owl-dot").attr('aria-label',"slide-dot");

1. попробуйте document.getElementById('slider_1706').getElementsByClassName('owl-dot').setAttribute('aria-label', 'dot') , но не работает

2. @SarahC в вашем сообщении ничего не упоминается о «#slider_1706» — у этого тоже отсутствует идентификатор?

3. если вы хотите использовать slider_1706, используйте этот код $(«#slider_1706»).attr(‘aria-label’, «слайд-точка»);