Доступность: Talkback автоматически прочитает содержимое диалога.Но NVDA и VoiceOver не будут читать

Question

Я реализовал модал Bootstrap (3.3.7) для всплывающего окна.Talkback автоматически считывает содержимое модального канала при загрузке, начиная с значка закрытия.

Но в VoiceOver этого не происходит.В VoiceOver при открытии модального режима фокус переместится на первые интерактивные элементы, такие как кнопка (кнопка закрытия).

<div class="modal fade in" id="alertID" tabindex="0" role="dialog" aria-hidden="false">
   <div class="modal-dialog" id="leaving-modal-content" role="document">
      <div class="modal-content leaving-site-content">
          <button aria-label="Close Dialog – button" class="close-icon" data-dismiss="modal"><i class="fa fa-times"></i></button>
          <h2 class="headline-text11"><span class="large-modal-text1">Example Title</span>
          </h2>
        <p class="body-copy">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <ul class="list-inline">
            <li><a href="http://www.google.com/" id="link-continue" title="Continue" class="btn btn-red" target="_self">Continue</a></li>
            <li><a href="#" data-dismiss="modal" title="Cancel" class="btn btn-red">Cancel</a></li>
        </ul>
    </div>
  </div>
</div>

Если кто-то может предложить решение.Это было бы очень полезно.@ slugolicious Я пару раз получал от тебя решение.

Пожалуйста, помоги мне.

Заранее спасибо:)

Answer 1

Не уверен, влияет ли это на что-либо, но я обычно не ставлю tabindex="0" на само диалоговое окно.Я использую tabindex="-1", так что я могу отправлять фокус там программно, но пользователь не может перейти на саму границу диалога.

Кроме того, VoiceOver иногда имеет проблемы с диалогами, которые display:none> display:block, а неvisibility:hidden> visibility:visible.То есть, если вы сначала скрываете свой диалог с помощью display:none, а затем показываете его, установив display:block, иногда VoiceOver не будет перемещать фокус на первый элемент в диалоге.Смотрите " Дополнительные Gotchas, чтобы следить за " в блоге Скотта О'Хара.Если вы сначала прячетесь с помощью visibility:hidden, а затем показываете значение visibility:visible, это работает лучше.Но это только проблема VoiceOver, и она связана только с перемещением фокуса VoiceOver.

Тем не менее, я думаю, что главная проблема в том, что в вашем диалоге нет метки или описания.У вас есть заголовок в диалоге, но сам диалог должен указывать на этот заголовок.Просто добавьте идентификатор к <h2> и затем обратитесь к этому идентификатору в атрибуте aria-labelledby диалогового окна.

Если в вашем диалоге есть другой текст, описывающий его назначение, вы можете указать идентификатор в этом описании, а затем обратиться к нему, добавив aria-describedby в диалоговое окно.Очень похоже на aria-labelledby.В приведенном ниже примере в качестве описания я буду использовать абзац «lorem ipsum».

Что-то вроде:

<div class="modal fade in" id="alertID" tabindex="-1" role="dialog" aria-hidden="false" aria-labelledby="newID1" aria-describedby="newID2">
  <div class="modal-dialog" id="leaving-modal-content" role="document">
    <div class="modal-content leaving-site-content">
      <button aria-label="Close Dialog – button" class="close-icon" data-dismiss="modal">
        <i class="fa fa-times"></i>
      </button>
      <h2 id="newID1" class="headline-text11">
        <span class="large-modal-text1">Example Title</span>
      </h2>
      <p id="newID2" class="body-copy">Lorem Ipsum...</p>
      ...