기호를 없애도 목록은 목록이게

KRDS CP-253 — list-style-type: none 스타일 지정으로 인한 접근성 문제에 유의하여 구현하고 있다.

0. 들어가며 — 텍스트 목록 그룹의 마지막

이번 373편은 텍스트 목록 그룹(CP-247~253, 7개)의 마지막 규칙입니다. list-style-type: none 스타일로 인한 접근성 문제에 유의하라는 내용이죠.

디자인상 목록의 글머리 기호(•)를 없애려고 list-style-type: none을 쓰는 경우가 많습니다 — 메뉴, 카드 목록 등에서요. 그런데 일부 브라우저·스크린 리더 조합에서는 이 스타일이 — 목록을 ‘목록으로 인식하지 않게’ 만드는 부작용이 있죠. CP-253은 이 함정에 유의하라고 규정합니다. 이번 편을 풀어내며 텍스트 목록 7개를 마무리합니다.

1. 규칙 원문 — list-style:none 접근성 유의

CP-253 (컴포넌트 > 텍스트 목록) “list-style-type: none 스타일 지정으로 인한 접근성 문제에 유의하여 구현하고 있다.”

목록의 글머리 기호를 제거하는 list-style-type: none 스타일을 쓸 때, 일부 환경에서 목록이 ’목록’으로 인식 되지 않는 접근성 문제에 유의해 구현하라는 뜻입니다.

정리: list-style:none이 목록 인식을 깨지 않게 유의하라. 이게 CP-253입니다.

2. 왜 list-style:none이 접근성 문제인가

list-style-type: none은 — 목록(<ul>/<ol>)의 글머리 기호(•)나 번호를 시각적으로 제거하는 CSS입니다. 디자인상 흔히 쓰이죠 — 내비게이션 메뉴, 카드 그리드, 태그 목록처럼 ‘목록 구조는 필요하지만 점·번호는 안 보이게’ 하고 싶을 때요. 시맨틱하게는 <ul>/<li>인데(목록 구조 유지) 시각적으론 점이 없는 깔끔한 형태죠.

문제 — 일부 환경의 ‘목록 무력화’. 그런데 일부 브라우저(특히 Safari)와 스크린 리더(VoiceOver 등) 조합 에서는 — list-style-type: none이 적용된 목록을 ‘목록으로 인식하지 않는’ 부작용이 있습니다. 즉:

점·번호를 없앴을 뿐인데, 스크린 리더가 — 그 <ul>을 ’목록’이 아니라 일반 텍스트 그룹으로 처리해, “목록, 항목 N개” 같은 목록 정보(개수·위치, CP-252)를 안 읽죠.

시맨틱하게 <ul>/<li>로 잘 마크업했는데도, 시각 스타일(list-style:none) 때문에 그 시맨틱 이점이 사라 지는 셈입니다.

이는 — 브라우저가 ’시각적으로 글머리 기호가 없으면 목록처럼 안 보이니, 목록 역할도 빼자’고 해석하는 데서 생기는 알려진 접근성 이슈입니다. 의도(시각만 정리)와 결과(목록 인식 상실)가 어긋나죠.

그래서 — 유의하며 구현. CP-253은 이 함정을 알고 대응하라고 합니다. 핵심 대응:

role="list" 명시 — list-style:none을 쓰는 <ul>에 role="list"를 명시적으로 부여합니다. 그러면 브라우저가 글머리 기호를 없애도 ’이건 목록’이라는 역할이 명시돼, 스크린 리더가 목록으로 인식하죠. 항목에 role="listitem"을 더하기도 합니다. (역설적이지만 — 이미 <ul>인데 role="list"를 또 붙이는 것이, 이 특정 브라우저 버그를 우회하는 권장 패턴입니다.)

목록 정보 보존 확인 — 스크린 리더로 테스트해, list-style:none 적용 후에도 “목록, 항목 N개”가 읽히는지 확인하죠.

과용 주의. 한편 — list-style:none을 불필요하게 남용하지 않는 것도 중요합니다. 진짜 목록(나열 항목) 이면 글머리 기호가 의미 있는 시각 단서이므로(CP-247의 동등함 표시), 함부로 없애지 않는 게 낫죠. 점·번호를 없애야 할 디자인 맥락(메뉴·카드 등)에서만 쓰고, 그때 role="list"로 접근성을 보존합니다. 반대로 — ’목록이 아닌데 <ul>로 마크업’하는 것도 피해야 하죠(레이아웃 목적 목록 남용).

왜 마지막 규칙으로. 이 규칙은 텍스트 목록 시맨틱(CP-252)의 ’실무 함정’을 다룹니다 — 목록을 시맨틱하게 잘 만들어도(<ul>/<li>), 흔한 스타일(list-style:none)이 그 시맨틱을 무력화할 수 있으니 유의하라는 것이죠. 시맨틱 마크업 + 스타일 적용 후 접근성 검증까지가 완전한 구현입니다.

이로써 텍스트 목록 7개 규칙(CP-247~253)이 완성됩니다 — 유형 구분(247·248), 일관 어투(249), 계층(250·251), 시맨틱 태그(252), 스타일 함정 유의(253)까지. 가장 기본적인 콘텐츠 형식인 목록을, 의미·구조·접근성 모두 챙겨 만드는 규칙들이죠.

정리하면 — list-style-type: none은 일부 환경에서 목록 인식을 깨므로, role="list" 명시 등으로 목록 정보를 보존하고, 적용 후 스크린 리더로 검증해야 합니다.

3. 점검 / 개선

무엇을 점검하나

목록 인식 유지 — list-style:none 적용 목록이 스크린 리더에 ’목록’으로 인식되는가.

role 보완 — 필요한 경우 role="list"로 목록 역할을 보존했는가.

남용 없음 — list-style:none을 불필요하게 남용하지 않는가.

개선 방향

list-style:none 쓰는 <ul>에 role="list"(필요 시 항목 role="listitem") 명시.

스크린 리더로 “목록, 항목 N개” 읽힘 검증. 불필요한 기호 제거 자제.

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

역할	책임
퍼블리셔/개발	list-style:none + role="list" 구현·검증
접근성 담당	목록 인식 스크린 리더 검증

기관 유형	CP-253 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (글머리 기호 제거 목록 사용 시)

list-style:none을 쓰는(메뉴·카드 등) 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ list-style:none 적용 목록이 스크린 리더에 ’목록’으로 인식되나요?

□ 필요한 경우 role="list"로 목록 역할을 보존했나요?

□ list-style:none을 불필요하게 남용하지 않나요?

❓ FAQ

Q1. 점을 없애면 왜 목록 인식이 깨지나요? 일부 브라우저(Safari)+스크린 리더(VoiceOver)에서 list-style:none 이 목록 역할을 무력화하는 알려진 버그입니다. Q2. 어떻게 대응하나요? <ul>에 role="list"를 명시적으로 부여하면 목록 인식이 보존됩니다. 이미 <ul> 이라도요. Q3. 점을 그냥 두면 안 되나요? 진짜 목록이면 글머리 기호가 의미 있는 단서입니다. 디자인상 없애야 할 때만 쓰고 role="list"로 보존하세요.

6. 마무리

CP-253의 메시지:

기호를 없애도 목록은 목록이게 — list-style:none 접근성 함정에 유의하라.

list-style:none은 일부 환경에서 목록을 ‘목록으로 인식하지 않게’ 만드는 부작용이 있습니다. role="list" 명시로 목록 정보를 보존하고 스크린 리더로 검증해야 하죠. 시맨틱 마크업도 흔한 스타일에 무력화될 수 있으니 유의합니다. 이로써 텍스트 목록 7개(CP-247~253)를 마칩니다. 다음 편부터는 새 컴포넌트 그룹 링크(Link) 로 넘어갑니다.

다음 편 예고 ▶ 「374. (CP-254) 링크 — (다음 컴포넌트 그룹 첫 규칙)」

ViewCheck는 list-style:none 목록이 접근성을 보존하는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 텍스트 목록(Text list) 가이드 — https://www.krds.go.kr/html/site/component/component_23.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컴포넌트,웹표준