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

Я реализовал модальное окно 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 Я получал от вас решение несколько раз.

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

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


ios html twitter-bootstrap accessibility uiaccessibility
person Deepak    schedule 17.10.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

Кроме того, у VoiceOver иногда возникают проблемы с диалоговыми окнами, которые выглядят display:none> display:block, а не visibility:hidden> visibility:visible. То есть, если сначала скрыть диалоговое окно с помощью display:none, а затем отобразить его с помощью параметра display:block, иногда VoiceOver не перемещает фокус на первый элемент диалогового окна. См. «Дополнительные советы для просмотра за "в блоге Скотта О'Хара. Если вы сначала скроете с помощью 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>
      ...
person slugolicious    schedule 17.10.2018
comment
Мне нужно небольшое уточнение. Обычно когда открываю диалог. Как программа чтения с экрана должна ее читать независимо от различных программ чтения с экрана? Должен ли он читать контент автоматически или свайпом? - person Deepak; 18.10.2018
comment
Тебе не нужно ничего делать. Если фокус находится на чем-то в диалоговом окне, следует прочитать заголовок диалогового окна (aria-label), а затем будет прочитано все, что содержит фокус. При открытии весь диалог необязательно читать. Пользователь может сделать это, исследуя диалог. - person slugolicious; 19.10.2018
comment
Я попробовал приведенный выше код для полной читаемости диалогов. Он работал на NVDA, но не работал на VoiceOver. Есть ли другие возможные способы его достижения. - person Deepak; 23.10.2018