<h1> 요소 숨김 처리 (display none or hidden)
조회수 2912회
특정 목적으로 숨김처리를 할 때 어떤 방법이 유효하진 질문드립니다.
CASE
- 특정한 이유로 인하여 h1 요소를 숨겨야 하는 상황
질문
- 웹접근성, 검색엔진 크롤러를 고려할 때 h1 의 처리를 어떤 방식으로 처리해야 할까요?
- display none 처리
- hidden 속성을 준뒤 label 처리
- section에 포함되지 않은 경우 hidden 속성을 가진 요소를 어떻게 label 처리 해야할까요?
- 이외에 다른 방식??
참고
1 답변
-
저 텍스트를 보여주지도 않을 거면서 왜 저 자리에 텍스트로 입력해야 하는 건가요?
1. 만약 그게 스크린 리더 때문이라면 부트스트랩이
.sr-only클래스를 이용해서 스크린 리더 전용 텍스트를 남겨놓는 방식을 참고해보면 어떨까요..sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }보시면 아시겠지만
display: hidden;먹이면 될것같은 문제를 아주 까다롭게 처리하고 있죠. 화면에 띄지는 않지만 유효한 텍스트로 남겨 두려면 이렇게 하시면 될 거 같습니다.2. 만약 SEO 때문에 넣으신 거라면 차라리 적절한 메타태그를 많이 사용하시는 게 도움이 됩니다. 종래의 트릭들 ―
left: -5000px;이나color: transparent;같은 것들 ― 은 너무 낡아서 검색엔진들/스패머들에 의해 쉽게 간파당합니다.3. 이미지가 로딩되지 않을 때 대신 자리를 채우는 기능으로 넣으시는 거라면 스크립트로 동적으로 바꿔치거나, 그냥
alt="MWave"형식으로 주시는 게 낫습니다.4. 이도 저도 아니라면
display: none;주면 별문제 없을 겁니다.
댓글 입력