CODEWITHSUNDEEP
ioshtmltwitter-bootstrapaccessibilityuiaccessibility
Deepak
Deepak

Reputation: 305

Accessibility: Talkback will read contents of dialog automatically. But NVDA and VoiceOver will not read

I have implemented Bootstrap(3.3.7) modal for the popup. Talkback will read contents of the modal automatically when it loaded starting from close icon.

But, in VoiceOver it will not. In VoiceOver when modal is opened the focus will move to first interactive elements like button(close button).

<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>

If anyone can come up with the solution. It would be a great help. @slugolicious I have got solution from you couple of times.

Please, help me out.

Thanks in advance :)

Upvotes: 0

Views: 2973

Answers (1)

slugolicious
slugolicious

Reputation: 17543

Not sure if this affects anything, but I don't normally put a tabindex="0" on the dialog itself. I use tabindex="-1" so that I can send the focus there programmatically but the user cannot tab to the dialog border itself.

Also, VoiceOver sometimes has trouble with dialogs that are display:none > display:block rather than visibility:hidden > visibility:visible. That is, if you hide your dialog initially with display:none, and then unhide it by setting display:block, sometimes VoiceOver won't move the focus to the first element in the dialog. See the "Additional Gotchas to watch out for" in Scott O'Hara's blog. If you initially hide with visibility:hidden and then unhide by setting visibility:visible, it works better. But that's only an issue on VoiceOver and only has to do with moving the VoiceOver focus.

However, I think the main problem is that your dialog doesn't have a label or description. You have a heading in the dialog but the dialog itself should point to that heading. Just add an ID to the <h2> and then refer to that ID in the aria-labelledby attribute of the dialog.

If you have other text in your dialog that describes the dialog's purpose, you could put an ID on that description and then refer to it by adding an aria-describedby to the dialog too. Very similar to the aria-labelledby. In the example below, I'll use the "lorem ipsum" paragraph as the description.

Something like:

<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>
      ...

Upvotes: 2

Related Questions