혹시 레이어 팝업창 웹접근성 해결하신분 계세요?
금번에 관리중인 홈페이지에 레이어 팝업창이 두개 뜨도록 해뒀는데...
웹접근성 위반이라고 지적되었네요.
이유는 키보드 제어가 안된다는 것이었습니다.
즉, 포커스가 레이어 팝업창으로 가야하고 닫을때 키보드로 제어할 수 있어야한다네요.
검색을 해봐도 적당한 소스도 해결책도 안보이네요.
그래서 웹페이지 상단에 레이어 팝업창이 뜨도록 설정했습니다.
그런데 영 보기가 안좋네요.ㅎ
즐거운 하루되세요.
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기
댓글 24개
보통 팝업존이라고 페이지내에 넣는 방법을 하셔야 ...
그런데 담당자는 꼭 원하니 문제입니다..ㅠ
팝업존 하나 구성해서 디자인 변경하고, 추가 작업비용 받으심이...
내년에 홈페이지 새로 만들자고 권유했습니다.
2009년도 산이라~ㅎㅎ
아 팝업만 모아놓는 페이지가 따로 있군요.
공공기관은 모두 이런식으로 팝업을 처리합니다.
[http://sir.kr/data/editor/1712/e027ce82d47a12dc6932108ebbebaffb_1513315663_205.jpg]
일반 윈도우팝업은 제어할 수 있는 권고 방법을 올려두셨더라구요.
일반적으로 태그 내에 속성들중에서 href 와 onclick 이 혼재 되어있을 경우, onclick 이 먼저 적용된 후 href가 적용됩니다. 그래서 실제 새창에 쓰일 팝업의 url은 href 에 적어두고, onclick 에서 this.href 로 호출하고 return false;를 거는 방법으로 제시하시더라구요.
스크립트를 사용할 수 없는 브라우저, 또는 시각장애인용 장치들에서는 스크립트 해석을 무시하기 때문에
팝업이 존재할 경우 url 자체를 페이지내에서 이동을 시키기 때문입니다.
만약 레이어팝업일 경우라면, 음성안내나 시각자료를 통해 팝업을 종료할 수 있는 단축키등을 미리 설정해서 안내하는 것도 좋은 방법이라고 봅니다.
제가 다시 나라디자인에서 찾아보니
a 태그에 관한 의미론 적인 접근방법에서 팝업제어등을 설명하셨더라구요.
그리고 레이어팝업일경우도 올라와있었습니다.
도움이 될까 하여 추가 댓글답니다 : )
"a 태그의 사용성과 접근성."
- http://naradesign.net/wp/2007/07/11/123/
"레이어 열기/닫기 키보드 접근성. - NARADESIGN"
- http://naradesign.net/wp/2013/04/24/1996/
답변 고맙습니다. 많은 도움이 되었습니다.
혹시나 싶어서 나라오름님 코드펜에 들어가봤는데, 해당 자료가 지워져있었어요. (찾을 수는 있을것 같은데 ㅋㅋ) 혹시 찾아지면 공유드릴게요 : )
통상적인 레이어 팝업이라는 링크에 쓰였던 소스는 아래와 같습니다.
HTML
----------
<p><a href="#target">Anchor 1</a></p>
<p><a href="#target">Anchor 2</a></p>
<p><a href="#target">Anchor 3</a></p>
<p>…</p>
<div id="target" hidden>
Layer Target <button type="button" class="x">Close</button>
</div>
<p><a href="#">#</a></p>
<p><a href="#">#</a></p>
<p><a href="#">#</a></p>
css
-----------
[hidden]{display:none}
js
--------------
jQuery(function($){
$('a[href^="#"]').click(function(){
$($(this).attr('href')).attr('tabindex','0').show().focus();
});
$('.x').click(function(){
$(this).parent().hide();
});
});
요놈은 클릭해서 레이어 팝업을 띄우는 소슨데요.
문제는 홈페이지 메인에 자동으로 뜨는 레이어 팝업창이라서요..ㅎ
onload 이벤트를 사용하면 되려나요?
일단 닫기 버튼 소스는 <a href="#" onclick=javascript:div_close();return false;">닫기</a>로 수정해 두었습니다. 즐거운 하루되세요.
그게 아니였네요. 둘다 동일한 소스코드였어요.. 이게 최종소스인지는 코드펜에 다시 올려보거나,
그렇게 해봐야겠네요. 도움을 못드려 죄송합니다.
<!-- 원래 소스 -->
<div id="pop1" class="pop1">
<img src="../images/popup20170626.jpg" alt="~~~" />
<p>a href="#" onClick="showHideLayers('pop1','','hide');">닫기</a></p>
</div>
<!-- 수정 소스 -->
<div id="pop1" class="pop1">
<img src="../images/popup20170626.jpg" alt="~~~" />
<p>a href="#" onClick="showHideLayers('pop1','','hide');return false;">닫기</a></p>
</div>
https://jsfiddle.net/minsupkr/e9sq9L9w/
그누보드 팝업레이어 관련된 코드 참조해보시는 것도 좋을 것 같습니다.
또한 키보드로 제어가 가능해야한다. 이런 단서가...ㅠㅠ
조언 감사합니다.