overflow hidden 관련 궁금점 하나 더 적어봅니다
본문
현재 0b3 에서 본문바로가기 라든지 <h2>홈페이지 메인메뉴</h2> 같은 경우 스타일이
#gnb h2 {margin:0;padding:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
이렇게 되어 있는데
visibility:hidden 대신 width:1px; height:1px; overflow:hidden; 을 쓰는 이유가 따로 있는지 궁금합니다.
궁금해서 검색해보니
width와 height값이 0이면 스크린리더기에서 인식을 못한다고 하던데
font-size:0; 을 빼면 인식한다는 댓글이 보이길래 질문드려봅니다.
(http://cafeblog.search.naver.com/search.naver?where=cafeblog&sm=tab_jum&ie=utf8&query=overflow+hidden+visibility+hidden) <= 4번째 결과(하코사 댓글중)
파폭 스타일해제와 텍스트브라우저에서 정상 출력되는 것까진 확인했는데 스크린리더기는 어떤건지도.. 본적도 없다 보니..;;
그래서 아래처럼 css 수정해봤습니다. 이렇게 할 경우 메뉴바의 상단1px 여백이 사라집니다.(파폭,크롬 / 참고링크에 적용되어 있습니다.)
/* #gnb h2 {margin:0;padding:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden} */
#gnb h2 {width:0px; height:0px; visibility:hidden;}
별도로 .sound_only 처럼 클래스를 따로 지정하는 것도 괜찮을 듯 합니다
#gnb h2 {margin:0;padding:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
이렇게 되어 있는데
visibility:hidden 대신 width:1px; height:1px; overflow:hidden; 을 쓰는 이유가 따로 있는지 궁금합니다.
궁금해서 검색해보니
width와 height값이 0이면 스크린리더기에서 인식을 못한다고 하던데
font-size:0; 을 빼면 인식한다는 댓글이 보이길래 질문드려봅니다.
(http://cafeblog.search.naver.com/search.naver?where=cafeblog&sm=tab_jum&ie=utf8&query=overflow+hidden+visibility+hidden) <= 4번째 결과(하코사 댓글중)
파폭 스타일해제와 텍스트브라우저에서 정상 출력되는 것까진 확인했는데 스크린리더기는 어떤건지도.. 본적도 없다 보니..;;
그래서 아래처럼 css 수정해봤습니다. 이렇게 할 경우 메뉴바의 상단1px 여백이 사라집니다.(파폭,크롬 / 참고링크에 적용되어 있습니다.)
/* #gnb h2 {margin:0;padding:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden} */
#gnb h2 {width:0px; height:0px; visibility:hidden;}
별도로 .sound_only 처럼 클래스를 따로 지정하는 것도 괜찮을 듯 합니다
답변 11
visibility:hidden 은 외산 스크린리더에서 읽어주지 않습니다.
width:0 height:0 역시 외산 스크린리더에서 읽어주지 않습니다.
현재 가능한 방법은 다음 4가지 정도가 있으며, 곧 정리할 예정입니다.
.solve_1 {position:absolute;top:0;left:0;margin:0;padding:0;width:1px;height:1px;overflow:hidden}
.solve_2 {margin:0;padding:0;width:1px;height:1px;overflow:hidden}
.solve_3 {margin:0;padding:0;font-size:0;line-height:0;overflow:hidden}
.solve_4 {margin:0;padding:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
디자인이나 스타일이 변경되어도 스크린리더에 대해서만 대응할 요소 이외에는 sound_only 클래스를 적용시키지 않고 개별적으로 적용하며, 이 부분은 사용자의 선택에 맡겨야 할 것 같습니다.
width:0 height:0 역시 외산 스크린리더에서 읽어주지 않습니다.
현재 가능한 방법은 다음 4가지 정도가 있으며, 곧 정리할 예정입니다.
.solve_1 {position:absolute;top:0;left:0;margin:0;padding:0;width:1px;height:1px;overflow:hidden}
.solve_2 {margin:0;padding:0;width:1px;height:1px;overflow:hidden}
.solve_3 {margin:0;padding:0;font-size:0;line-height:0;overflow:hidden}
.solve_4 {margin:0;padding:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
디자인이나 스타일이 변경되어도 스크린리더에 대해서만 대응할 요소 이외에는 sound_only 클래스를 적용시키지 않고 개별적으로 적용하며, 이 부분은 사용자의 선택에 맡겨야 할 것 같습니다.
답변 감사합니다~^^ 외산ㅠ 여러가지 문제가 많네요~ 역시 어려워요ㅎ
한가지 설명을 덜 드렸었네요.
본문 바로가기처럼 포커스 되는 순간에 영역을 잡아서 화면에 표시해줘야 하는 경우
width:0 height:0 등을 기본으로 잡아두면 :focus 에서 넓이를 잡아도 ie 하위버전과 크롬 등에서
현재와 같은 동작을 하지 않습니다.
ie6, 크롬 확인 중 발견된 내용을 수정한 것이어서 해당 내용에 대해 전체 브라우저를 대상으로 테스트하지는 않았습니다. 다만 수정한 후에는 전체 브라우저를 대상으로 테스트했습니다.
본문 바로가기처럼 포커스 되는 순간에 영역을 잡아서 화면에 표시해줘야 하는 경우
width:0 height:0 등을 기본으로 잡아두면 :focus 에서 넓이를 잡아도 ie 하위버전과 크롬 등에서
현재와 같은 동작을 하지 않습니다.
ie6, 크롬 확인 중 발견된 내용을 수정한 것이어서 해당 내용에 대해 전체 브라우저를 대상으로 테스트하지는 않았습니다. 다만 수정한 후에는 전체 브라우저를 대상으로 테스트했습니다.
사족1) 텍스트 전용 브라우저는 css 와 js 가 동작하지 않습니다. css 에서 어떻게 정의했다 하더라도 문서 구조 그대로 나타납니다.
사족2) visibility:hidden 을 스크린리더가 읽어줘야 한다는 의견이 있습니다. 이유인즉슨, visibility 속성의 media type 이 visible (시각) 용이기 때문에 aural 에 해당하는 스크린리더는 읽어줘야 맞다는 것입니다.
media type 만 놓고 본다면 충분히 공감되는 주장이지만, 모든 경우의 visibility:hidden 이 스크린리더에서 읽힌다면 이 또한 문제가 될 것이라 예상됩니다. 이것은 제 개인적인 의견이며 앞으로 의견이 바뀔 소지가 없지 않습니다.
사족2) visibility:hidden 을 스크린리더가 읽어줘야 한다는 의견이 있습니다. 이유인즉슨, visibility 속성의 media type 이 visible (시각) 용이기 때문에 aural 에 해당하는 스크린리더는 읽어줘야 맞다는 것입니다.
media type 만 놓고 본다면 충분히 공감되는 주장이지만, 모든 경우의 visibility:hidden 이 스크린리더에서 읽힌다면 이 또한 문제가 될 것이라 예상됩니다. 이것은 제 개인적인 의견이며 앞으로 의견이 바뀔 소지가 없지 않습니다.
좋은 정보이네여 ^^ 스크린리더를 저도 하나 구입해야 하는지.. 정말 갈등생깁니다.
뽁스님 덕분에 중요정보 하나 알아서 정말 감사합니다.
뽁스님 덕분에 중요정보 하나 알아서 정말 감사합니다.
헉.. 구입까지ㅠ
찾아보니 http://stopspading.tistory.com/24 에뮬도 있네요^^
감사합니다. *^^*
감사합니다. *^^*
감사합니다
감사합니다
도움되었습니다.
답변을 작성하시기 전에 로그인 해주세요.
