Как исправить неработающую ссылку ARIA? - PullRequest
Новая
       18

Как исправить неработающую ссылку ARIA?

0 голосов
/ 07 января 2020

У меня есть веб-страница с испорченной ссылкой ARIA при выполнении теста. В частности, aria-labelledby="myModalLabel" показывает ошибку. Я понимаю, что где-то должен быть id, который ссылается на myModalLabel, но я не уверен, где, если это так. Любая помощь приветствуется! 

<div class="modal fade" id="siteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <button type="button" class="close modal-close-button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <div class="modal-content">
            <div class="modal-body">

                [pirate_forms]
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>

1 Ответ

1 голос
/ 08 января 2020

У вас должен быть элемент с идентификатором, установленным в myModalLabel, который содержит метку для модальности:

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

<span id="night-mode-label">Night mode</span>
<span role="switch" aria-checked="false" tabindex="0" aria-labelledby="night-mode-label"></span>

Источник: https://www.w3.org/TR/wai-aria-practices/#naming_with_aria -labelledby

Итак в вашем случае это может быть: 

<div class="modal fade" id="siteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <button type="button" class="close modal-close-button" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <div class="modal-content">
                              <!-- ⬇⬇⬇⬇⬇⬇⬇⬇ -->
      <div class="modal-header" id="myModalLabel">Fill in the form</div>
                              <!-- ⬆⬆⬆⬆⬆⬆⬆⬆ -->
      <div class="modal-body">
        [pirate_forms]
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</div>
...