반응형 웹 강좌를 준비하면서, 웹 접근성 측면에서 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년 전
좋은정보네요
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 5830 | 13년 전 | 1190 | ||
| 5829 | 13년 전 | 5055 | ||
| 5828 | 13년 전 | 6439 | ||
| 5827 | 13년 전 | 1215 | ||
| 5826 |
 AKASIA |
13년 전 | 542 | |
| 5825 | 13년 전 | 900 | ||
| 5824 |
 카카오툴즈 |
13년 전 | 1886 | |
| 5823 | 13년 전 | 5622 | ||
| 5822 |
jfascas
|
13년 전 | 1058 | |
| 5821 | 13년 전 | 1704 | ||
| 5820 | 13년 전 | 1318 | ||
| 5819 |
itlang
|
13년 전 | 513 | |
| 5818 | 13년 전 | 1310 | ||
| 5817 | 13년 전 | 785 | ||
| 5816 | 13년 전 | 625 | ||
| 5815 | 13년 전 | 6138 | ||
| 5814 | 13년 전 | 864 | ||
| 5813 |
악마의유혹
|
13년 전 | 463 | |
| 5812 | 13년 전 | 2810 | ||
| 5811 | 13년 전 | 1185 | ||
| 5810 | 13년 전 | 3535 | ||
| 5809 | 13년 전 | 1359 | ||
| 5808 | 13년 전 | 1068 | ||
| 5807 | 13년 전 | 578 | ||
| 5806 | 13년 전 | 562 | ||
| 5805 |
angrysol
|
13년 전 | 823 | |
| 5804 | 13년 전 | 1013 | ||
| 5803 | 13년 전 | 1742 | ||
| 5802 |
angrysol
|
13년 전 | 1068 | |
| 5801 |
후라보노보노
|
13년 전 | 2155 | |
| 5800 | 13년 전 | 1115 | ||
| 5799 |
 울랄라커뮤니케이션스 |
13년 전 | 4199 | |
| 5798 |
울랄라커뮤니케이션스 |
13년 전 | 3367 | |
| 5797 |
울랄라커뮤니케이션스 |
13년 전 | 4940 | |
| 5796 | 13년 전 | 7552 | ||
| 5795 | 13년 전 | 2778 | ||
| 5794 | 13년 전 | 2232 | ||
| 5793 |
 gilynh |
13년 전 | 665 | |
| 5792 | 13년 전 | 2974 | ||
| 5791 | 13년 전 | 848 | ||
| 5790 | 13년 전 | 4331 | ||
| 5789 |
gilynh |
13년 전 | 2479 | |
| 5788 |
 grapedw |
13년 전 | 1854 | |
| 5787 |
오지랖선생
|
13년 전 | 1623 | |
| 5786 | 13년 전 | 5929 | ||
| 5785 | 13년 전 | 1769 | ||
| 5784 |
 simon1004 |
13년 전 | 1454 | |
| 5783 | 13년 전 | 1313 | ||
| 5782 |
울랄라커뮤니케이션스 |
13년 전 | 2826 | |
| 5781 | 13년 전 | 2858 | ||
| 5780 | 13년 전 | 1160 | ||
| 5779 |
 Maximus |
13년 전 | 1358 | |
| 5778 |
오리진소프트
|
13년 전 | 4609 | |
| 5777 | 13년 전 | 684 | ||
| 5776 | 13년 전 | 1165 | ||
| 5775 | 13년 전 | 1473 | ||
| 5774 | 13년 전 | 1897 | ||
| 5773 |
 hy미디어 |
13년 전 | 1924 | |
| 5772 | 13년 전 | 1690 | ||
| 5771 | 13년 전 | 4798 | ||
| 5770 | 13년 전 | 1132 | ||
| 5769 | 13년 전 | 6108 | ||
| 5768 |
Maximus |
13년 전 | 1580 | |
| 5767 | 13년 전 | 1688 | ||
| 5766 |
프로프리랜서
|
13년 전 | 1388 | |
| 5765 |
 하늘제사장 |
13년 전 | 1042 | |
| 5764 | 13년 전 | 1761 | ||
| 5763 |
gilynh |
13년 전 | 786 | |
| 5762 |
gilynh |
13년 전 | 2291 | |
| 5761 | 13년 전 | 620 | ||
| 5760 | 13년 전 | 625 | ||
| 5759 | 13년 전 | 3271 | ||
| 5758 | 13년 전 | 1087 | ||
| 5757 |
gilynh |
13년 전 | 744 | |
| 5756 | 13년 전 | 570 | ||
| 5755 | 13년 전 | 1064 | ||
| 5754 |
AKASIA |
13년 전 | 2231 | |
| 5753 | 13년 전 | 679 | ||
| 5752 | 13년 전 | 1550 | ||
| 5751 | 13년 전 | 771 | ||
| 5750 | 13년 전 | 755 | ||
| 5749 | 13년 전 | 2579 | ||
| 5748 | 13년 전 | 1013 | ||
| 5747 | 13년 전 | 1223 | ||
| 5746 |
hy미디어 |
13년 전 | 655 | |
| 5745 | 13년 전 | 1662 | ||
| 5744 | 13년 전 | 692 | ||
| 5743 | 13년 전 | 834 | ||
| 5742 |
프로프리랜서
|
13년 전 | 582 | |
| 5741 | 13년 전 | 645 | ||
| 5740 | 13년 전 | 636 | ||
| 5739 | 13년 전 | 732 | ||
| 5738 | 13년 전 | 1927 | ||
| 5737 | 13년 전 | 992 | ||
| 5736 | 13년 전 | 1096 | ||
| 5735 | 13년 전 | 1997 | ||
| 5734 | 13년 전 | 1145 | ||
| 5733 | 13년 전 | 2791 | ||
| 5732 |
JOYCOM
|
13년 전 | 649 | |
| 5731 | 13년 전 | 3310 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기