상세정보확인 구조화정보시맨틱

KRDS BP-060 — 본문을 구성하는 제목, 목록, 표 등 구조화된 정보는

,

,

,

,

, 등 해당 정보를 의미하는 요소로 제공하여 스크린 리더에서도 정보를 동등하게 인지할 수 있게 하고 있다.

KRDS 체크리스트 항목 BP-060 · 기본 패턴 > 상세 정보 확인 〈846 규칙 완전 분해 시리즈 (626)〉 — “보이는 구조를 코드 구조로”: 본문 시맨틱 마크업

0. 들어가며 — 상세 정보 확인 그룹의 마지막

이번 626편은 본문의 제목·목록·표 등 구조화된 정보를 의미에 맞는 시맨틱 요소(<h2>~<h6>, <ul>/<ol>/<li>, <table>, <strong> 등)로 제공하라는 규칙입니다. 상세 정보 확인 그룹(BP-050~060)의 마지막이죠.

본문이 — 시각적으로는 제목·목록·표처럼 보여도, <div>·<span>만으로 만들면 스크린 리더는 그 구조를 모릅니다. BP-060은 의미에 맞는 시맨틱 요소를 쓰라고 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 구조화 정보 시맨틱 요소

BP-060 (기본 패턴 > 상세 정보 확인) “본문을 구성하는 제목, 목록, 표 등 구조화된 정보는 <h2>~<h6>, <ul>, <ol>, <li>, <table>, <strong> 등 해당 정보를 의미하는 요소로 제공하여 스크린 리더에서도 정보를 동등하게 인지할 수 있게 하고 있다.”

본문의 구조화 정보를 의미에 맞는 시맨틱 요소로 제공해, 스크린 리더도 동등하게 인지하게 하라는 뜻입니다.

정리: 본문 구조를 의미에 맞는 시맨틱 요소로 마크업하라. 이게 BP-060입니다.

2. 왜 시맨틱 마크업인가

본문은 여러 구조화된 정보로 이뤄집니다: 제목·소제목(위계), 목록(나열), 표(행·열 데이터), 강조(중요) 등. 이 구조는 시각 사용자에겐 디자인으로 보이지만, 스크린 리더 사용자에겐 코드(시맨틱)로 전달돼야 하죠. BP-060은 의미에 맞는 HTML 요소를 쓰라고 합니다.

시맨틱 없이 만들 때의 문제:

구조 미전달 제목을 <div class="title">로, 목록을 <div> 나열로, 표를 <div> 격자로 만들면, 시각 적으론 똑같아 보여도 스크린 리더는 그 구조를 모릅니다. ‘제목’·‘목록 5개 항목’·‘표 3행 4열’ 같은 안내가 없죠.

동등 인지 실패 시각 사용자는 구조를 보고 빠르게 파악하는데, 스크린 리더 사용자는 평평한 텍스트로만 들어 구조를 못 압니다. 정보 인지가 동등하지 않죠.

탐색 기능 상실 스크린 리더는 제목 단위 점프, 목록·표 단위 탐색 같은 기능을 제공하는데, 시맨틱이 없으면 이 기능이 안 됩니다.

그래서 BP-060은 — 의미에 맞는 요소를 쓰라고 합니다:

제목 <h2>~<h6> 콘텐츠 제목·소제목을 제목 요소로요(본문 제목은 페이지 <h1> 아래 <h2>~<h6> 위계). 스크린 리더가 ’제목 레벨 2’로 읽고, 제목 단위 점프를 제공하죠. 시각 구분(BP-052) + 시맨틱(BP-060)이 함께요.

목록 <ul>/<ol>/<li> 나열 정보를 순서 없으면 <ul>, 순서 있으면 <ol>, 항목은 <li>로요. ’목록, N개 항목’으로 읽히죠(BP-044, CP-441 정신).

표 <table> 행·열 데이터를 <table>로, 제목 칸은 <th>(scope 지정)로요. 스크린 리더가 ’○열 ○행, 값’처럼 행·열 관계를 읽어 표를 이해하게 합니다. 레이아웃용 <table>은 금지(데이터용만).

강조 <strong>/<em> 중요한 텍스트를 <strong>(중요), <em>(강조)으로요. 시각적 굵게(<b>)가 아니라 의미적 강조를 써, 스크린 리더가 강조를 인지하게요.

’동등하게 인지’가 목표. 핵심은 — 시각 사용자가 보는 구조를, 스크린 리더 사용자도 동등하게 인지하는 것입니다. 시맨틱 마크업은 — 이 동등성을 만드는 도구죠. 보이는 구조 = 코드 구조여야 합니다.

웹접근성 정보-관계 원칙. 이 규칙은 — WCAG 1.3.1(정보와 관계)의 핵심입니다. 시각적으로 표현된 구조·관계는 — 프로그램적으로(시맨틱) 파악 가능해야 하죠. 상세 정보 확인 그룹 전반(제목 BP-052, 계층 BP-053)의 시맨틱 토대입니다.

컴포넌트 시맨틱 규칙의 종합. 구조화 목록(CP-058~064), 표(CP-181~189), 텍스트 목록(CP-228~234) 등 — 컴포넌트별 시맨틱 규칙을, 본문 콘텐츠 전반에 적용한 게 BP-060이죠.

이 규칙은 상세 정보 확인의 ’구조 동등 인지’를 담당합니다 — 본문 구조를 시맨틱 요소로 마크업해(060), 스크린 리더 사용자도 제목·목록·표·강조를 동등하게 인지하게 하죠. 상세 정보 확인 그룹의 접근성 마무리입니다.

정리하면 — <div>·<span>만으로 만든 구조는 스크린 리더가 인지 못 하므로, 본문의 제목·목록·표·강조를 <h2>~<h6>, <ul>/<ol>/<li>, <table>, <strong> 등 의미에 맞는 시맨틱 요소로 제공해 동등하게 인지하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

제목 시맨틱 — 본문 제목·소제목이 <h2>~<h6> 위계로 마크업되는가.

목록·표 시맨틱 — 나열은 <ul>/<ol>/<li>, 데이터는 <table>/<th>인가.

강조 시맨틱 — 중요 텍스트가 <strong>/<em>(시각 <b> 아님)인가.

개선 방향

본문 구조를 의미 요소로: 제목 <h2>~, 목록 <ul>/<ol>/<li>, 표 <table>/<th>, 강조 <strong>/<em>.

레이아웃용 표 금지. 보이는 구조=코드 구조(WCAG 1.3.1). 스크린 리더 검증.

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

역할	책임
퍼블리셔/개발	본문 시맨틱 마크업 구현
QA/접근성	스크린 리더 구조 인지 검증

기관 유형	BP-060 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (웹접근성 의무)

웹접근성 의무 대상이며 구조화 본문을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 본문 제목·소제목이 <h2>~<h6> 위계로 마크업되나요?

□ 나열은 <ul>/<ol>/<li>, 데이터는 <table>/<th>인가요?

□ 중요 텍스트가 <strong>/<em>(시각 <b> 아님)인가요?

❓ FAQ

Q1. <div>로 만들면 왜 안 되나요? 시각적으론 같아 보여도 스크린 리더가 ’제목·목록·표’임을 모릅니다. 구조를 못 전해 정보 인지가 동등하지 않고, 제목 점프 같은 탐색도 안 되죠. Q2. <b>와 <strong> 차이는요? <b>는 시각적 굵게(의미 없음), <strong>은 의미적 중요입니다. 스크린 리더가 강조를 인지하려면 <strong>/<em>을 써야 하죠. Q3. 표는 어떻게 마크업하나요? 데이터 표는 <table>로, 제목 칸은 <th>(scope)로요. 스크린 리더가 행·열 관계를 읽게 합니다. 레이아웃용으로 <table>을 쓰면 안 되죠.

6. 마무리

BP-060의 메시지:

보이는 구조를 코드 구조로 — 본문의 제목·목록·표·강조를 의미에 맞는 시맨틱 요소로 제공하라.

<div>로 만든 구조는 스크린 리더가 인지 못 합니다. 제목·목록·표·강조를 시맨틱 요소로 마크업해 동등하게 인지하게 하는 게 핵심이죠. 상세 정보 확인 그룹(BP-050~060)이 끝났습니다. 다음 편부터는 오류 그룹입니다.

다음 편 예고 ▶ 「627. (BP-061) 오류 그룹 시작」

ViewCheck는 본문 구조화 정보가 시맨틱 요소로 제공되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 상세 정보 확인 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_06.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컴포넌트,웹표준