iframe 사용시 탭 키 초점 이동 안될때

- 프로젝트를 하다보면 iframe사용할때가 종종 있습니다. 

개발쪽에서 url주소부분을 숨기려고 많이들 쓰는데 웹 접근성 지침중에 탭 키로 순차적 이동이 되어야하는 지침이 있습니다.

근데 iframe을 사용하면 이부분이 잘 지켜지지 않을 때도 있어서 그 해결방안을 적어놓으려고 합니다.

1. 웹 접근성을 모르는 개발자분들이 js파일에서 a 요소에다가 'blur()'처리를 하는경우 탭 키가 안먹는 경우가 있습니다. 

js파일내에 'blur()' 메서드를 삭제 하시면 올바르게 작동하더라구요.

2. 1번사항도 아닐 경우에 해당 iframe요소 안에있는 컨텐츠에 접근을 해서 해결하는 방식을 사용해야 합니다.

iframe요소 안에있는 컨텐츠에 접근을하려면 js로 접근을 해야합니다.(로컬에서는 에러가 떠서 확인이 안되니 반드시 웹 서버에 올려놓고 확인해야함.) 

아래 소스를 보면..

html

<iframe src="iframe_seoul.html" width="100%" height="40" frameborder="0" scrolling="no" title="서울시 새소식" id="test"></iframe>

js

jQuery(function($){
    var iframe = $('#test'); //해당 iframe요소를 가져와서 변수에 참조시킵니다.
    var iframeSelectEl = iframe[0].contentWindow.document.body.querySelector('.common-gnb a'); // 위에서 참조시킨 iframe요소를 contentWindow로 접근하고 body안에 있는 요소를 변수에 참조시킵니다.
    iframeSelectEl.onfocus = function(){
        //내용
    };
});

위 처럼 iframe요소에 접근을 해서 이벤트를 사용하여 해결 하면 됩니다.

- 참고 사이트

http://www.w3schools.com/jsref/prop_frame_contentwindow.asp