혹시 레이어 팝업창 웹접근성 해결하신분 계세요? 정보
혹시 레이어 팝업창 웹접근성 해결하신분 계세요?
본문
금번에 관리중인 홈페이지에 레이어 팝업창이 두개 뜨도록 해뒀는데...
웹접근성 위반이라고 지적되었네요.
이유는 키보드 제어가 안된다는 것이었습니다.
즉, 포커스가 레이어 팝업창으로 가야하고 닫을때 키보드로 제어할 수 있어야한다네요.
검색을 해봐도 적당한 소스도 해결책도 안보이네요.
그래서 웹페이지 상단에 레이어 팝업창이 뜨도록 설정했습니다.
그런데 영 보기가 안좋네요.ㅎ
즐거운 하루되세요.
추천
0
0
댓글 24개
웹접근성을 고려한다면 레이어팝업이나 새창팝업은 사용하면 안됩니다.
보통 팝업존이라고 페이지내에 넣는 방법을 하셔야 ...
보통 팝업존이라고 페이지내에 넣는 방법을 하셔야 ...
@해피정 네..맞습니다.
그런데 담당자는 꼭 원하니 문제입니다..ㅠ
그런데 담당자는 꼭 원하니 문제입니다..ㅠ
@컴대장 웹접근성을 위해서 절대 안된다고 하심이...
팝업존 하나 구성해서 디자인 변경하고, 추가 작업비용 받으심이...
팝업존 하나 구성해서 디자인 변경하고, 추가 작업비용 받으심이...
@지운아빠 ㅋㅋㅋ 아시면서...
음 예전에 팝업 사용에 대한 웹접근성 관련 글을 나라오름님 블로그에서 봤었는데,
일반 윈도우팝업은 제어할 수 있는 권고 방법을 올려두셨더라구요.
일반적으로 태그 내에 속성들중에서 href 와 onclick 이 혼재 되어있을 경우, onclick 이 먼저 적용된 후 href가 적용됩니다. 그래서 실제 새창에 쓰일 팝업의 url은 href 에 적어두고, onclick 에서 this.href 로 호출하고 return false;를 거는 방법으로 제시하시더라구요.
스크립트를 사용할 수 없는 브라우저, 또는 시각장애인용 장치들에서는 스크립트 해석을 무시하기 때문에
팝업이 존재할 경우 url 자체를 페이지내에서 이동을 시키기 때문입니다.
만약 레이어팝업일 경우라면, 음성안내나 시각자료를 통해 팝업을 종료할 수 있는 단축키등을 미리 설정해서 안내하는 것도 좋은 방법이라고 봅니다.
일반 윈도우팝업은 제어할 수 있는 권고 방법을 올려두셨더라구요.
일반적으로 태그 내에 속성들중에서 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/
제가 다시 나라디자인에서 찾아보니
a 태그에 관한 의미론 적인 접근방법에서 팝업제어등을 설명하셨더라구요.
그리고 레이어팝업일경우도 올라와있었습니다.
도움이 될까 하여 추가 댓글답니다 : )
"a 태그의 사용성과 접근성."
- http://naradesign.net/wp/2007/07/11/123/
"레이어 열기/닫기 키보드 접근성. - NARADESIGN"
- http://naradesign.net/wp/2013/04/24/1996/
@엔피씨✨ 저도 해당 URL 내용을 읽어보고 링크를 클릭하니 페이지를 찾을 수 없다고 떠서요.ㅎ
답변 고맙습니다. 많은 도움이 되었습니다.
답변 고맙습니다. 많은 도움이 되었습니다.
@컴대장
혹시나 싶어서 나라오름님 코드펜에 들어가봤는데, 해당 자료가 지워져있었어요. (찾을 수는 있을것 같은데 ㅋㅋ) 혹시 찾아지면 공유드릴게요 : )
혹시나 싶어서 나라오름님 코드펜에 들어가봤는데, 해당 자료가 지워져있었어요. (찾을 수는 있을것 같은데 ㅋㅋ) 혹시 찾아지면 공유드릴게요 : )
아카이브.ORG를 찾으니까 역시 나오네요.
통상적인 레이어 팝업이라는 링크에 쓰였던 소스는 아래와 같습니다.
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();
});
});
통상적인 레이어 팝업이라는 링크에 쓰였던 소스는 아래와 같습니다.
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>로 수정해 두었습니다. 즐거운 하루되세요.
요놈은 클릭해서 레이어 팝업을 띄우는 소슨데요.
문제는 홈페이지 메인에 자동으로 뜨는 레이어 팝업창이라서요..ㅎ
onload 이벤트를 사용하면 되려나요?
일단 닫기 버튼 소스는 <a href="#" onclick=javascript:div_close();return false;">닫기</a>로 수정해 두었습니다. 즐거운 하루되세요.
"앵커 클릭하면 레이어로 촛점 옮기기" 링크랑 두개 다 찾은줄 알았는데...
그게 아니였네요. 둘다 동일한 소스코드였어요.. 이게 최종소스인지는 코드펜에 다시 올려보거나,
그렇게 해봐야겠네요. 도움을 못드려 죄송합니다.
그게 아니였네요. 둘다 동일한 소스코드였어요.. 이게 최종소스인지는 코드펜에 다시 올려보거나,
그렇게 해봐야겠네요. 도움을 못드려 죄송합니다.
@엔피씨✨ 별말씀을요. 많은 도움되었습니다. 고맙습니다.
혹시 지적 받으신 URL 좀 볼 수 있나요? 호기심에...
@지운아빠 지금은 제거해 버렸습니다. 일단 통과해야하니까요.ㅎ
<!-- 원래 소스 -->
<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>
<!-- 원래 소스 -->
<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/
그누보드 팝업레이어 관련된 코드 참조해보시는 것도 좋을 것 같습니다.
https://jsfiddle.net/minsupkr/e9sq9L9w/
그누보드 팝업레이어 관련된 코드 참조해보시는 것도 좋을 것 같습니다.
@컴대장 팝업레이어에 포커스라면 컨테이너 이를테면 <div class="pop"> 자체에 포커스가 가야 한단 말인가요?
@지운아빠 아마도 그런의미인듯 합니다. 닫기 버튼에 가도 되겠죠?
@컴대장 대략 방법론은 떠오르는데 손 놓은지가 오래 되어서 잘 정리가 되질 않네요. 확실한 지도 모르겠구요. 정리할 기회가 오면 나중에라도 한번 공유해드려볼께요. (별 도움은 안 되시겠지만...ㅠㅠ)
@지운아빠 엄청 도움될것 같은데요. 고수님의 한수를 기대하고 있겠습니다.^^
@컴대장 가장 좋은 건 작업 중인 사이트를 한번 보는 게 가장 좋긴 한 것 같습니다. 좋은 주말 보내세요. ^^
