제목 구조와 랜드마크

화면 낭독기로 페이지를 읽는 흔한 방법은 제목에서 제목으로 건너뛰는 것이라서, h2가 하나도 없는 페이지는 장 구분이 없는 책처럼 읽힙니다.

제목은 페이지의 목차 구실을 합니다

눈으로 읽는 사람은 페이지를 먼저 훑어봅니다. 크고 굵게 쓴 줄을 슬쩍 보고, 원하는 부분을 찾으면 거기서부터 읽기 시작합니다. 화면 낭독기 사용자는 똑같은 일을 제목을 써서 합니다. MDN은 제목에서 제목으로 빠르게 건너뛰며 페이지에 무엇이 들어 있는지 파악하는 방법이 흔하게 쓰이고, 또 대부분의 화면 낭독기가 페이지의 제목을 모두 목록으로 보여 줄 수 있다고 설명합니다. 이 방법은 제목이 진짜 h1~h6 요소일 때만 제대로 통합니다. CSS로 크고 굵게 만든 문단은 제목처럼 보여도 화면 낭독기에서는 평범한 글로 읽힙니다.

WCAG 2.2는 성공 기준 1.3.1 「정보와 관계」(A 수준)에서 이것을 다룹니다. 이 기준은 눈에 보이도록 나타낸 구조가 코드 안에도 똑같이 들어 있어야 한다는 뜻입니다. 2.4.6 「제목과 레이블」(AA 수준)은 여기에 더해 제목이 그 구역의 주제를 설명해야 한다고 덧붙입니다. 예를 들어 「더 보기」나 「2절」이라고만 쓴 제목은 앞의 기준은 통과해도 뒤의 기준에는 미달입니다.

MDN이 권하는 세 가지

첫째, 제목 단계를 건너뛰지 않습니다. h1 다음에 h2, 그다음에 h3입니다. h1을 듣고 바로 뒤에 h4를 들은 사람은 그 사이에 빠진 단계가 어디로 갔는지 궁금해하며 헷갈립니다. 둘째, 페이지마다 그 페이지의 내용을 대표하는 이름을 담은 h1을 하나 두는 편이 좋습니다. title 요소가 하는 일과 비슷한 구실입니다. HTML 표준은 h1을 여러 개 두는 것을 허용하지만, MDN은 하나만 두는 것을 일반적인 모범 사례로 봅니다. 셋째, 글자 크기를 보고 제목 단계를 고르지 않습니다. h3가 너무 작아 보인다면 CSS로 글자 크기만 바꾸고, 제목 단계는 페이지 구조에 맞는 그대로 둡니다.

쓸모 있는 제목 쓰기

제목 목록의 쓸모는 제목에 쓴 낱말에 달려 있습니다. 제목 스무 개를 죽 훑는 사람은 제목마다 앞부분만 듣고 다음으로 넘어가므로, 쓸모 있는 낱말을 제목 맨 앞에 둡니다. 「방문 가능한 시간 안내」보다 「영업시간」이 낫습니다. 제목은 짧게 쓰고, 제목끼리 서로 다르게 써서 두 구역이 모두 「자세히」가 되는 일이 없게 합니다. 제목을 다 썼다면 그다음에는 전체 구조를 시험합니다. 브라우저 개발자 도구의 접근성 패널이나 화면 낭독기의 제목 목록을 열면 제목만 따로 보입니다. 그 제목들을 줄줄이 읽어 보고, 목차로 읽었을 때 말이 되는지 확인하세요. 목차로 말이 된다면, 그 제목들은 눈으로 훑어보는 사람에게도 도움이 됩니다.

랜드마크

제목이 내용을 나눈다면, 랜드마크는 페이지 전체를 몇 개의 영역으로 나눕니다. header, nav, main, footer 요소에는 각각 역할이 들어 있어서, 화면 낭독기가 영역 목록을 보여 줄 수 있고, 사용자는 본문이나 메뉴로 곧바로 건너뛸 수 있습니다. 보통 한 페이지에는 main이 하나 있습니다. 알맞은 요소를 고르기만 하면 이 역할은 공짜로 저절로 따라옵니다. 그리고 6단원에서 다룰 ARIA 첫 규칙이 바로 이것입니다. 따로 속성을 더 붙일 필요가 하나도 없습니다.

<header>
  <nav>
    <a href="/">Home</a> <a href="/menu">Menu</a>
  </nav>
</header>
<main>
  <h1>Corner Bakery</h1>
  <h2>Bread</h2>
  <h3>Sourdough</h3>
</main>
<footer>12 Mill Lane</footer>