HTML 제목 태그의 이해
안녕하세요. 엔비전스입니다.
눈으로 페이지를 탐색하고, 마우스를 움직여 원하는 내용을 찾고, 선택하는 비시각장애인은 페이지 구조를 어떻게 만들고 페이지를 이용할 때, 어떻게 구분할까요? 우리는 공간에 규칙을 두고 무언가의 크기와 색상에 차이를 주고, 배치하는 것을 흔히 레이아웃(Layout)이라고 부릅니다.
레이아웃에 포함된 여러 요소는 시각적인 차이점을 주어 명확히 구분합니다. 그렇다면, 화면을 보지 않고 사용하는 스크린 리더 사용자는 어떻게 웹사이트의 레이아웃을 파악할 수 있을까요? 스크린 리더 사용자는 대표적으로 제목 요소를 통해 레이아웃을 구분합니다. 이번 아티클에서는 웹 구조의 기본이 되는 제목의 중요성과 올바른 제공 방법에 대해 다루도록 합니다.
제목의 중요성 : 스크린 리더 사용자와 레이아웃
이미지 설명:
상단에는 헤더와 주메뉴, 중앙에는 두 영역으로 나뉘어 왼쪽에는 하위 메뉴, 오른쪽에는 본문영역, 마지막으로 가장 아래에는 푸터 영역이 보이는 그림이다.비시각장애인 사용자의 경우, 레이아웃을 파악할 때, 가장 큰 기준점이 되는 것은 위치라고 볼 수 있습니다. 페이지의 어떤 곳에 있는가에 따라서 영역의 용도와 이름이 붙여지며, 중요도에 따라 크기와 위치가 달라집니다.
이 밖에 부수적으로는 영역에 색상과 패턴, 테두리를 특이점으로 제공하여 시각적으로 명확한 구분이 가능토록 합니다.
하지만, 스크린 리더 사용자는 CSS로 배치된 웹사이트의 모든 정보를 1차원 구조의 텍스트로 읽습니다. 내용의 순서에 따른 중요도는 인지할 수 있으나 레이아웃의 크기, 색상 구분, 구분선 등을 볼 수 없으므로 명확한 영역의 구분이 매우 어렵습니다.
지금도 흔히 볼 수 있는 신문은 커다란 용지에 여러 기사를 제목과 문단으로 구성하여 신문의 구조를 구분해 놓았습니다.
신문을 볼 때, 수많은 글 중에서 원하는 기사를 찾고, 글의 시작과 끝을 명확히 구분할 수 있었던 이유는 굵고 진한 기사의 헤드라인 글귀 덕분이라고 볼 수 있습니다.
스크린 리더 사용자는 위에서부터 아래로 한 문단씩 글을 읽어나가기 때문에 원하는 내용을 찾을 때, 오랜 시간이 걸리며, 1차원적인 구조로 문서를 읽기 때문에 제목이 없다면 글의 시작과 끝을 명확히 이해할 수 없을 것이며, 이는 보이는 사람에게조차 불편함을 줍니다.
모두를 위한 제목 요소
HTML을 조금이라도 공부한 사람이라면, 제목 요소를 사용하지 않은 사람은 없을 것입니다. 대부분 사람은 제목 요소(h1~h6)가 가장 기초적인 태그 중 하나이기 때문에 모두 이해하였다고 생각하곤 합니다.
하지만, 우리가 잘 모르는 제목에 대한 규칙이 존재합니다. 지금부터 제목의 올바른 사용을 위한 규칙에 대해 알아보도록 합니다.
h1 태그 사용에 대한 관습
h1 태그는 웹페이지의 모든 콘텐츠를 포괄하는 제목으로 의미론적(시멘틱)으로 해석하자면 주 제목 요소라고 말할 수 있으며 웹페이지의 이름, 로고 등을 표현할 때 사용되는 요소로, 책으로 치면 책의 겉표지와 같은 역할을 합니다. 이러한 의미를 해치지 않기 위해서는 아래의 사항을 고려하여야 합니다.
h1 태그는 누락되어서는 안 된다
h1 태그의 누락은 신문의 언론사 이름이나, 잡지의 이름이 적힌 표지 등이 누락된 것과 같다고 볼 수 있습니다. 즉 사용자가 어떤 내용 또는 서비스를 제공하는지 한 눈에 알기 어려운 점이 있습니다.
WCAG의 실패 사례에는 해당하지 않지만, 페이지 상단 및 본문에는 오랜 시간 동안 관습적으로 h1 태그가 한 개 이상 사용되었으므로 특별한 이유가 아니라면 사용하는 것이 사용자에게 친숙합니다.
h1 태그를 중복으로 사용해서는 안 된다
h1 태그는 웹 문서나 큰 범주에 해당하는 내용의 전체를 아우르는 제목입니다. 대중적인 웹 문서의 구조에서는 h1 태그를 한 개만 사용합니다. WCAG에서는 h1 태그를 여러 개 사용하는 것에 대하여 기존 관습과 충돌하여, 사용자에게 혼란을 줄 수는 있지만 지침 항목에 대한 실패로 간주하지 않습니다.
다만, h1 태그는 한 페이지 내에서 여러 개를 사용할 수 있으나, 여러 개를 사용할 때는 시멘틱 태그와 폰트 크기를 조절하여 영역별 계층 구조를 알기 쉽게 해주어야 합니다.
제목의 연관성과 연속성
제목은 내용의 흐름에 맞게 순차적으로 배치해야 하는 것이 좋으며, 내용과 연관성이 있어야 하며, 하위 제목일 경우, 부모 콘텐츠와의 연관성 또한 있는 것이 사용자가 웹 문서를 읽고 이해하는 데 도움을 줍니다.
제목의 수준은 건너뛰어서는 안 된다
사용자가 글을 읽는 중에 제목을 보고, 먼저 읽은 내용과 연관성이 있음을 인지할 수 있도록 순차적이고 연속된 수준(레벨)의 제목을 사용해야 하는 것이 좋습니다.
h1을 쓴 다음, 부제목 수준의 h2 태그를 사용하지 않고, h3 태그를 사용하는 사례를 예로 들 수 있으며, WCAG의 지침에는 위배되지 않지만, 사용자가 레이아웃을 이해하는 데 도움이 되지 않으므로, 되도록 피해야 합니다.
제목 간 명확한 구분이 가능해야 한다
사용자가 모든 제목을 구분할 수 있도록, 같은 컨테이너 내에서 같은 수준의 제목에 동일한 텍스트를 쓰지 않도록 해야 합니다. 만약에 문서의 특성상, 동일한 텍스트의 제목이 필요한 경우, 반드시 구분된 위치에 제공해야 합니다.
또한 눈으로 보았을 때, 텍스트의 굵기, 크기, 밑줄, 기울기 등의 스타일로 제목을 구분하고 있으나, h1부터 h6까지의 제목 요소가 아닌 다른 태그를 사용하여 제목을 제공하였다면 스크린 리더 사용자는 일반적인 텍스트로 인식하므로 명확히 구분 할 수 있도록 반드시 제목 요소를 사용해야 합니다.
위 두 가지 사항은 WCAG의 지침에도 위배되므로, 반드시 지키는 것이 바람직합니다.
명확히 구분되는 제목 예시
부적절한 예시
<section>
<p style="font-weight:bold;">Apple(명사)<p>
...
<p style="font-weight:bold;">Apple(명사)<p>
...
</section>
올바른 예시
<section>
<h3>Apple[1]<h3>
<section>
<h4>명사</h4>
...
</section>
<h3>Apple[2]<h3>
<section>
<h4>명사</h4>
...
</section>
</section>
제목 요소의 무분별한 사용 금지
h1부터 h6까지의 제목 요소에는 의미가 부여되어 있으나, 레이아웃과는 관계없는 용도로 사용하면 제목을 통해 레이아웃을 파악하는 스크린 리더 사용자에게 혼란을 주게 됩니다.
특히, 글자의 굵기나, 크기 등을 통해 강조하고자 할 때, 위와 같은 사례가 많이 발생합니다. 이러할 때는, 제목 요소가 아닌 span 태그에 class로 묶어 강조 디자인을 별도로 제공해야 합니다.
가시적인 디자인 사용
제목 요소는 눈에 보이는 것이 좋습니다. 스크린 리더 사용자를 위해 제목 요소를 사용하고 싶으나 디자인상의 이유로 제목을 표시하기 어려운 상황이 아니라면 가급적 제목 텍스트를 숨기지 않는 디자인을 방향으로 잡는 것을 권장합니다.
제목과 시멘틱 태그
HTML 5에서는 화면 레이아웃을 나눌 때, div 태그 외에도 의미가 부여된 여러 컨테이너 태그를 사용합니다.
header(배너, 머리말) nav(내비게이션), main(본문), footer(콘텐츠 정보), 독립된 글의 영역(article), 연관된 구문(section) 등 여러 태그가 있습니다. 이러한 시멘틱 컨테이너는 사용하는 것만으로도 스크린 리더 사용자가 페이지 레이아웃을 이해하기 쉬운 환경을 만들어줍니다.
하지만, 완벽한 것은 아닙니다. 이러한 문서의 구역을 나누는 구획 요소(Sectioning Elements)에는 반드시 제목 요소가 제공되어야 합니다.
분명히 각 컨테이너마다 의미가 있기 때문에 영역의 시작과 끝은 인지할 수 있으나, 동일한 의미를 가진 컨테이너가 여러 개 있는 웹 문서라면 제목이 있어야만 어떠한 내용을 담고 있으며, 이전 내용과 독립된 내용인가 혹은 연관되어있는 내용인가를 이해할 수 있습니다.
지금까지 제목 요소를 어떻게 사용해야 하며, 어떤 곳에 사용하는가에 대해서 다뤄보았습니다.
사람에 따라서는 당연히 지켜왔던 것일 수도 있지만, 그렇지 않은 사람 또한 당연히 있을 것입니다. 이러한 가장 기초적인 부분을 되돌아봄으로써 많은 사람이 웹 문서를 점검하는 계기가 되었으면 하며, 지금보다 더 보편적인 웹 환경이 조성되기를 기대합니다.
다음에도 더 유익한 내용으로 찾아뵙도록 노력하겠습니다. 읽어주셔서 감사합니다.