visibility:hidden，display:none和无障碍访问

HTML

<p><a href="javascript:" id="button1" role="button">点击显示遮罩层，display隐藏</a></p>
<div id="overlay1" class="overlay none" role="button" title="点击关闭浮层"></div>
<p><a href="javascript:" id="button2" role="button">点击显示遮罩层，visibility隐藏</a></p>
<div id="overlay2" class="overlay hidden" role="button" title="点击关闭浮层"></div
					    

CSS

.overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: rgba(0,0,0,.5);
  z-index: 9;
}
.none {
  display: none;
}
.hidden {
  visibility: hidden;
}
					    

JS

var eleBtn1 = document.getElementById('button1');
var eleBtn2 = document.getElementById('button2');
var eleOverlay1 = document.getElementById('overlay1');
var eleOverlay2 = document.getElementById('overlay2');

if (eleBtn1 && eleBtn2 && eleOverlay1 && eleOverlay2) {
  eleBtn1.onclick = function () {
    eleOverlay1.className = 'overlay';
    eleOverlay1.title = '点击关闭浮层';
  };
  eleBtn2.onclick = function () {
    eleOverlay2.className = 'overlay';
    eleOverlay2.title = '点击关闭浮层';
  };
  eleOverlay1.onclick = function () {
    eleOverlay1.className = 'overlay none';
    eleOverlay1.title = '浮层已关闭';
  };
  eleOverlay2.onclick = function () {
    eleOverlay2.className = 'overlay hidden';
    eleOverlay2.title = '浮层已关闭';
  };
}