Image link

Alert!

Cancel

OK

ToolTip

Wikimedia Commons

Wikimedia Commons

WAI-ARIA

Github Pages: Rhiana

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

  ...

</div>

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

  ...

</div>

role="dialog"

Flickr Image

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

Deviantart image

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

Thanks

@rhianaheath

https://slides.com/rhianaheath/pop-up-accessibility/

CreditS

Bootstrap modal

Accessible modal demo

Vision Australia demo

My Github demo