[jQuery] 접근성 레이어 팝업

접근성 관련해서 레이어를 여러 방법을 생각해보다.

닫기 버튼 위치에 관한 고민으로 예전에 작업을 해두었던 코드입니다.

그때 그때 상황마다 커스텀해서 사용하고 있긴한데...언제 개선시키지__)a;

아래와 같은 내용을 기준으로 작업되었습니다.

1. 사용자가 레이어 제목을 읽고 원치 않을 경우 내용을 다 읽지 않아도 닫을 수 있어야 한다.
- 닫기 버튼 제목뒤에 한번 제공

2. 사용자가 문서를 다 읽은 후에 닫을 수 있어야 한다.
- 컨텐츠 하단에 닫기 제공
- 보통 확인 취소 같은 용도로도 사용

3. 사용자가 다시 레이어 안의 내용을 읽기 위해 텝을 하였을때 레이어 밖으로 나가지 않고 레이어 안에서 돌아야 한다.
- 그리 베스트의 방법이라곤 생각하지 않지만 임시로 하단에 a 태그를 생성해서 다시 처음으로 돌아 올수 있는 여건을 만들어 놓음.

---

:Html
<a href="#" class="openLayer">레이어 열기</a>

<div class="layerWrap">
<div class="layerContainer">
<div class="layerHead">레이어 제목</div>
<a href="#" class="firstClose layerClose">닫기</a>
<div class="layerCon"><a href="#">1</a><br /><a href="#">1</a><br /><a href="#">1</a><br /><a href="#">1</a></div>
<a href="#" class="lastClose layerClose">닫기</a>
</div>
</div>

:CSS
*{margin:0;padding:0;}
a:foucs{border:1px solid red;}
.layerWrap{display:none;position:absolute;top:100px;left:100px;border:2px solid red;width:300px;}
.layerWrap .layerContainer{position:relative;background:#fff;overflow:hidden;}
.layerWrap .firstClose{position:absolute;top:0px;right:0px;}
.layerWrap .lastClose{position:absolute;bottom:-999px;right:0px;}
.layerWrap .lastClose:focus, .lastClose:active{bottom:0px;}

:JS
$(function(){
$(".openLayer").on("click", function(){
$(".layerWrap").attr("tabindex", "0").show().focus();
$(".layerClose").click(function(){
$(".layerWrap").removeAttr("tabindex").hide();
$(".openLayer").focus();
});
$(".lastClose").focus(function(){
$(".layerWrap").append("<a href='javascript:void(0);' class='linkAppend'></a>");
$(".linkAppend").focus( function(){
$(".layerWrap").attr("tabindex", "0").focus();
$(".linkAppend").remove();
});
});
});
});

https://jsfiddle.net/aoiyuki4u/rjLzgo7y/