Accessibility Modal Practices Demo

by Brenton Strine

HTML

<input type="text">
<button 
  aria-controls="two" 
  aria-owns="true" 
  aria-haspopup="true"
  aria-flowto="two"
  onclick="toggleTwo();">
  TOGGLE DIV #2
</button>
<input type="text"><button>button</button>
<div class="one">
  <h2>hello, i'm div 1</h2><input type="text"><button>button</button><input type="text">  <button>button</button>
</div>
<div class="two" id="two" 
  aria-hidden="true"
  aria-modal="true"
  aria-labelledby="header_id"
  role="dialog"
  >
  <span class="inner">
    <button 
      class="close"
      onclick="toggleTwo(this);">
      CLOSE POPUP
    </button>
    <h2 id="header_id">hello, I'm div 2.</h2>
    <input type="text"><button>button</button><input type="text"><button>button</button>
    <p>
    A paragraph inside the modal.
    </p>
  </span>
</div>
<div class="three">
  <h2>hello i'm div 3.</h2>
  <input type="text"><button>button</button><input type="text"><button>button</button>
</div>
<input type="text"><button>button</button><input type="text"><button>button</button>

<script>
console.clear();
var toggleTwo = function () {
	var oldValue = document.querySelector(".two").getAttribute("aria-hidden");
  var newValue = (oldValue=="true") ? false : true;
	var modal = document.querySelector(".two");
  var firstFocusable = modal.querySelectorAll("a, button")[0];
  
  modal.setAttribute("aria-hidden", newValue);
  firstFocusable.focus();
  
  
  
  
}
</script>

CSS

div {border: solid 1px green; padding: 10px; margin: 10px;}
[aria-hidden="true"] [tabindex="0"] {
  border: dashed 1px red;
}

[aria-hidden="true"] { opacity: .1; }
.close {
  float: right;
}
.two[aria-hidden="false"]{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(55,55,55,.8);
  padding: 50px;
}
[aria-hidden="false"]  .inner {
  background: white;
  border: solid 1px green;
  display: block;
  padding: 10px;
  height: 90%;
}