Pop-Up Accessibility

Alert!

Cancel

OK

ToolTip

JAWS

NVDA

OTHER

WAI-ARIA

<div   class="modal" 
       role="dialog">

  ...

</div>
<div   class="modal" 
       role="dialog" >

  ...

</div>
role="dialog"
<div class="modal" 
     role="dialog">

    <div class="modal-dialog" 
         role="document">

    ...
    
    </div>
</div>
<div class="modal" 
     role="dialog">

    <div class="modal-dialog" 
         role="document"  >

    ...
    
    </div>
</div>
role="document"
<span aria-hidden="false" 
      style="display:none;">

    opens dialog

</span>
<span aria-hidden="false" 
      style="display:none;">

    opens dialog

</span>
aria-hidden="false" 
style="display:none;"
.sr-only {
  clip: rect(0,0,0,0);
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  margin: -1px;
}

Opens Dialog

<div class="modal" 
     aria-labelledby="myModalLabel" ...>
  ...
    <h1 id="myModalLabel">Modal</h1>
    <a  class="modalCloseButton"
        href="javascript:void(0)"
        data-dismiss="modal"
        aria-label="close"
        title="Close information window"
        tabindex="2"
        >
  ...
</div>
<div class="modal" 
     aria-labelledby="myModalLabel" ...>
  ...
    <h1 id="myModalLabel"  >Modal</h1>

    <a  class="modalCloseButton"
        href="javascript:void(0)"
        data-dismiss="modal"
        aria-label="close"
        title="Close information window"
        tabindex="2"
        >
  ...
</div>
aria-labelledby="myModalLabel"
id="myModalLabel"
<div class="modal" 
     aria-labelledby="myModalLabel" ...>
  ...
    <h1 id="myModalLabel" >Modal</h1>
    <a  class="modalCloseButton"
        href="javascript:void(0)"
        data-dismiss="modal"

        aria-label="close"
        title="Close information window"
        tabindex="2"
        >
  ...
</div>
aria-label="close"
function showModal($modelID) {
  $modelID.modal();

  $modelID.on('shown.bs.modal', function (e) {
    $(".start_dialog").focus();
    $('body').attr('aria-hidden', 'true');
  });
}

function hideModal($modelObj, $re) {
  $modelObj.on('hidden.bs.modal', function (e) {
    $('body').attr('aria-hidden', 'false');
  });
  $re.focus();
}
function  showModal ($modelID) {

  $modelID.modal();

  $modelID.on('shown.bs.modal', function (e) {
    $(".start_dialog").focus();
    $('body').attr('aria-hidden', 'true');

  });
}

function hideModal($modelObj, $re) {
  $modelObj.on('hidden.bs.modal', function (e) {
    $('body').attr('aria-hidden', 'false');
  });
  $re.focus();
}
showModal
$('body').attr('aria-hidden', 'true');
function showModal($modelID) {
  $modelID.modal(); 

  $modelID.on('shown.bs.modal', function (e) {
    $(".start_dialog").focus();
    $('body').attr('aria-hidden', 'true');
  });
}

function  hideModal ($modelObj, $re) {

  $modelObj.on('hidden.bs.modal', function (e) {
    $('body').attr('aria-hidden', 'false');
  
  });
  $re.focus();
}
$('body').attr('aria-hidden', 'false');
hideModal

Start of Dialog

End of Dialog

esc to close

<span class="start_dialog sr-only" tabindex="1">
    Start of dialog
</span>
...
<a  class="modalCloseButton"
    href="javascript:void(0)"
    data-dismiss="modal"
    aria-label="close"
    title="Close information window"
    tabindex="2"
>
...
<span class="sr-only" tabindex="3">
     End of dialog
</span>
<span class="start_dialog sr-only" tabindex="1" >
    Start of dialog
</span>
...
<a  class="modalCloseButton"
    href="javascript:void(0)"
    data-dismiss="modal"
    aria-label="close"
    title="Close information window"
    tabindex="2"
>
...
<span class="sr-only" tabindex="3" >
     End of dialog
</span>
tabindex="1"
tabindex="2"
tabindex="3"

Pop-Up Accessibility

By Rhiana Heath

Pop-Up Accessibility

Looking into the complications of making a modal or pop-up accessible for people with disabilities

  • 1,178
Loading comments...

More from Rhiana Heath