Accessibility Layer Popup(접근성 레이어 팝업 코드)

Accessibility Layer Popup

이 포스팅에서는 접근성 레이어 팝업에 대한 소스를 알려드립니다.

해당 레이어 팝업은 레이어를 열고 닫을 때에 포커스 이동과 열었을 경우 해당 레이어에서 닫기를 하지 않으면 레이어 밖으로 포커스가 이동하지 않도록 하여 웹 접근성을 최대한 준수하고 있습니다.

그리고 dimmed 처리를 하고 있지 않기 때문에 사용자가 추가하여 사용하시기 바랍니다.

HTML

html

<div class="tooltip-wrap">

  <a href="#none" data-tooltip="chart01">레이어 보기</a>

  <!-- (S) : 레이어 콘텐츠 -->
  <div class="chart-pop chart01" tabindex="0" data-tooltip-con="chart01" data-focus="chart01" data-focus-prev="chart01-close">
    <h1>레이어 타이틀</h1>
    <div class="layer-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, inventore.</p>
      <p>Lorem ipsum dolor sit amet, Dicta, inventore.</p>
      <p>Lorem ipsumpisicing elit. Dicta, inventore.</p>
      <p>Lorem ipsum dolor sit amet, consect elit. Dicta, inventore.</p>
    </div>
    <a href="#" class="chart-close01 tooltip-close" data-focus="chart01-close" data-focus-next="chart01">닫기</a>
  </div>
  <!-- (E) : 레이어 콘텐츠 -->
</div>

CSS

css

* {
  margin: 0;
  padding: 0;
}

body {
  width: 700px;
  margin: 40px auto;
}

.tooltip-wrap {
  position: relative;
}

.chart-pop {
  display: none;
  position: absolute;
  top: 75px;
  left: 50%;
  margin-left: -200px;
  width: 400px;
  padding: 15px 10px;
  border: 1px solid #d71a21;
  border-radius: 5px;
  background-color: #fff;
}

.chart-pop .chart-close01 {
  position: absolute;
  right: 10px;
  top: 10px;
}

javaScript

javascript

// 접근성 관련 포커스 강제 이동
function accessibilityFocus() {
  
  $(document).on('keydown', '[data-focus-prev], [data-focus-next]', function(e){
    var next = $(e.target).attr('data-focus-next'),
        prev = $(e.target).attr('data-focus-prev'),
        target = next || prev || false;
    
    if(!target || e.keyCode != 9) {
      return;
    }
    
    if( (!e.shiftKey && !!next) || (e.shiftKey && !!prev) ) {
      setTimeout(function(){
        $('[data-focus="' + target + '"]').focus();
      }, 1);
    }
    
  });
  
}

function tooltip() {
  var openBtn = '[data-tooltip]',
      closeBtn = '.tooltip-close';
  
  function getTarget(t) {
    return $(t).attr('data-tooltip');
  }
  
  function open(t) {
    var showTarget = $('[data-tooltip-con="' + t + '"]');
    showTarget.show().focus();
    showTarget.find('.tooltip-close').data('activeTarget', t);
  }
  
  function close(t) {
    var activeTarget = $('[data-tooltip-con="' + t + '"]');
    activeTarget.hide();
    $('[data-tooltip="' + t + '"]').focus();
  }
  
  $(document)
    .on('click', openBtn, function(e){
      e.preventDefault();
      open(getTarget(e.target));
    })
    .on('click', closeBtn, function(e) {
      e.preventDefault();
      close($(this).data('activeTarget'));
    })
  
}

$(document).ready(function(){
  
  tooltip();
  accessibilityFocus();
  
});

Result View

Related links

1. 심플 애니 레이어팝업
2. 일반 팝업
3. Layer Pop-up (레이어 팝업)
4. Layer Pop-up(레이어 팝업) - 플러그인 타입 코드
5. Accessibility Layer Popup(접근성 레이어 팝업 코드)
6. Pure CSS : Layer-popup Auto center box

Jaehee's WebClub