끄적대기

옛날에 접근성 레이어 팝업에 관한 고민을 한적이 있는데 그 이후로 많은 시간이 흘렀다. 그때 해당 코드는 shift에 관한 고민이 없었던 부분들이 있어서 조금 정리한 내용을 남겨 보려 한다. 써놓고 또 많이 안쓸수도 있지만... 언젠가 다시 또 개선할 날이 오겠지.... HTML : <a class="layerOpen" data-layer-open="layer1" href="javascript:layerOpen('layer1');">열기1</a> <a class="layerOpen" data-layer-open="layer2" href="javascript:layerOpen('layer2');">열기2</a> <div class="layerWrap" id="layer1"> <h2>1</h2> 123123123<br /> <a class="" href="https://www.blogger.com/blogger.g?blogID=1953128756353565733#">123123</a><br /> 123123123<br /> 123123123<br /> <a class="" href="https://www.blogger.com/blogger.g?blogID=1953128756353565733#">123123</a><br /> 123123123<br /> 123123123<br /> 123123123<br /> <a class="btn-layer-close...

접근성 관련해서 레이어를 여러 방법을 생각해보다. 닫기 버튼 위치에 관한 고민으로 예전에 작업을 해두었던 코드입니다. 그때 그때 상황마다 커스텀해서 사용하고 있긴한데...언제 개선시키지__)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> ...