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 = '浮层已关闭';
    };
  }