숨김처리할때 궁금한게 있습니다~
이룩
1) .blind{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:0;height:0;font-size:0;line-height:0} /* NHN */
2) {position:absolute; left:-1000%; top:0; width:1px; height:1px; font-size:0; line-height:0; overflow:hidden}
숨김처리할때 display:none을 쓰면 스크린리더에서도 읽히지 않기 때문에위처럼 사용하는데
저도 처음엔 1)번으로 사용했습니다.
그런데 어느 블로그에서는 Safari, Chrome, Opera브라우져는 면적이 없는 요소에는 focus를 받지 않도록 구현되어서
width값과 height값 1px씩 주고 visibility:hidden속성도 사용하지 않는다고 합니다.
어떤방법으로 많이들 쓰시나요?
-
은아
1번으로 했을때 아이폰의 보이스 오버에서는 읽어주지 않습니다 ㅎㅎ; 직접 여러가지 테스트를 해보시면 좋을듯 해요... 수다님 얘기처럼 width, height, font-size 의 속성값이 0인 경우 없는 콘텐츠와 같은 의미로 해석이 될수 있으니까요 ^^
-
Elfin
감사합니다^0^
-
낮선검객
네^^ 감사합니다~~~
-
눈내리던날
화면에는 지장이 없지만 Safari, Chrome, Opera브라우져는 면적값이 없으면 인식을 못한다고하네요..
-
비마중
클래스명은 거의... 제 경우는 .hidden 이걸 많이 쓰구요... 겹칠 경우엔.. .hiddenDiv 뭐 이렇게...
absolute에 화면 밖으로 날려주는게 젤 편하죠~ 근데 font나 width 이런건 안쓰셔도 되요.. -100000px 로만 날려줘도... 화면에 전혀~ 지장 안주니까요~
애초에 더 좋은 방법은 숨겨뒀다가 포커스 가면 화면에 나타나게 해주는.. 그런 방법이... 키보드로만 사용하는 사람들도 있으니.. -
큰나라
width, height, font-size 의 속성값이 0인 경우 없는 콘텐츠와 같은 의미로 해석이 될 수도 있습니다.
class 명이 blind에 대해서는 어떻게 생각하시는지요. 사전적 의미는 눈이 먼, 맹인인 그리고 볼 수 없는이라는 뜻을 가진 단어인데요. 단순히 시각장애인을 위해 숨기기 위해서만 쓰이지는 것인지. -
초롬
1번으로해도 잘되던데요;;;
-
흰양말
2번 방법이 좋아 보이네요.
-
한빛
네^^ list-style:none같은 경우는 1)번을 쓰는게 낫겠네요..
hr /같은 경우는 2)번을 쓰는게 낫구요...감사합니다. -
아리솔
2번요;; 근데 2번도 공간을차지하는 단점이 있어서 상황 봐서 두개 골라써요;;