끄적대기

마우스만으로 동작하는 기본 스크립트들을 만들어 놓다가 늘어나는 접근성 프로젝트 들에 의해서 포커스를 이젠 포함하게 되었다. 유지 보수 할때는 그냥 click 로 되어 있는 js들을 그대로 긁어다가 해당 하는 부분들만 focus로 바꾸면서 작업했는데 이것도 하나씩 정리를 해야겠는데...ㅠ; 접근성 쪽으로 더 나아간다면 서브 컨텐츠들이 너무 많다면 텝 으로 건너갈 시에 서브를 다 지나갈건지 주 매뉴만 갈건지 등, 논의 요소들이 있으니 주의가 필요함. <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript"> $(function(){ lnb();//lnb 호출 }); //lnb function lnb(){ var $subBox = $(".lnb .sub_box"), $lnbSub = $(".lnb .tit_lnb a");   $subBox.hide();  $lnbSub.each(function(index){ $(this) .bind ("click focus", function(){ $subBox.hide();  $subBox.eq(index).show();  $lnbSub.find("img").each(function(){ $(this).attr("src",$(this).attr("src").replace("_on","_off")); }); $(this).find("img").attr("src", $(this).find("img").attr("src").replace("_off"...

이 방법은 접근성에 맞지 않다는 말이 많다. 그러니 가급적으로는 프로젝트에 사용하지 않는 것이 좋으나 롤오버에 대한 이해나 접근성에 초점을 맞히지 않은 사이트나 급할때 사용하길 바란다. 우리나라의 모든 사이트가 다 양질의 사이트가 되기를 원하나 실정은...너무나 힘들기만 하니...ㅠ_ㅠ); 스크립트를 잘 이용하거나 텍스트기반에 맞는 롤오버효과를 사용하는것이 접근성에 더 효과적이라고 생각된다. <style type="text/css"> a.rollover img {display:inline; } a.rollover img.over { display:none; } //hover시에 보여줄 이미지를 처음에 감춰 둡니다. a.rollover:hover img { display:none; } //hover시에 해당 경로의 모든 이미지를 감춥니다. a.rollover:hover img.over { display:inline; } //hover로 보여줄 이미지는 보여줍니다. </style> <a href="test" class="rollover"> <img src="경로" alt="" /> <img src="" alt="" class="over" /> // 이부분이 이미지가 두번이 중복됨으로 접근성이 떨어집니다.ㅠㅠ </a>