단계표시기 olli마크업

KRDS CP-325 — 단계 목록과 항목을

로 마크업하여 스크린 리더에서 전체 단계 수와 구성을 빠르게 파악할 수 있도록 하고 있다.

KRDS 체크리스트 항목 CP-325 · 컴포넌트 > 단계 표시기(Step indicator) 〈846 규칙 완전 분해 시리즈 (445)〉 — “순서 있는 목록으로”: ol/li 마크업

0. 들어가며 — 스크린 리더에 ’4단계 중’이 들리려면

이번 445편은 단계 목록과 항목을 <ol>, <li>로 마크업해, 스크린 리더에서 전체 단계 수와 구성을 빠르게 파악하게 하라는 규칙입니다.

단계 표시기를 — 의미 없는 <div>들로 만들면, 스크린 리더는 그게 ’순서 있는 목록’인지 모르고 단계들을 흩어진 텍스트로 읽죠. <ol>/<li>로 마크업하면 — 스크린 리더가 ’4개 항목 목록, 1번째…’처럼 전체 단계 수와 구성을 알립니다. CP-325는 시맨틱 마크업을 규정합니다. 구조화 목록 CP-148, 페이지네이션 ul/li(CP-128)의 단계 표시기 버전이죠. 이번 편을 풀어냅니다.

1. 원문 — ol/li 마크업으로 단계 수·구성 파악

CP-325 (컴포넌트 > 단계 표시기) “단계 목록과 항목을 **

,

로 마크업하여 스크린 리더에서 전체 단계 수와 구성을 빠르게 파악**할 수 있도록 하고 있다.”

단계 표시기를 순서 있는 목록(<ol>)과 항목(<li>)으로 마크업해, 스크린 리더가 전체 단계 수와 순서를 빠르게 파악하게 하라는 뜻입니다.

정리: 단계 표시기를 <ol>/<li>로 마크업하라. 이게 CP-325입니다.

2. 왜 ol/li 마크업인가

단계 표시기는 — 본질적으로 순서 있는 목록입니다(1단계, 2단계, … 순서가 의미를 가짐). 이를 HTML로 표현할 때 — 시맨틱 마크업(의미를 담은 태그)을 쓰느냐가 스크린 리더 접근성을 좌우하죠.

의미 없는 마크업(div)의 문제. 단계 표시기를 — 단순 <div>나 <span>들로 만들면:

목록 인식 불가 스크린 리더는 그게 ‘순서 있는 목록’인지 모릅니다. 단계들을 서로 무관한 흩어진 텍스트 로 읽죠. ’전체가 몇 단계인지’, ’이게 순서 있는 절차인지’를 알 수 없습니다.

전체 구성 파악 어려움 — 시각 사용자는 단계 표시기를 보고 ’4단계짜리구나’를 한눈에 알지만 — 스크린 리더 사용자는 div 텍스트를 하나씩 읽어야 해, 전체 단계 수·구성을 빠르게 못 잡습니다.

<ol>/<li> 마크업의 효과. 단계를 — 순서 있는 목록 <ol>과 항목 <li>로 마크업하면:

전체 단계 수 안내 — 스크린 리더는 — <ol>에 들어갈 때 ’목록, 4개 항목’처럼 전체 개수를 알립니다. 사용자가 ’아, 4단계짜리구나’를 즉시 알죠.

순서·위치 안내 — 각 <li>를 읽을 때 ‘1번째 항목’, ’2번째 항목’처럼 순서를 알립니다. <ol>은 순서가 의미 있는 목록이라 — 단계 표시기에 딱 맞죠(순서 무관이면 <ul>이지만, 단계는 순서가 핵심이라 <ol>).

빠른 탐색 — 스크린 리더 사용자는 — 목록 단위로 빠르게 건너뛰거나 항목을 훑을 수 있습니다.

그래서 CP-325는 — 단계 목록을 <ol>, 각 단계를 <li>로 마크업하라고 합니다. 시각적 디자인(원·선·강조)은 CSS로 하되, 구조는 시맨틱하게요.

추가 시맨틱. <ol>/<li>에 더해 — 단계 표시기 전체를 <nav aria-label="진행 단계">로 감싸면(탐색 영역 의미) 더 명확하죠. 그리고 현재 단계엔 aria-current="step"(CP-327)을 줍니다. 즉 <nav> + <ol>/<li> + aria-current가 단계 표시기의 표준 접근성 마크업입니다.

시각·구조 분리. 핵심은 — 보이는 디자인(원형 단계, 연결선)과 무관하게 구조는 ol/li로 한다는 점입니다. div로 예쁘게 만들고 끝내면 접근성이 빠지죠. 시맨틱 마크업 위에 CSS로 디자인을 입힙니다.

이 규칙은 단계 표시기의 ’구조적 접근성’을 담당합니다 — 순서 있는 목록(ol/li)으로 마크업해(325), 스크린 리더 사용자가 전체 단계 수·구성·순서를 빠르게 파악하게 하죠. 시각(322 현재 표현)·색무관(326)에 더한 구조 차원의 접근성입니다.

정리하면 — 단계 표시기를 div로 만들면 스크린 리더가 순서 있는 목록임을 몰라 전체 구성을 파악 못 하므로, <ol>/ <li>로 마크업해 전체 단계 수와 순서를 알리게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

ol/li 마크업 — 단계 목록이 <ol>, 각 단계가 <li>인가(div 남발 아님).

단계 수 안내 — 스크린 리더가 전체 단계 수·순서를 알리는가.

추가 시맨틱 — <nav aria-label> 래핑, 현재 단계 aria-current="step"(CP-327)인가.

개선 방향

단계 표시기를 <ol>/<li>로 마크업. 시각 디자인은 CSS로.

<nav aria-label="진행 단계"> 래핑 + 현재 단계 aria-current(CP-327).

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

역할	책임
퍼블리셔/개발	ol/li 시맨틱 마크업 구현
QA/접근성	스크린 리더 단계 수·순서 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 단계 목록이 <ol>, 각 단계가 <li>인가요(div 남발 아님)?

□ 스크린 리더가 전체 단계 수·순서를 알리나요?

□ <nav aria-label> 래핑, 현재 단계 aria-current="step"인가요?

❓ FAQ

Q1. 왜 <ul>이 아니라 <ol>인가요? 단계는 순서가 의미를 가집니다(1→2→3). 순서 있는 목록 <ol>이 맞죠. 순서 무관이면 <ul>입니다. Q2. div로 예쁘게 만들면 안 되나요? 시각적으론 되지만 스크린 리더가 목록임을 몰라 전체 구성을 못 잡습니다. 구조는 ol/li, 디자인은 CSS로 하죠. Q3. nav로 감싸야 하나요? 권장됩니다. <nav aria-label="진행 단계">로 감싸면 탐색 영역 의미가 더해져, 스크린 리더 사용자가 빠르게 찾죠.

6. 마무리

CP-325의 메시지:

순서 있는 목록으로 — 단계 표시기를 <ol>/<li>로 마크업하라.

div로 만들면 스크린 리더가 순서 있는 목록임을 몰라 전체 구성을 파악 못 합니다. <ol>/<li>로 마크업해 전체 단계 수·순서를 알리는 게 핵심이죠. 다음 편은 단계 식별자의 색 외 구분입니다.

다음 편 예고 ▶ 「446. (CP-326) 단계 식별자를 색상으로만 구분하여 표현하지 않고 있다.」

ViewCheck는 단계 표시기가 ol/li로 마크업됐는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 단계 표시기(Step indicator) 가이드 — https://www.krds.go.kr/html/site/component/component_31.html

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

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