반응형 웹 강좌를 준비하면서, 웹 접근성 측면에서 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년 전
좋은정보네요
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 5930 | 13년 전 | 4643 | ||
| 5929 | 13년 전 | 7841 | ||
| 5928 | 13년 전 | 792 | ||
| 5927 | 13년 전 | 1419 | ||
| 5926 | 13년 전 | 1839 | ||
| 5925 |
김준수사랑
|
13년 전 | 1252 | |
| 5924 |
 darllim |
13년 전 | 2762 | |
| 5923 | 13년 전 | 962 | ||
| 5922 | 13년 전 | 1170 | ||
| 5921 | 13년 전 | 659 | ||
| 5920 | 13년 전 | 1182 | ||
| 5919 |
 슬픈외로움 |
13년 전 | 1378 | |
| 5918 | 13년 전 | 12592 | ||
| 5917 |
프로프리랜서
|
13년 전 | 1100 | |
| 5916 |
프로프리랜서
|
13년 전 | 4633 | |
| 5915 |
프로프리랜서
|
13년 전 | 1609 | |
| 5914 |
프로프리랜서
|
13년 전 | 654 | |
| 5913 |
프로프리랜서
|
13년 전 | 938 | |
| 5912 |
프로프리랜서
|
13년 전 | 3750 | |
| 5911 |
프로프리랜서
|
13년 전 | 930 | |
| 5910 |
 돼지코구뇽 |
13년 전 | 4589 | |
| 5909 |
수야3019
|
13년 전 | 675 | |
| 5908 | 13년 전 | 837 | ||
| 5907 | 13년 전 | 1235 | ||
| 5906 | 13년 전 | 8757 | ||
| 5905 |
프로프리랜서
|
13년 전 | 1475 | |
| 5904 | 13년 전 | 2498 | ||
| 5903 | 13년 전 | 1652 | ||
| 5902 | 13년 전 | 1929 | ||
| 5901 | 13년 전 | 2020 | ||
| 5900 |
프로프리랜서
|
13년 전 | 1092 | |
| 5899 |
프로프리랜서
|
13년 전 | 1283 | |
| 5898 | 13년 전 | 17679 | ||
| 5897 | 13년 전 | 2337 | ||
| 5896 | 13년 전 | 4363 | ||
| 5895 | 13년 전 | 1692 | ||
| 5894 | 13년 전 | 2104 | ||
| 5893 |
프로프리랜서
|
13년 전 | 2162 | |
| 5892 | 13년 전 | 16042 | ||
| 5891 |
bitmaster
|
13년 전 | 1083 | |
| 5890 |
프로프리랜서
|
13년 전 | 948 | |
| 5889 |
 AKASIA |
13년 전 | 727 | |
| 5888 | 13년 전 | 1619 | ||
| 5887 |
 ppogul |
13년 전 | 3200 | |
| 5886 | 13년 전 | 3450 | ||
| 5885 | 13년 전 | 2111 | ||
| 5884 | 13년 전 | 5655 | ||
| 5883 | 13년 전 | 2822 | ||
| 5882 | 13년 전 | 6031 | ||
| 5881 | 13년 전 | 1640 | ||
| 5880 | 13년 전 | 20721 | ||
| 5879 | 13년 전 | 912 | ||
| 5878 |
나의라임토마토
|
13년 전 | 1412 | |
| 5877 | 13년 전 | 16778 | ||
| 5876 |
maniAc
|
13년 전 | 2810 | |
| 5875 | 13년 전 | 1039 | ||
| 5874 | 13년 전 | 3736 | ||
| 5873 |
lainfox
|
13년 전 | 1186 | |
| 5872 | 13년 전 | 1350 | ||
| 5871 | 13년 전 | 798 | ||
| 5870 | 13년 전 | 2529 | ||
| 5869 |
AMDbest
|
13년 전 | 1514 | |
| 5868 |
한번잘해보자
|
13년 전 | 664 | |
| 5867 |
 byfun |
13년 전 | 921 | |
| 5866 | 13년 전 | 7494 | ||
| 5865 | 13년 전 | 2411 | ||
| 5864 | 13년 전 | 940 | ||
| 5863 | 13년 전 | 1311 | ||
| 5862 | 13년 전 | 2878 | ||
| 5861 | 13년 전 | 1032 | ||
| 5860 | 13년 전 | 19333 | ||
| 5859 | 13년 전 | 2946 | ||
| 5858 | 13년 전 | 2654 | ||
| 5857 | 13년 전 | 4831 | ||
| 5856 |
ppogul |
13년 전 | 1955 | |
| 5855 | 13년 전 | 822 | ||
| 5854 | 13년 전 | 1010 | ||
| 5853 | 13년 전 | 16111 | ||
| 5852 | 13년 전 | 826 | ||
| 5851 | 13년 전 | 2223 | ||
| 5850 | 13년 전 | 1775 | ||
| 5849 |
AMDbest
|
13년 전 | 1309 | |
| 5848 |
 직화오리팡야 |
13년 전 | 1166 | |
| 5847 |
SeanLee
|
13년 전 | 1309 | |
| 5846 | 13년 전 | 23472 | ||
| 5845 | 13년 전 | 2657 | ||
| 5844 | 13년 전 | 28814 | ||
| 5843 |
 카카오툴즈 |
13년 전 | 2210 | |
| 5842 | 13년 전 | 22528 | ||
| 5841 | 13년 전 | 5748 | ||
| 5840 |
Quincy
|
13년 전 | 937 | |
| 5839 | 13년 전 | 968 | ||
| 5838 | 13년 전 | 2822 | ||
| 5837 | 13년 전 | 1100 | ||
| 5836 | 13년 전 | 2322 | ||
| 5835 | 13년 전 | 1524 | ||
| 5834 | 13년 전 | 1509 | ||
| 5833 | 13년 전 | 6680 | ||
| 5832 | 13년 전 | 5214 | ||
| 5831 | 13년 전 | 1072 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기