반응형 웹 강좌를 준비하면서, 웹 접근성 측면에서 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년 전
좋은정보네요
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 7430 |
 wooriteam |
11년 전 | 4947 | |
| 7429 | 11년 전 | 1780 | ||
| 7428 |
멋진남자임
|
11년 전 | 1174 | |
| 7427 |
sdflksdj2
|
11년 전 | 833 | |
| 7426 | 11년 전 | 1370 | ||
| 7425 | 11년 전 | 1393 | ||
| 7424 | 11년 전 | 1055 | ||
| 7423 |
SeungYeon
|
11년 전 | 565 | |
| 7422 | 11년 전 | 815 | ||
| 7421 |
sdflksdj2
|
11년 전 | 692 | |
| 7420 | 11년 전 | 974 | ||
| 7419 |
 Terrorboy |
11년 전 | 1409 | |
| 7418 |
멋진남자임
|
11년 전 | 1447 | |
| 7417 | 11년 전 | 610 | ||
| 7416 |
senseme
|
11년 전 | 1238 | |
| 7415 | 11년 전 | 967 | ||
| 7414 | 11년 전 | 719 | ||
| 7413 | 11년 전 | 4853 | ||
| 7412 | 11년 전 | 4408 | ||
| 7411 |
holla
|
11년 전 | 901 | |
| 7410 | 11년 전 | 4255 | ||
| 7409 | 11년 전 | 3930 | ||
| 7408 | 11년 전 | 4274 | ||
| 7407 | 11년 전 | 5095 | ||
| 7406 | 11년 전 | 4737 | ||
| 7405 | 11년 전 | 4306 | ||
| 7404 | 11년 전 | 766 | ||
| 7403 | 11년 전 | 5687 | ||
| 7402 | 11년 전 | 1528 | ||
| 7401 |
Terrorboy |
11년 전 | 982 | |
| 7400 | 11년 전 | 2979 | ||
| 7399 |
멋진남자임
|
11년 전 | 925 | |
| 7398 |
파랑새1597
|
11년 전 | 2715 | |
| 7397 | 11년 전 | 2279 | ||
| 7396 |
basketball
|
11년 전 | 1382 | |
| 7395 | 11년 전 | 1619 | ||
| 7394 | 11년 전 | 937 | ||
| 7393 | 11년 전 | 2077 | ||
| 7392 | 11년 전 | 854 | ||
| 7391 |
잘살아보자
|
11년 전 | 5372 | |
| 7390 |
잘살아보자
|
11년 전 | 2233 | |
| 7389 |
잘살아보자
|
11년 전 | 3324 | |
| 7388 |
파랑새1597
|
11년 전 | 932 | |
| 7387 | 11년 전 | 1109 | ||
| 7386 |
프리랜서퍼블리셔
|
11년 전 | 974 | |
| 7385 | 11년 전 | 1575 | ||
| 7384 |
울라라라우
|
11년 전 | 896 | |
| 7383 | 11년 전 | 1564 | ||
| 7382 |
잘살아보자
|
11년 전 | 4235 | |
| 7381 |
잘살아보자
|
11년 전 | 2007 | |
| 7380 |
잘살아보자
|
11년 전 | 1950 | |
| 7379 |
잘살아보자
|
11년 전 | 5912 | |
| 7378 |
senseme
|
11년 전 | 1908 | |
| 7377 |
잘살아보자
|
11년 전 | 2755 | |
| 7376 | 11년 전 | 2422 | ||
| 7375 |
잘살아보자
|
11년 전 | 1055 | |
| 7374 |
잘살아보자
|
11년 전 | 3167 | |
| 7373 |
잘살아보자
|
11년 전 | 2486 | |
| 7372 |
잘살아보자
|
11년 전 | 5834 | |
| 7371 |
잘살아보자
|
11년 전 | 3472 | |
| 7370 |
잘살아보자
|
11년 전 | 1917 | |
| 7369 |
잘살아보자
|
11년 전 | 2176 | |
| 7368 |
ksdhtm56
|
11년 전 | 576 | |
| 7367 | 11년 전 | 1441 | ||
| 7366 | 11년 전 | 941 | ||
| 7365 | 11년 전 | 3555 | ||
| 7364 |
잘살아보자
|
11년 전 | 1404 | |
| 7363 |
잘살아보자
|
11년 전 | 1382 | |
| 7362 |
잘살아보자
|
11년 전 | 1520 | |
| 7361 | 11년 전 | 3605 | ||
| 7360 | 11년 전 | 3568 | ||
| 7359 | 11년 전 | 3388 | ||
| 7358 |
멋진남자임
|
11년 전 | 1038 | |
| 7357 | 11년 전 | 3422 | ||
| 7356 | 11년 전 | 2609 | ||
| 7355 | 11년 전 | 3204 | ||
| 7354 |
파랑새1597
|
11년 전 | 657 | |
| 7353 |
잘살아보자
|
11년 전 | 2432 | |
| 7352 |
잘살아보자
|
11년 전 | 2425 | |
| 7351 |
잘살아보자
|
11년 전 | 2485 | |
| 7350 |
잘살아보자
|
11년 전 | 1480 | |
| 7349 |
잘살아보자
|
11년 전 | 1973 | |
| 7348 |
잘살아보자
|
11년 전 | 1291 | |
| 7347 |
잘살아보자
|
11년 전 | 1085 | |
| 7346 |
멋진남자임
|
11년 전 | 1654 | |
| 7345 | 11년 전 | 1003 | ||
| 7344 | 11년 전 | 3882 | ||
| 7343 | 11년 전 | 3667 | ||
| 7342 | 11년 전 | 1294 | ||
| 7341 | 11년 전 | 2532 | ||
| 7340 |
 오드리15 |
11년 전 | 945 | |
| 7339 | 11년 전 | 1740 | ||
| 7338 | 11년 전 | 3355 | ||
| 7337 | 11년 전 | 3669 | ||
| 7336 | 11년 전 | 4608 | ||
| 7335 | 11년 전 | 984 | ||
| 7334 | 11년 전 | 1540 | ||
| 7333 | 11년 전 | 2947 | ||
| 7332 |
Terrorboy |
11년 전 | 1119 | |
| 7331 |
KeePin뽁이
|
11년 전 | 1109 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기