반응형 웹 강좌를 준비하면서, 웹 접근성 측면에서 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년 전
좋은정보네요
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 5630 | 13년 전 | 1072 | ||
| 5629 | 13년 전 | 2712 | ||
| 5628 | 13년 전 | 1288 | ||
| 5627 | 13년 전 | 1663 | ||
| 5626 | 13년 전 | 1294 | ||
| 5625 | 13년 전 | 1949 | ||
| 5624 | 13년 전 | 1366 | ||
| 5623 | 13년 전 | 951 | ||
| 5622 | 13년 전 | 424 | ||
| 5621 | 13년 전 | 13314 | ||
| 5620 | 13년 전 | 1194 | ||
| 5619 | 13년 전 | 3339 | ||
| 5618 | 13년 전 | 977 | ||
| 5617 | 13년 전 | 427 | ||
| 5616 | 13년 전 | 602 | ||
| 5615 |
Preware
|
13년 전 | 424 | |
| 5614 | 13년 전 | 555 | ||
| 5613 |
AMDbest
|
13년 전 | 4342 | |
| 5612 |
AMDbest
|
13년 전 | 6166 | |
| 5611 | 13년 전 | 879 | ||
| 5610 |
AMDbest
|
13년 전 | 4668 | |
| 5609 | 13년 전 | 969 | ||
| 5608 |
 TopSchooL |
13년 전 | 487 | |
| 5607 | 13년 전 | 656 | ||
| 5606 | 13년 전 | 472 | ||
| 5605 | 13년 전 | 369 | ||
| 5604 | 13년 전 | 609 | ||
| 5603 |
갑수엔터테인먼트
|
13년 전 | 769 | |
| 5602 | 13년 전 | 428 | ||
| 5601 | 13년 전 | 510 | ||
| 5600 | 13년 전 | 934 | ||
| 5599 | 13년 전 | 7469 | ||
| 5598 |
PHPㅡASP프로그래머
|
13년 전 | 2699 | |
| 5597 | 13년 전 | 404 | ||
| 5596 |
hoinV
|
13년 전 | 995 | |
| 5595 | 13년 전 | 922 | ||
| 5594 | 13년 전 | 1064 | ||
| 5593 | 13년 전 | 4943 | ||
| 5592 |
TopSchooL |
13년 전 | 390 | |
| 5591 | 13년 전 | 894 | ||
| 5590 |
PHPㅡASP프로그래머
|
13년 전 | 2309 | |
| 5589 | 13년 전 | 1942 | ||
| 5588 |
바다로가자
|
13년 전 | 1637 | |
| 5587 |
PHPㅡASP프로그래머
|
13년 전 | 1827 | |
| 5586 | 13년 전 | 2747 | ||
| 5585 | 13년 전 | 399 | ||
| 5584 | 13년 전 | 1877 | ||
| 5583 | 13년 전 | 1307 | ||
| 5582 |
바다로가자
|
13년 전 | 3098 | |
| 5581 |
 카카오툴즈 |
13년 전 | 3113 | |
| 5580 | 13년 전 | 922 | ||
| 5579 |
하하369
|
13년 전 | 3978 | |
| 5578 | 13년 전 | 1064 | ||
| 5577 | 13년 전 | 1234 | ||
| 5576 | 13년 전 | 1646 | ||
| 5575 |
가위바위보
|
13년 전 | 1596 | |
| 5574 |
danielle
|
13년 전 | 706 | |
| 5573 |
 palangsae |
13년 전 | 861 | |
| 5572 | 13년 전 | 2779 | ||
| 5571 | 13년 전 | 835 | ||
| 5570 | 13년 전 | 1424 | ||
| 5569 |
 byfun |
13년 전 | 2135 | |
| 5568 | 13년 전 | 1959 | ||
| 5567 | 13년 전 | 679 | ||
| 5566 |
 cshop |
13년 전 | 1312 | |
| 5565 | 13년 전 | 3672 | ||
| 5564 | 13년 전 | 920 | ||
| 5563 | 13년 전 | 1374 | ||
| 5562 | 13년 전 | 874 | ||
| 5561 | 13년 전 | 1045 | ||
| 5560 |
PHPㅡASP프로그래머
|
13년 전 | 1532 | |
| 5559 | 13년 전 | 634 | ||
| 5558 |
there007
|
13년 전 | 1553 | |
| 5557 | 13년 전 | 1187 | ||
| 5556 |
후라보노보노
|
13년 전 | 743 | |
| 5555 | 13년 전 | 9134 | ||
| 5554 | 13년 전 | 828 | ||
| 5553 |
가을이군요
|
13년 전 | 717 | |
| 5552 |
 스마트파인드 |
13년 전 | 792 | |
| 5551 | 13년 전 | 1510 | ||
| 5550 |
후라보노보노
|
13년 전 | 915 | |
| 5549 |
 junny |
13년 전 | 1015 | |
| 5548 | 13년 전 | 678 | ||
| 5547 | 13년 전 | 526 | ||
| 5546 | 13년 전 | 4610 | ||
| 5545 | 13년 전 | 906 | ||
| 5544 | 13년 전 | 1024 | ||
| 5543 | 13년 전 | 760 | ||
| 5542 | 13년 전 | 6633 | ||
| 5541 | 13년 전 | 807 | ||
| 5540 | 13년 전 | 1137 | ||
| 5539 | 13년 전 | 1118 | ||
| 5538 | 13년 전 | 2831 | ||
| 5537 | 13년 전 | 811 | ||
| 5536 | 13년 전 | 2708 | ||
| 5535 |
 직화오리팡야 |
13년 전 | 1214 | |
| 5534 | 13년 전 | 1771 | ||
| 5533 |
꿈꾸는인생
|
13년 전 | 1335 | |
| 5532 | 13년 전 | 1496 | ||
| 5531 | 13년 전 | 1712 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기