반응형 웹 강좌를 준비하면서, 웹 접근성 측면에서 display:none의 문제점을 지적?한 글을 읽었습니다.
즉, 반응형 웹에서 스크린 폭에 따라서 조건부로 보이거나, 또는 마우스 클릭을 해야 보여야 하는 경우, 많은 경우 display:none을 이용하는데, 웹 접근성에 문제가 있다는 것입니다.
결국, position: absolute; left: -999em; 으로 가리는 것이 웹 접근성을 고려한다면 가장 적절한 방법이라고 합니다.
하지만, 직접 CSS를 적용하는 경우는 가능하지만, jQuery의 많은 화면 관련 기능들은 display:none 을 내부적으로 사용하고 있기에 이를 위한 별도의 조치가 필요하다고 합니다. 아래는 #myButton과 #myText 를 찾아서 적절한 클래스 (이경우 asseccibly-hidden, 즉 위의 position:absolute; left: -999em)로 적용하는 것입니다.
출처: Aaron Gustafson, Now You Can Me, A List Apart, 2011
즉, 반응형 웹에서 스크린 폭에 따라서 조건부로 보이거나, 또는 마우스 클릭을 해야 보여야 하는 경우, 많은 경우 display:none을 이용하는데, 웹 접근성에 문제가 있다는 것입니다.
CSS 규칙 |
화면 표현 |
접근성 |
visibility: hidden; |
적용된 요소가 화면에 나오지는 않지만, 원래 차지하는 공간은 남습니다. |
스크린 리더가 무시합니다. |
display: none; |
적용된 요소가 화면에 나오지 않고, 공간도 없습니다. |
스크린 리더가 무시합니다. |
height: 0; with: 0; overflow: hidden; |
차지하는 공간이 없어지고 적용된 요소도 화면에 나오지 않습니다. |
스크린 리더가 무시합니다. |
text-indent: -999em; |
적용된 요소가 화면에 보이지 않는 좌측으로 사라지지만, 링크에 포커스가 잡힐 수 있는 등 예측하지 못한 결과가 나올 수 있습니다. |
스크린 리더가 접근할 수 있으나, 이 방법은 텍스트와 인라인 요소에만 적용 가능합니다. |
position: absolute; left: -999em; |
적용된 요소가 화면에 보이지 않는 좌측 으로 사라지고, 공간도 차지하지 않습니다. |
스크린 리더가 접근할 수 있습니다. |
결국, position: absolute; left: -999em; 으로 가리는 것이 웹 접근성을 고려한다면 가장 적절한 방법이라고 합니다.
하지만, 직접 CSS를 적용하는 경우는 가능하지만, jQuery의 많은 화면 관련 기능들은 display:none 을 내부적으로 사용하고 있기에 이를 위한 별도의 조치가 필요하다고 합니다. 아래는 #myButton과 #myText 를 찾아서 적절한 클래스 (이경우 asseccibly-hidden, 즉 위의 position:absolute; left: -999em)로 적용하는 것입니다.
(function(){
var $button = $('#myButton'),
$text = $('#myText'),
visible = true;
$button.click(function(){
if ( visible ) {
$text.slideUp('fast',function(){
$text.addClass('accessibly-hidden')
.slideDown(0);
});
} else {
$text.slideUp(0,function(){
$text.removeClass('accessibly-hidden')
.slideDown('fast');
});
}
visible = ! visible;
});
})();출처: Aaron Gustafson, Now You Can Me, A List Apart, 2011
댓글 4개
13년 전
화면에서 안보이게 가려야 한다면.. 마찬가지로 스크린리더로도 읽혀지지 않아야 하지 않나요?
13년 전
디자인측면에서 가려야 하는 경우와, 내용 측면에서 가려야 하는 경우가 다른것 같습니다.
무조건 display:none; 가 적절치 못하다고 표현한 제 의견 부분은 잘못된 것 같네요...
지적 감사합니다. :-)
무조건 display:none; 가 적절치 못하다고 표현한 제 의견 부분은 잘못된 것 같네요...
지적 감사합니다. :-)
WEBsiting
12년 전
좋은정보 감사합니다.
디자인적으로 보이지 말아야할 부분은 display:none; 으로 처리했었는데
이젠 다른방법으로 처리해 두어야겠네요^^
디자인적으로 보이지 말아야할 부분은 display:none; 으로 처리했었는데
이젠 다른방법으로 처리해 두어야겠네요^^
takumi22
12년 전
좋은정보네요
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 6130 |
gender
|
12년 전 | 1097 | |
| 6129 | 12년 전 | 1322 | ||
| 6128 |
 미스티아이드 |
12년 전 | 3463 | |
| 6127 | 12년 전 | 696 | ||
| 6126 |
미스티아이드 |
12년 전 | 2208 | |
| 6125 |
 라이브러리 |
12년 전 | 4887 | |
| 6124 | 12년 전 | 661 | ||
| 6123 | 12년 전 | 3844 | ||
| 6122 | 12년 전 | 1018 | ||
| 6121 | 12년 전 | 3753 | ||
| 6120 | 12년 전 | 909 | ||
| 6119 | 12년 전 | 1770 | ||
| 6118 | 12년 전 | 931 | ||
| 6117 | 12년 전 | 2150 | ||
| 6116 | 12년 전 | 7943 | ||
| 6115 | 12년 전 | 1920 | ||
| 6114 |
 Faceissue |
12년 전 | 1708 | |
| 6113 | 12년 전 | 1526 | ||
| 6112 | 12년 전 | 595 | ||
| 6111 | 12년 전 | 2111 | ||
| 6110 | 12년 전 | 1851 | ||
| 6109 | 12년 전 | 642 | ||
| 6108 | 12년 전 | 1200 | ||
| 6107 | 12년 전 | 624 | ||
| 6106 | 12년 전 | 906 | ||
| 6105 | 12년 전 | 1193 | ||
| 6104 | 12년 전 | 3596 | ||
| 6103 | 12년 전 | 2124 | ||
| 6102 | 12년 전 | 2316 | ||
| 6101 | 12년 전 | 3677 | ||
| 6100 | 12년 전 | 3484 | ||
| 6099 | 12년 전 | 3156 | ||
| 6098 | 12년 전 | 4026 | ||
| 6097 | 12년 전 | 1017 | ||
| 6096 | 12년 전 | 5985 | ||
| 6095 | 12년 전 | 1370 | ||
| 6094 | 12년 전 | 1225 | ||
| 6093 | 12년 전 | 3408 | ||
| 6092 | 12년 전 | 3053 | ||
| 6091 | 12년 전 | 5195 | ||
| 6090 | 12년 전 | 2705 | ||
| 6089 | 12년 전 | 3327 | ||
| 6088 | 12년 전 | 1016 | ||
| 6087 | 12년 전 | 848 | ||
| 6086 | 12년 전 | 2019 | ||
| 6085 |
 늘푸른등불 |
12년 전 | 807 | |
| 6084 |
웹디자인되고파
|
12년 전 | 2219 | |
| 6083 | 12년 전 | 1508 | ||
| 6082 | 12년 전 | 1111 | ||
| 6081 | 12년 전 | 2101 | ||
| 6080 |
Stiven
|
12년 전 | 2312 | |
| 6079 |
프로프리랜서
|
12년 전 | 1323 | |
| 6078 |
프로프리랜서
|
12년 전 | 787 | |
| 6077 |
프로프리랜서
|
12년 전 | 1345 | |
| 6076 |
프로프리랜서
|
12년 전 | 832 | |
| 6075 |
프로프리랜서
|
12년 전 | 1224 | |
| 6074 | 12년 전 | 3855 | ||
| 6073 | 12년 전 | 3949 | ||
| 6072 | 12년 전 | 1378 | ||
| 6071 | 12년 전 | 6992 | ||
| 6070 | 12년 전 | 7574 | ||
| 6069 | 12년 전 | 2320 | ||
| 6068 | 12년 전 | 3869 | ||
| 6067 |
smwkd
|
12년 전 | 633 | |
| 6066 | 12년 전 | 3658 | ||
| 6065 | 12년 전 | 3486 | ||
| 6064 | 12년 전 | 2720 | ||
| 6063 | 12년 전 | 2841 | ||
| 6062 | 12년 전 | 2372 | ||
| 6061 | 12년 전 | 2279 | ||
| 6060 | 12년 전 | 5185 | ||
| 6059 | 12년 전 | 2815 | ||
| 6058 | 12년 전 | 3137 | ||
| 6057 | 12년 전 | 2262 | ||
| 6056 | 12년 전 | 6842 | ||
| 6055 | 12년 전 | 2581 | ||
| 6054 | 12년 전 | 3436 | ||
| 6053 | 12년 전 | 2328 | ||
| 6052 | 12년 전 | 4822 | ||
| 6051 | 12년 전 | 3713 | ||
| 6050 | 12년 전 | 2556 | ||
| 6049 | 12년 전 | 2246 | ||
| 6048 |
 Rockg |
12년 전 | 1300 | |
| 6047 | 12년 전 | 3441 | ||
| 6046 | 12년 전 | 4096 | ||
| 6045 | 12년 전 | 3456 | ||
| 6044 | 12년 전 | 5332 | ||
| 6043 | 12년 전 | 1652 | ||
| 6042 | 12년 전 | 1282 | ||
| 6041 | 12년 전 | 5165 | ||
| 6040 | 12년 전 | 940 | ||
| 6039 | 12년 전 | 3413 | ||
| 6038 | 12년 전 | 3414 | ||
| 6037 | 12년 전 | 2994 | ||
| 6036 | 12년 전 | 3342 | ||
| 6035 | 12년 전 | 2867 | ||
| 6034 | 12년 전 | 2846 | ||
| 6033 | 12년 전 | 2868 | ||
| 6032 | 12년 전 | 2854 | ||
| 6031 | 12년 전 | 2881 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기