Here I am, your beloved popup!

Here I am, your
beloved popup!

Story

Let's help
the popup!

Dialog

Modal Dialog

Modal Window Structure

<dialog>
tag

HTML

Modal Window - HTML

  <div class="modal">
    <div class="modal__header">
      <h2>Modal Window Heading</h2>
    </div>
    <div class="modal__content">
      <!-- content -->
    </div>
    <div class="modal__footer">
      <!-- buttons/actions -->
    </div>
    <button>X</button>
  </div>
      

Let's add
a little bit of A11Y

Close Button (now)

  
    <button>X</button>
  

Hide an icon from a Screen Reader

  
    <button>
      <span aria-hidden="true">X</span>
    </button>
  

Add a label to the button

  
    <button>
      <span aria-hidden="true">X</span>
      <span class="visually-hidden">Close modal</span>
    </button>
  

Modal Window - Role

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

Modal Window - Role

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

Header and Footer

    <div class="modal__header">
      <h2>Modal Window Heading</h2>
    </div>
        ...
    <div class="modal__footer">
      <!-- buttons/actions -->
    </div>
      

Don't do this!

  
  <div class="modal">
    <header class="modal__header">
      <h2>Modal Window Heading</h2>
    </header>
    ...
    <footer class="modal__footer">
      <!-- buttons/actions -->
    </footer>
  </div>
  

axe validation errors

Don't do this too!

  
  <section class="modal" role="dialog">
    <header class="modal__header">
      <h2>Modal Window Heading</h2>
    </header>
    ...
    <footer class="modal__footer">
      <!-- buttons/actions -->
    </footer>
  </section>
  

axe validation errors

Valid Case

  
  <div class="modal">
    <section>
      <header class="modal__header">
        <h2>Modal Window Heading</h2>
      </header>
      ...
      <footer class="modal__footer">
        <!-- buttons/actions -->
      </footer>
    </section>
  </div>
  

Modal Window - Heading

  
  <div class="modal" role="dialog">
    <div class="modal__header">
      <h2>Modal Window Heading</h2>
    </div>
    ...
  </div>
  

Modal Window - Heading

  
  <div class="modal" role="dialog">
    <div class="modal__header">
      <h2 id="subscribeModal">Modal Window Heading</h2>
    </div>
    ...
  </div>
  

Modal Window - Heading

  
  <div class="modal" role="dialog" aria-labelledby="subscribeModal">
    <div class="modal__header">
      <h2 id="subscribeModal">Modal Window Heading</h2>
    </div>
    ...
  </div>
  

Modal Window - Type

  
  <div
    class="modal"
    role="dialog"
    aria-labelledby="subscribeModal"
  >
    <div class="modal__header">
      <h2 id="subscribeModal">Modal Window Heading</h2>
    </div>
    ...
  </div>
  

Modal Window - Type

  
  <div
    class="modal"
    role="dialog"
    aria-labelledby="subscribeModal"
    aria-modal="true"
  >
    <div class="modal__header">
      <h2 id="subscribeModal">Modal Window Heading</h2>
    </div>
    ...
  </div>
  

The HTML and A11Y check-list

1. Follow the right structure
2. Give the role="dialog" for the modal
3. Give the id="ID" for the heading
4. Connect the heading to the modal: aria-labelledby="ID"
5. Set the type for the window aria-modal="true"

Behavior

Set focus to the Close button

Close the Modal Window

Set focus to the opening element

How to hide the modal?

  
    .hidden {
      display: none;
    }
  

The Behaviour check-list

1. Set focus inside the Modal Window
2. Make the Focus Trap
3. Close the modal:
   1. by Esc
   2. by the Close Button click
   3. by the overlay click (think about it)
4. Hide the modal: display: none;
5. ... and

#StayHome

Conclusions

Let's see what's changed

NOTHING

NOTHING

NOTHING

Useful links

1. W3C WAI-ARIA practices - Modal Dialog Example
2. Dialog HTML specification
3. How to test the #a11y (Twitter)

Thank you!