h1 태그란?
h1~h6는 웹 페이지의 제목을 나타내는 태그로, 번호가 작을수록 중요도가 높다. 그 중 h1 태그는 가장 중요한 제목을 담당한다. 한 페이지에 여러 개를 사용해도 문제는 없으나, 가장 중요한 제목인만큼 하나만 쓰는 것이 권장된다. 그리고 하나만 쓰는 것이 스크린 리더 사용자와 SEO에도 더 적합하다. 구글 검색에서 제목 링크가 생성되는 방식 중 h1 요소가 포함되기 때문!
출처
숨기는 이유
UI로 보이고 싶은 문구와 제목으로 설정하고 싶은 문구가 일치하지 않는 경우가 있기 때문이다. 제목으로 설정할만한 문구가 UI에 나와있다면 문제없지만, 없을 경우 기획자, 디자이너와 상의가 필요한 부분이다. 어찌됐건 더 나은 프로덕트를 위한 방향으로 나아가면 좋을 거 같다.
구글에서 스팸처리하는 경우
- 흰색 배경에 흰색 텍스트 사용
- 이미지 뒤에 텍스트 숨김
- CSS를 사용하여 텍스트를 화면에 보이지 않도록 배치
- 글꼴 크기 또는 불투명도를 0으로 설정
- 단락 중간에 사용된 하이픈 등 작은 문자 하나만 연결하여 링크 숨김
구글 정책을 위반하지 않는 경우
- 추가 콘텐츠 숨기기와 표시 간에 전환하는 아코디언 또는 탭 콘텐츠
- 여러 이미지 또는 텍스트 단락을 순환하는 슬라이드쇼 또는 슬라이더
- 사용자가 요소를 통해 상호작용할 때 추가 콘텐츠를 표시하는 도움말 또는 도움말과 유사한 텍스트
- 스크린 리더에서만 액세스할 수 있으며 스크린 리더 사용자의 환경을 개선하기 위한 텍스트
우회하는 방법
target {
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
clip: rect(0, 0, 0, 0);
} 스크린 리더에서만 액세스할 수 있으며 스크린 리더 사용자의 환경을 개선하기 위한 텍스트를 이용하여 우회하는 방식으로, 이렇게 적용 시 스크린리더에서 정상적으로 인식된다.
Mac에서 스크린리더를 사용하는 방법
- voiceOver 사용
- 이전 헤딩태그로 이동:
control+option+command+shift+h - 다음 헤딩태그로 이동:
control+option+command+h
끝맺음말
사실 SEO 최적화 작업을 하며 찾아본 내용인데, 이 작업을 하며 스크린 리더 사용자들이 좀더 편하게 사용할 수 있는 프로덕트를 만들어야겠다는 생각이 들었다. alt 설정이나, tab 이동과 같은 널리 알려져 있는 방법 뿐이 아닌 다방면으로 공부해서 적용할 수 있는 개발자가 되어야겠다. 파이팅!