글

라벨이 접근성인 게시물 표시

[jQuery] 접근성 레이어 팝업 - Shift

옛날에 접근성 레이어 팝업에 관한 고민을 한적이 있는데 그 이후로 많은 시간이 흘렀다. 그때 해당 코드는 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...
댓글 1개
자세한 내용 보기

[CSS] 스킵네비게이션

1. 스킵네비게이션은 <body>다음으로 나오는 것이 가장 적절합니다. 2. 본문으로 가는 기능만 제공하고 다른 건너띄기 컨텐츠에 대한 건너띄기는 제공하지 않도록 합니다. 3. 아래 코드는 일반적으로 사용하는 스킵네비를 약간 수정한 것입니다.(개취) 4. 크롬을 위한 tabindex를 추가 하였습니다. <style type="text/css"> /* Skip Nav */ #skipNav{position:relative;z-index:9999;} #skipNav a{display:block; height:1px; width:1px; margin-bottom:-1px; overflow:hidden; font-size:20px; color:#fff; font-weight:bold; background:#2466a6; white-space:nowrap;text-align:center;} #skipNav a:focus, #skipNav a:active{height:auto; width:100%; padding:5px; margin-bottom:10px; position:absolute; left:0; top:0;} </style> </head> <body> <div id="skipNav"><a href="#contents">Skip to the menu / 본문가기</a></div> <ul> <li><a href="#">매뉴1</a></li> <li><a href="#">매뉴2</a></li> <li><a href="#">매뉴3</a></li> </ul> <div id=...
댓글 쓰기
자세한 내용 보기