Использование атрибутов aria-hidden="true" и aria-labelledby в одном поле

Я понимаю функциональность обоих атрибутов aria-hidden="true" и aria-labelledby в том смысле, что первый атрибут скрывает содержимое элемента и его дочерних элементов от устройств чтения с экрана (предположительно включая aria-labelledby и aria-labelled), и что последний атрибут дает элементу доступное имя на основе aria-label другого элемента.

Однако, я столкнулся с противоречием в курсе Django, который я заканчиваю.

https://youtube.com/clip/UgkxN1rhn70sw6fPvRdhpAFZv0KnPBz7J5-y

(Я также приложил фрагмент незавершенного кода ниже.)

Здесь создатель курса включает одновременно атрибуты aria-hidden="true" и aria-labelledby. Насколько я понял, включение aria-labelledby ничего не меняет. Так в чем же смысл его включения?

TLDR: Данные aria-labelledby все еще отображаются в программах чтения экрана, когда aria-hidden="true", или создатель курса допустил ошибку? 

                                <div class="modal" id="#myModal{{student.id}}" tabindex="-1" aria-labelledby="">
                                  <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                      <div class="modal-header">
                                        <h5 class="modal-title">Modal title</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                                          <span aria-hidden="true"></span>
                                        </button>
                                      </div>
                                      <div class="modal-body">
                                        <p>Modal body text goes here.</p>
                                      </div>
                                      <div class="modal-footer">
                                        <button type="button" class="btn btn-primary">Save changes</button>
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                      </div>
                                    </div>
                                  </div>
                                </div>

Ваше понимание и объяснение двух атрибутов хорошее. Можно было бы добавить две маленькие детали:

  1. Вы можете предоставить метку для чего угодно, но это не имеет значения, если элемент не является интерактивным (фокусируемым), не является достопримечательностью или важной частью документа
    2. .
  2. Атрибуты могут быть изменены скриптами, поэтому aria-hidden могут быть удалены позже

Предоставленный вами код не совсем демонстрирует проблему, которую вы объяснили, но он выглядит как Bootstrap Modal.

В документации Bootstrap первая строка выглядит следующим образом:

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

Полагаю, что вы имеете в виду именно это. Это обычная схема для диалогов, когда они изначально скрыты, а затем раскрываются с помощью скрипта. Если вы откроете демонстрацию модального диалога в Bootstrap, вы заметите, что изменяются следующие атрибуты:

- aria-hidden
+ style="display: block; …"
+ role="dialog"
+ aria-modal="true"

Зачем вообще существует aria-hidden?

Решение о том, какие атрибуты ожидать в базовой разметке, а какие добавлять при вызове, зависит от различных факторов.

Здесь, вероятно, это связано с тем, что скрипт может все еще загружаться, когда пользователь перемещается по документу. Применяя display: none в CSS и aria-hidden в HTML, можно быть уверенным, что диалог не будет открыт никому, пока не загрузится скрипт и не будет нажата кнопка диалога.

После того, как диалог открыт, ему необходимо имя, поэтому в игру вступает атрибут aria-labelledby.

Вернуться на верх