반응형 웹 강좌를 준비하면서, 웹 접근성 측면에서 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
13년 전
좋은정보 감사합니다.
디자인적으로 보이지 말아야할 부분은 display:none; 으로 처리했었는데
이젠 다른방법으로 처리해 두어야겠네요^^
디자인적으로 보이지 말아야할 부분은 display:none; 으로 처리했었는데
이젠 다른방법으로 처리해 두어야겠네요^^
takumi22
12년 전
좋은정보네요
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 8030 | 9년 전 | 428 | ||
| 8029 | 9년 전 | 352 | ||
| 8028 | 9년 전 | 304 | ||
| 8027 | 9년 전 | 319 | ||
| 8026 | 9년 전 | 394 | ||
| 8025 | 9년 전 | 418 | ||
| 8024 | 9년 전 | 407 | ||
| 8023 | 9년 전 | 430 | ||
| 8022 | 9년 전 | 347 | ||
| 8021 | 9년 전 | 374 | ||
| 8020 | 9년 전 | 376 | ||
| 8019 | 9년 전 | 391 | ||
| 8018 | 9년 전 | 488 | ||
| 8017 | 9년 전 | 571 | ||
| 8016 | 9년 전 | 394 | ||
| 8015 | 9년 전 | 431 | ||
| 8014 | 9년 전 | 360 | ||
| 8013 | 9년 전 | 280 | ||
| 8012 | 9년 전 | 281 | ||
| 8011 | 9년 전 | 488 | ||
| 8010 | 9년 전 | 339 | ||
| 8009 | 9년 전 | 356 | ||
| 8008 | 9년 전 | 327 | ||
| 8007 | 9년 전 | 474 | ||
| 8006 | 9년 전 | 510 | ||
| 8005 |
 카카오툴즈 |
9년 전 | 1005 | |
| 8004 | 9년 전 | 394 | ||
| 8003 | 9년 전 | 466 | ||
| 8002 | 9년 전 | 364 | ||
| 8001 |
 Terrorboy |
9년 전 | 704 | |
| 8000 | 9년 전 | 462 | ||
| 7999 | 9년 전 | 414 | ||
| 7998 | 9년 전 | 469 | ||
| 7997 | 9년 전 | 345 | ||
| 7996 | 9년 전 | 571 | ||
| 7995 | 9년 전 | 529 | ||
| 7994 | 9년 전 | 407 | ||
| 7993 | 9년 전 | 480 | ||
| 7992 | 9년 전 | 558 | ||
| 7991 | 9년 전 | 307 | ||
| 7990 | 9년 전 | 334 | ||
| 7989 | 9년 전 | 338 | ||
| 7988 | 9년 전 | 766 | ||
| 7987 | 9년 전 | 469 | ||
| 7986 | 9년 전 | 476 | ||
| 7985 | 9년 전 | 555 | ||
| 7984 | 9년 전 | 469 | ||
| 7983 | 9년 전 | 706 | ||
| 7982 | 9년 전 | 567 | ||
| 7981 | 9년 전 | 523 | ||
| 7980 | 9년 전 | 546 | ||
| 7979 | 9년 전 | 539 | ||
| 7978 | 9년 전 | 501 | ||
| 7977 | 9년 전 | 447 | ||
| 7976 | 9년 전 | 898 | ||
| 7975 | 9년 전 | 413 | ||
| 7974 | 9년 전 | 459 | ||
| 7973 | 9년 전 | 645 | ||
| 7972 | 9년 전 | 430 | ||
| 7971 | 9년 전 | 507 | ||
| 7970 | 9년 전 | 346 | ||
| 7969 | 9년 전 | 590 | ||
| 7968 | 9년 전 | 436 | ||
| 7967 | 9년 전 | 418 | ||
| 7966 | 9년 전 | 426 | ||
| 7965 |
 나는웹디다 |
9년 전 | 1054 | |
| 7964 | 9년 전 | 441 | ||
| 7963 | 9년 전 | 451 | ||
| 7962 | 9년 전 | 449 | ||
| 7961 |
전갈자리남자
|
9년 전 | 545 | |
| 7960 | 9년 전 | 1014 | ||
| 7959 | 9년 전 | 592 | ||
| 7958 | 9년 전 | 442 | ||
| 7957 | 9년 전 | 398 | ||
| 7956 | 9년 전 | 407 | ||
| 7955 | 9년 전 | 504 | ||
| 7954 | 9년 전 | 439 | ||
| 7953 | 9년 전 | 490 | ||
| 7952 | 9년 전 | 411 | ||
| 7951 | 9년 전 | 539 | ||
| 7950 | 9년 전 | 444 | ||
| 7949 | 9년 전 | 435 | ||
| 7948 | 9년 전 | 368 | ||
| 7947 | 9년 전 | 987 | ||
| 7946 | 9년 전 | 502 | ||
| 7945 | 9년 전 | 441 | ||
| 7944 | 9년 전 | 502 | ||
| 7943 | 9년 전 | 436 | ||
| 7942 | 9년 전 | 447 | ||
| 7941 | 9년 전 | 438 | ||
| 7940 | 9년 전 | 944 | ||
| 7939 | 9년 전 | 427 | ||
| 7938 | 9년 전 | 447 | ||
| 7937 | 9년 전 | 336 | ||
| 7936 | 9년 전 | 925 | ||
| 7935 | 9년 전 | 531 | ||
| 7934 | 9년 전 | 513 | ||
| 7933 | 9년 전 | 631 | ||
| 7932 | 9년 전 | 582 | ||
| 7931 | 9년 전 | 634 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기