의미에 맞는 태그로

KRDS CP-441 — 시맨틱 마크업(정보의 의미/역할에 적합한 태그)을 적용하고 있다.

0. 들어가며 — div로만 만든 화면

이번 561편은 시맨틱 마크업(정보의 의미·역할에 적합한 태그)을 적용하라는 규칙입니다.

숨긴 콘텐츠를 포함한 모든 콘텐츠를 — <div>·<span>으로만 만들면, 스크린 리더가 그 의미·역할을 모르죠. 제목은 <h1>, 목록은 <ul>, 버튼은 <button>처럼 — 의미에 맞는 태그를 써야 합니다. CP-441은 시맨틱 마크업을 규정 합니다. 웹 접근성의 근간이죠. 이번 편을 풀어냅니다.

1. 원문 — 의미·역할에 적합한 태그

CP-441 (컴포넌트 > 숨긴 콘텐츠) “시맨틱 마크업(정보의 의미/역할에 적합한 태그) 을 적용하고 있다.”

콘텐츠를 그 정보의 의미·역할에 맞는 HTML 태그(시맨틱 태그)로 마크업하라는 뜻입니다.

정리: 콘텐츠를 의미에 맞는 시맨틱 태그로 마크업하라. 이게 CP-441입니다.

2. 왜 시맨틱 마크업인가

시맨틱 마크업(semantic markup) 은 콘텐츠의 의미·역할에 맞는 HTML 태그를 쓰는 것입니다. 제목엔 <h1>~ <h6>, 목록엔 <ul>/<ol>/<li>, 본문 영역엔 <main>, 탐색엔 <nav>, 버튼엔 <button>, 링크엔 <a>처럼 각 콘텐츠의 역할에 맞는 태그를 쓰죠. 반대는 모든 걸 의미 없는 <div>·<span>으로 만드는 것입니다.

div·span만 쓸 때의 문제:

의미 전달 안 됨 <div>·<span>은 의미가 없는 일반 컨테이너입니다. 스크린 리더는 이게 제목인지, 목록인지, 버튼인지 모르죠. 시각 사용자는 크고 굵은 글씨를 보고 ‘제목이구나’ 짐작하지만, 스크린 리더 사용자는 그 시각적 단서를 못 보니, 태그의 의미에 의존합니다. div로만 만들면 모든 게 그냥 ’텍스트’로 평평하게 읽혀, 구조·역할을 파악 못 하죠.

탐색 기능 상실 스크린 리더 사용자는 제목(<h>)으로 페이지를 빠르게 훑거나, 목록·랜드마크(<nav>, <main>)로 이동합니다. 시맨틱 태그가 없으면 이 탐색 기능이 작동 안 해, 처음부터 끝까지 다 읽어야 하죠.

기능 손실 <button> 대신 <div onclick>으로 버튼을 만들면 키보드 포커스·Enter 실행·역할 안내가 자동 으로 안 됩니다(직접 ARIA·tabindex로 다 구현해야 함). 시맨틱 태그를 쓰면 그런 기능·접근성이 기본 제공되죠.

그래서 CP-441은 — 의미에 맞는 시맨틱 태그를 쓰라고 합니다:

구조 태그 — 제목은 <h1>~<h6>(계층 순서대로), 목록은 <ul>/<ol>/<li>, 표는 <table>(헤더 <th>), 단락은 <p>.

랜드마크 — <header>, <nav>, <main>, <aside>, <footer>로 영역의 역할을 표시.

컨트롤 — 버튼은 <button>, 링크는 <a>, 입력은 <input>/<label>. 적절한 요소로.

필요시 ARIA — 표준 태그로 안 되는 커스텀 위젯은 — 적절한 role·ARIA로 의미·역할을 보강.

숨긴 콘텐츠와의 관계. 이 그룹이 ’숨긴 콘텐츠’인데 시맨틱 마크업을 다루는 이유는 숨긴 콘텐츠도, 그것을 둘러싼 구조도 시맨틱해야 스크린 리더가 올바로 인식하기 때문이죠. 숨긴 텍스트를 의미 없는 곳에 두면 맥락이 깨집니다. 또 숨긴 콘텐츠로 보조 안내를 줄 때도, 전체 구조가 시맨틱해야 그 안내가 제 역할을 하죠. 시맨틱 마크업은 모든 접근성의 토대입니다.

왜 근간인가. 시맨틱 마크업은 웹 접근성의 가장 기본입니다. ARIA를 더하기 전에, 먼저 올바른 HTML 태그를 쓰는 게 원칙이죠(‘No ARIA is better than bad ARIA’ 잘못된 ARIA보다 올바른 시맨틱 HTML이 낫다). 시맨틱 토대 위에 필요한 ARIA를 보강합니다.

이 규칙은 숨긴 콘텐츠(및 전반)의 ’구조적 접근성’을 담당합니다 — 콘텐츠를 의미에 맞는 시맨틱 태그로 마크업해(441), 스크린 리더가 구조·역할을 인식하고 탐색하게 하죠. 접근성의 근간입니다.

정리하면 — div·span만 쓰면 스크린 리더가 의미·역할을 못 알아 구조 파악·탐색이 안 되므로, 제목·목록·랜드마크·컨트롤 등을 의미에 맞는 시맨틱 태그로 마크업해야 합니다.

3. 점검 / 개선

무엇을 점검하나

시맨틱 태그 — 제목·목록·표·단락이 의미에 맞는 태그(h/ul/table/p)인가(div 남발 아님).

랜드마크 — header/nav/main/footer로 영역 역할이 표시되는가.

컨트롤 — 버튼은 button, 링크는 a 등 적절한 요소인가.

개선 방향

div·span을 의미에 맞는 시맨틱 태그로 교체(제목 h, 목록 ul/li, 영역 nav/main 등).

버튼=button, 링크=a. 커스텀 위젯은 적절한 role·ARIA 보강. ARIA 전에 시맨틱 HTML 우선.

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
퍼블리셔/개발	시맨틱 마크업 구현
QA/접근성	구조·랜드마크·역할 검증

기관 유형	CP-441 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수

웹접근성 의무 대상인 모든 공공 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 제목·목록·표·단락이 의미에 맞는 태그(h/ul/table/p)인가요(div 남발 아님)?

□ header/nav/main/footer로 영역 역할이 표시되나요?

□ 버튼은 button, 링크는 a 등 적절한 요소인가요?

❓ FAQ

Q1. div로만 만들면 왜 안 되나요? 스크린 리더가 의미·역할을 몰라 구조 파악·탐색이 안 됩니다. 제목으로 훑기, 랜드마크 이동 같은 기능이 작동 안 하죠. Q2. ARIA로 의미를 주면 되지 않나요? ’No ARIA is better than bad ARIA’입니다. 먼저 올바른 시맨틱 HTML을 쓰고, 안 되는 부분만 ARIA로 보강하죠. Q3. 숨긴 콘텐츠 그룹인데 왜 시맨틱인가요? 숨긴 콘텐츠도 시맨틱 구조 안에서 의미가 살고, 전체 구조가 시맨틱해야 접근성이 작동합니다. 근간이죠.

6. 마무리

CP-441의 메시지:

의미에 맞는 태그로 — 콘텐츠를 시맨틱 마크업으로 적용하라.

div·span만 쓰면 스크린 리더가 의미·역할을 못 알아 구조·탐색이 안 됩니다. 제목·목록·랜드마크·컨트롤을 의미에 맞는 시맨틱 태그로 마크업하는 게 핵심이죠. 다음 편은 탐지 방지 스타일 회피입니다.

다음 편 예고 ▶ 「562. (CP-442) 숨긴 콘텐츠에 스크린 리더가 정보를 탐지하는 것을 방지하는 스타일을 사용하고 있지 않다.」

ViewCheck는 시맨틱 마크업이 적용됐는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 숨긴 콘텐츠(Visually hidden) 가이드 — https://www.krds.go.kr/html/site/component/component_45.html

WCAG 2.1 SC 1.3.1 Info and Relationships — https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준