반응형 웹 강좌를 준비하면서, 웹 접근성 측면에서 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개
12년 전
화면에서 안보이게 가려야 한다면.. 마찬가지로 스크린리더로도 읽혀지지 않아야 하지 않나요?
12년 전
디자인측면에서 가려야 하는 경우와, 내용 측면에서 가려야 하는 경우가 다른것 같습니다.
무조건 display:none; 가 적절치 못하다고 표현한 제 의견 부분은 잘못된 것 같네요...
지적 감사합니다. :-)
무조건 display:none; 가 적절치 못하다고 표현한 제 의견 부분은 잘못된 것 같네요...
지적 감사합니다. :-)
WEBsiting
12년 전
좋은정보 감사합니다.
디자인적으로 보이지 말아야할 부분은 display:none; 으로 처리했었는데
이젠 다른방법으로 처리해 두어야겠네요^^
디자인적으로 보이지 말아야할 부분은 display:none; 으로 처리했었는데
이젠 다른방법으로 처리해 두어야겠네요^^
takumi22
12년 전
좋은정보네요
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 6030 | 12년 전 | 2822 | ||
| 6029 | 12년 전 | 2849 | ||
| 6028 | 12년 전 | 1475 | ||
| 6027 | 12년 전 | 891 | ||
| 6026 |
kiplayer
|
12년 전 | 801 | |
| 6025 | 12년 전 | 587 | ||
| 6024 | 12년 전 | 2809 | ||
| 6023 | 12년 전 | 2948 | ||
| 6022 |
 울랄라커뮤니케이션스 |
12년 전 | 2104 | |
| 6021 |
Holyreign
|
12년 전 | 1335 | |
| 6020 | 12년 전 | 786 | ||
| 6019 | 12년 전 | 2862 | ||
| 6018 | 12년 전 | 3189 | ||
| 6017 | 12년 전 | 1239 | ||
| 6016 |
kiplayer
|
12년 전 | 10567 | |
| 6015 |
itlang
|
12년 전 | 1415 | |
| 6014 | 12년 전 | 425 | ||
| 6013 |
senseme
|
12년 전 | 1362 | |
| 6012 | 12년 전 | 3113 | ||
| 6011 | 12년 전 | 7127 | ||
| 6010 | 12년 전 | 8961 | ||
| 6009 | 12년 전 | 2864 | ||
| 6008 | 12년 전 | 2991 | ||
| 6007 | 12년 전 | 6674 | ||
| 6006 | 12년 전 | 10513 | ||
| 6005 | 12년 전 | 4046 | ||
| 6004 |
 byfun |
12년 전 | 578 | |
| 6003 | 12년 전 | 882 | ||
| 6002 | 12년 전 | 2353 | ||
| 6001 | 12년 전 | 685 | ||
| 6000 |
kiplayer
|
12년 전 | 3738 | |
| 5999 | 12년 전 | 430 | ||
| 5998 |
울랄라커뮤니케이션스 |
12년 전 | 2941 | |
| 5997 |
울랄라커뮤니케이션스 |
12년 전 | 3438 | |
| 5996 | 12년 전 | 2095 | ||
| 5995 |
kiplayer
|
12년 전 | 2168 | |
| 5994 |
울랄라커뮤니케이션스 |
12년 전 | 3265 | |
| 5993 |
windowhan
|
12년 전 | 676 | |
| 5992 | 12년 전 | 2899 | ||
| 5991 | 12년 전 | 5230 | ||
| 5990 | 12년 전 | 1638 | ||
| 5989 |
AMDbest
|
12년 전 | 1348 | |
| 5988 | 12년 전 | 1217 | ||
| 5987 |
kiplayer
|
12년 전 | 1135 | |
| 5986 |
한번잘해보자
|
12년 전 | 925 | |
| 5985 |
kiplayer
|
12년 전 | 3140 | |
| 5984 |
dsv421
|
12년 전 | 805 | |
| 5983 |
dsv421
|
12년 전 | 1508 | |
| 5982 |
dsv421
|
12년 전 | 5836 | |
| 5981 | 12년 전 | 3211 | ||
| 5980 |
MFBob
|
12년 전 | 2614 | |
| 5979 | 12년 전 | 3097 | ||
| 5978 |
AMDbest
|
12년 전 | 1460 | |
| 5977 | 12년 전 | 789 | ||
| 5976 | 12년 전 | 1204 | ||
| 5975 | 12년 전 | 1268 | ||
| 5974 | 12년 전 | 609 | ||
| 5973 |
kiplayer
|
12년 전 | 3541 | |
| 5972 |
kiplayer
|
12년 전 | 3965 | |
| 5971 |
kiplayer
|
12년 전 | 2294 | |
| 5970 |
kiplayer
|
12년 전 | 8289 | |
| 5969 |
kiplayer
|
12년 전 | 946 | |
| 5968 | 12년 전 | 8738 | ||
| 5967 |
 돼지코구뇽 |
12년 전 | 16902 | |
| 5966 | 12년 전 | 1225 | ||
| 5965 | 12년 전 | 704 | ||
| 5964 | 12년 전 | 6245 | ||
| 5963 | 12년 전 | 697 | ||
| 5962 | 12년 전 | 884 | ||
| 5961 | 12년 전 | 634 | ||
| 5960 | 12년 전 | 783 | ||
| 5959 |
 AKASIA |
12년 전 | 1124 | |
| 5958 | 12년 전 | 976 | ||
| 5957 |
웹디자인되고파
|
12년 전 | 1083 | |
| 5956 | 12년 전 | 3656 | ||
| 5955 | 12년 전 | 2134 | ||
| 5954 | 12년 전 | 4386 | ||
| 5953 | 12년 전 | 3074 | ||
| 5952 | 12년 전 | 4261 | ||
| 5951 | 12년 전 | 2070 | ||
| 5950 | 12년 전 | 1274 | ||
| 5949 | 12년 전 | 926 | ||
| 5948 | 12년 전 | 2072 | ||
| 5947 | 12년 전 | 4998 | ||
| 5946 |
dsv421
|
12년 전 | 1271 | |
| 5945 |
dsv421
|
12년 전 | 4115 | |
| 5944 |
dsv421
|
12년 전 | 5640 | |
| 5943 | 12년 전 | 1277 | ||
| 5942 | 12년 전 | 2532 | ||
| 5941 |
프로프리랜서
|
12년 전 | 1639 | |
| 5940 |
atria
|
12년 전 | 606 | |
| 5939 | 12년 전 | 2325 | ||
| 5938 | 12년 전 | 2070 | ||
| 5937 |
프로프리랜서
|
12년 전 | 761 | |
| 5936 |
프로프리랜서
|
12년 전 | 712 | |
| 5935 |
프로프리랜서
|
12년 전 | 3208 | |
| 5934 |
프로프리랜서
|
12년 전 | 1622 | |
| 5933 |
AMDbest
|
12년 전 | 642 | |
| 5932 |
AMDbest
|
12년 전 | 499 | |
| 5931 | 12년 전 | 8139 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기