도입 스토리

"이 약관 페이지, 너무 어렵지 않나요?" 김개발이 말했습니다. "법적 문구라서 어쩔 수 없다는데..."

"읽기 쉽게 만드는 건 다양한 방법이 있어요." 박멘토가 화면을 보며 말했습니다. "약어는 풀어쓰기, 어려운 용어는 설명 추가, 중요한 내용은 요약 제공. WCAG는 3.1.3에서 특이한 단어에 설명을 제공하도록 권장해요. 필수는 아니지만 AAA 기준이에요."

"약어마다 다 설명을 달아야 하나요?"

"처음 등장할 때 한 번만 풀어쓰면 돼요. HTML은 이를 위한 태그도 있어요."

핵심 개념 설명

약어 설명 — WCAG 3.1.4

약어가 처음 등장할 때 전체 의미를 제공합니다.

<!-- 방법 1: abbr 태그로 풀어쓰기 --><p>  <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.2는  W3C가 발행한 웹 접근성 국제 표준입니다.</p><!-- 방법 2: 괄호로 처음 한 번 --><p>  WCAG(Web Content Accessibility Guidelines) 2.2는 국제 표준입니다.  이후 WCAG라고 줄여 씁니다.</p><!-- 방법 3: 용어집 링크 --><p>  <a href="/glossary#wcag">WCAG</a> 2.2를 준수해야 합니다.</p>

<abbr title="..."> 태그는 마우스 hover 시 전체 의미가 표시되고, 스크린리더도 읽어줍니다.

발음 안내 — WCAG 3.1.6

동음이의어나 특수한 발음이 있는 단어에 읽기 방법을 제공합니다. (AAA 기준, 일본어 한자 등에 특히 중요)

<!-- ruby 태그로 읽기 안내 (주로 동아시아 언어) --><ruby>  韓國語  <rp>(</rp>  <rt>한국어</rt>  <rp>)</rp></ruby><!-- 특수 발음 안내 --><p>  이 약품의 성분명은  <span title="아세트아미노펜으로 발음">acetaminophen</span>입니다.</p>

오류 방지 — WCAG 3.3.4

법적·금융·개인 정보 변경처럼 되돌리기 어려운 작업은 확인 단계가 필요합니다.

<!-- 개인정보 삭제 같은 위험한 작업 --><button  type="button"  onclick="confirmDelete()"  aria-describedby="delete-warning">  계정 삭제</button><p id="delete-warning" class="warning-text">  계정을 삭제하면 모든 데이터가 영구적으로 삭제되며 복구할 수 없습니다.</p>

function confirmDelete() {  // 확인 대화상자  const confirmed = window.confirm(    '계정을 삭제하시겠습니까?\n\n이 작업은 되돌릴 수 없습니다.'  );  // 더 나은 방법: 커스텀 확인 모달  if (confirmed) deleteAccount();}

도움 기능 — WCAG 3.3.5

복잡한 폼이나 프로세스에 도움말이 있어야 합니다.

<!-- 폼 필드 옆 도움말 버튼 --><div class="field-group">  <label for="biz-number">사업자 등록번호</label>  <div class="input-row">    <input      type="text"      id="biz-number"      pattern="\d{3}-\d{2}-\d{5}"      placeholder="000-00-00000"      aria-describedby="biz-hint"    >    <button      type="button"      aria-label="사업자 등록번호 입력 도움말"      onclick="showHelp('biz-number')"    >      ?    </button>  </div>  <p id="biz-hint" class="sr-only">10자리 숫자를 하이픈 포함하여 입력하세요.</p></div>

글쓰기 접근성 원칙

기술적 마크업 외에도, 글 자체가 이해하기 쉬워야 합니다.

명확한 글쓰기 원칙:

• 짧은 문장 선호 (한 문장에 하나의 개념)
• 능동태 사용 ("클릭해야 합니다" → "클릭하세요")
• 전문 용어는 처음 등장 시 설명
• 헤딩과 목록으로 구조화
• 요약 제공 (긴 내용의 첫 단락에 핵심 요약)

<!-- 복잡한 내용에 요약 제공 --><article>  <h2>개인정보처리방침</h2>  <!-- 요약 -->  <div class="summary" aria-label="요약">    <h3>핵심 내용 요약</h3>    <ul>      <li>수집 정보: 이름, 이메일, 서비스 이용 기록</li>      <li>보유 기간: 서비스 이용 종료 후 3년</li>      <li>제3자 제공: 법령에 따른 경우 외 없음</li>    </ul>  </div>  <!-- 전문 -->  <details>    <summary>전체 개인정보처리방침 보기</summary>    <div class="full-text">      <!-- 긴 전문 -->    </div>  </details></article>

단계별 실습

따라하기: 약어 표시하기

페이지에서 약어를 찾아 <abbr> 태그를 추가합니다.

// 페이지 내 abbr 태그 현황 확인document.querySelectorAll('abbr').forEach(abbr => {  if (!abbr.title) {    console.warn('title 없는 abbr:', abbr.textContent);  } else {    console.log(`${abbr.textContent} → ${abbr.title}`);  }});

변형하기: 주문 확인 단계 추가

단일 제출 버튼을 검토 단계가 있는 흐름으로 변경합니다.

<!-- Step 1: 주문 내용 --><section aria-labelledby="order-title">  <h2 id="order-title">주문 내용 확인</h2>  <dl>    <dt>상품</dt><dd>노트북 Pro</dd>    <dt>수량</dt><dd>1개</dd>    <dt>결제금액</dt><dd>1,500,000원</dd>  </dl>  <button    type="button"    onclick="proceedToPayment()"  >    결제하기  </button>  <button type="button" onclick="goBack()">수정하기</button></section>

정리와 확인

핵심 내용 요약

• <abbr title="...">: 약어 전체 의미 제공 (WCAG 3.1.4)
• 오류 방지(WCAG 3.3.4): 되돌리기 어려운 작업 — 확인 단계 또는 취소 기간
• 도움말 제공(WCAG 3.3.5): 복잡한 입력에 맥락 도움말 연결
• 명확한 글쓰기: 짧은 문장, 능동태, 요약 제공

확인 문제

문제 1. 다음 중 WCAG 3.3.4(오류 방지)가 적용되어야 하는 작업은?

A: 게시글 임시 저장     ← 적용 불필요 (언제든 수정 가능)
B: 계정 삭제           ← 적용 필요 (되돌릴 수 없음)
C: 프로필 사진 변경     ← 적용 불필요 (언제든 다시 변경 가능)
D: 금융 거래 처리       ← 적용 필요 (법적·금융적 결과)

문제 2. <abbr> 태그의 title 속성 없이 약어를 표시했을 때의 문제점은?

마우스 hover 시 전체 의미가 표시되지 않습니다.
스크린리더도 약어 그대로 읽어서 의미를 파악할 수 없습니다.

PART 04를 마쳤습니다. 다음 PART에서는 마지막 원칙인 "견고성(Robust)"을 다룹니다. 시맨틱 HTML과 ARIA의 올바른 조합으로 현재와 미래의 보조기기 모두에서 작동하는 코드를 만드는 방법을 알아봅니다.