Pop Up Accessibility.

Modals and pop-ups can be a really useful tool for displaying additional information or getting users to enter information in a way that doesn't clutter up your screen. However as yet (one coming soon) there is no official HTML element that lets us display modals in a consistent way. As a result screen readers, such as JAWS and NVDA, have a hard time reading them resulting in a lot of pop-ups not being accessible to people with disabilities.
Today we will look at how to make a modal accessible for people who use screen readers. This uses a combination of ARIA attributes and hidden text to speak with the screen reader. As well as helping of JavaScript to help with some custom keyboard control. All while keeping a pleasing look and feel for all users using JavaScript and CSS.

Demo of a glossary modal

HTML for modal link

Modal
<a href="#dfn_term" id="start_term" class="info-btn" target="_blank">
  <i class="fa fa-question-circle"></i>
  <span class="sr-only">opens dialog</span>
</a>

HTML for modal

<div id="term" class="modal modal fade" aria-labelledby="myModalLabel" tabindex="-1" aria-hidden="true" aria-describedby="modal-description">
  <div class="modal-dialog">
    <div class="modal-content">
      <span class="start_dialog sr-only" tabindex="1">Start of dialog</span>
      <div class="modal-header">
        <h1 id="myModalLabel">Modal</h1>
        <a  class="modalCloseButton"
            href="javascript:void(0)"
            data-dismiss="modal"
            aria-label="close"
            title="Close information window"
            tabindex="2"
        >
        <i class="fa fa-times" aria-hidden="true"></i>
        <span class="sr-only">Select here or press escape to close dialog</span>
        </a>
      </div>
      <div class="modal-body">
        <div class="glossary_dfn">
          <dl id="dfn_term">
            <dt><dfn>Modal</dfn></dt>
              <dd id="modal-description">
                A modal window is any type of window that is a child (secondary window) to a parent window and usurps the parent's control. It is commonly associated with an Internet Web site pop-up window that stays in front of the original window.  A user may not press any controls or enter any information on the parent window (the original window which opened the modal) until the modal has been closed. A modal window is commonly used when the author wants to retain the user's focus on the information in the modal as it is impossible for the user to interact with the other windows of the same process.
              </dd>
          </dl>
        </div>
      </div>
      <span class="sr-only" tabindex="3">End of dialog</span>
    </div>
  </div>
</div>
      

Javascript to set up modal

<script type="text/javascript">
$(function(){
  modal_set_up("start_term", "term");
});
</script>
      

Authors and Contributors

Rhiana Heath (@rhiana) with code adapted from Bootstrap (@bootstrap), and Greg Kraus (@gdkraus).

Support or Contact

Having trouble with Pages? Check out the documentation at https://help.github.com/pages or contact support@github.com and we’ll help you sort it out.