스크린 리더에도 ’현재 단계’를

KRDS CP-327 — 현재 단계를 스크린 리더로 확인할 수 있도록 하고 있다.

0. 들어가며 — 화면엔 보이는데 스크린 리더엔 안 들리면

이번 447편은 현재 단계를 스크린 리더로 확인할 수 있도록 하라는 규칙입니다. 이로써 단계 표시기 9개 규칙이 마무리됩니다.

CP-322에서 현재 단계를 시각적으로 명확히 했고, CP-326에서 색 외 단서로도 구분했죠. 하지만 — 시각·형태 단서는 보는 사용자를 위한 것입니다. 스크린 리더 사용자는 — 현재 단계가 프로그래밍적으로 표시돼야 알 수 있죠. CP-327은 현재 단계를 스크린 리더에 전하라고 규정합니다. 페이지네이션 aria-current(CP-127), 탭바 현재 표시의 단계 표시기 버전이죠. 이번 편을 풀어냅니다.

1. 원문 — 현재 단계 스크린 리더 확인

CP-327 (컴포넌트 > 단계 표시기) “현재 단계를 스크린 리더로 확인할 수 있도록 하고 있다.”

스크린 리더 사용자가 전체 단계 중 현재 단계가 어느 것인지 프로그래밍적으로 확인할 수 있게 표시하라는 뜻입니다.

정리: 현재 단계를 스크린 리더가 확인할 수 있게 표시하라. 이게 CP-327입니다.

2. 왜 스크린 리더 현재 단계 표시인가

단계 표시기에서 ’현재 어느 단계인가’는 핵심 정보입니다(CP-322). 시각 사용자는 강조된 현재 단계(색·형태)를 보고 알죠. 하지만 스크린 리더 사용자는 그 시각적 강조를 못 봅니다. 현재 단계가 프로그래밍적으로 표시돼야 스크린 리더가 ’이게 현재 단계’라고 알리죠.

현재 단계가 프로그래밍적으로 표시 안 될 때:

현재 위치 상실 — 스크린 리더 사용자가 단계 목록(CP-325의 ol/li)을 읽어도 — 각 단계가 ’1단계, 2단계’로만 들리고, 어느 게 현재인지 모릅니다. 시각적 강조(색·굵기)는 스크린 리더에 전달되지 않으니까요.

진행 파악 불가 — 전체 단계 수(ol/li로 파악, CP-325)는 알아도 — 자기가 지금 몇 단계인지 모르면, 진행 상황을 알 수 없죠.

그래서 CP-327은 — 현재 단계를 스크린 리더가 확인할 수 있게 표시하라고 합니다. 표준 방법은:

aria-current="step" 현재 단계의 <li>(또는 그 안의 단계 요소)에 aria-current="step"을 줍니다. 그러면 스크린 리더가 그 단계를 읽을 때 ‘현재 단계’ 또는 ’current step’이라고 알리죠. aria-current의 값 step은 ’단계 흐름에서 현재 단계’를 의미하는 표준 값입니다(페이지네이션은 page, 단계는 step).

결과 — 스크린 리더 사용자는 — 단계 목록을 읽다가 ’정보 입력, 현재 단계’처럼 듣고, 자기가 지금 그 단계임을 압니다. 시각 사용자의 강조 표시와 동등한 정보를 얻죠.

보조 텍스트도 가능. aria-current에 더해 — ‘현재 단계: 2/4’ 같은 텍스트(시각적으로 숨김 가능, sr-only)를 제공하거나, 단계 상태를 레이블에 포함(‘정보 입력 (현재 단계)’)할 수도 있죠. 핵심은 — 현재 단계임이 스크린 리더에 명확히 전달되는 것입니다.

완료/예정 상태도(보강). 현재 단계(aria-current)에 더해 — 완료/예정 상태도 스크린 리더에 전하면 더 좋습니다. 완료 단계엔 ‘완료’ 텍스트, 예정엔 별도 표시 등으로요. 다만 — 원문의 핵심은 현재 단계의 스크린 리더 확인입니다.

시각·색무관·SR의 삼중. 단계 표시기의 현재 단계 표현은 — ①시각적 강조(CP-322), ②색 외 단서(CP-326), ③스크린 리더 표시(CP-327)의 세 차원으로 완성되죠. 보는 사용자(322)·색맹 사용자(326)·전맹 사용자(327) 모두가 현재 단계를 알게요. CP-325의 ol/li 마크업 위에 aria-current가 얹혀, 구조 + 현재 표시가 함께 갑니다.

이 규칙은 단계 표시기의 ’현재 단계 접근성’을 담당합니다 — 현재 단계를 aria-current="step"으로 표시해(327), 스크린 리더 사용자가 자기 진행 위치를 알게 하죠. 단계 표시기 접근성(ol/li 구조 325 + 색무관 326 + 현재 표시 327)의 마지막 조각입니다.

정리하면 — 현재 단계의 시각적 강조는 스크린 리더에 전달되지 않으므로, aria-current="step"으로 현재 단계를 프로그래밍적으로 표시해 스크린 리더 사용자가 자기 진행 위치를 확인하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

aria-current — 현재 단계에 aria-current="step"이 있는가.

스크린 리더 확인 — 스크린 리더가 현재 단계를 ’현재 단계’로 알리는가.

구조 결합 — ol/li(CP-325) + aria-current로 전체 수·현재가 함께 전달되는가.

개선 방향

현재 단계 <li>/요소에 aria-current="step" 부여.

필요시 sr-only 텍스트(‘현재 단계: 2/4’)로 보강. 스크린 리더로 실제 검증.

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

역할	책임
퍼블리셔/개발	aria-current=“step” 구현
QA/접근성	스크린 리더 현재 단계 확인 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 현재 단계에 aria-current="step"이 있나요?

□ 스크린 리더가 현재 단계를 ’현재 단계’로 알리나요?

□ ol/li(CP-325) + aria-current로 전체 수·현재가 함께 전달되나요?

❓ FAQ

Q1. 시각적으로 강조했으면 충분하지 않나요? 시각 강조(색·굵기)는 스크린 리더에 전달되지 않습니다. aria-current ="step"으로 별도 표시해야 스크린 리더 사용자가 알죠. Q2. aria-current 값은 뭘 쓰나요? 단계 표시기는 step입니다(페이지네이션은 page). 단계 흐름의 현재를 의미하죠. Q3. CP-322·326과 뭐가 다른가요? 322는 시각적 강조, 326은 색 외 형태 구분, 327은 스크린 리더 표시입니다. 세 차원이 함께 현재 단계를 완성하죠.

6. 마무리

CP-327의 메시지:

스크린 리더에도 ’현재 단계’를 — aria-current="step"으로 현재 단계를 확인하게 하라.

현재 단계의 시각적 강조는 스크린 리더에 전달되지 않습니다. aria-current="step"으로 현재 단계를 표시해 스크린 리더 사용자가 진행 위치를 알게 하는 게 핵심이죠. 이로써 단계 표시기 9개 규칙이 마무리됩니다. 다음 편부터는 스피너(로딩)입니다.

다음 편 예고 ▶ 「448. (CP-328) 스피너 — 처리 시간이 필요한 작업의 진행 상태를 표시하는 데 사용하고 있다.」

ViewCheck는 현재 단계가 스크린 리더로 확인 가능한지를 진단합니다.

📚 참고 출처

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

WAI-ARIA — aria-current — https://www.w3.org/TR/wai-aria-1.1/#aria-current

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

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