푸터 링크도 밑줄로 또렷이

KRDS DS-111 — 선명한 화면 모드에서 푸터 내 모든 링크에 밑줄을 표시하고 있다.

0. 들어가며 — 푸터 링크의 밑줄

이번 111편은 선명한 화면 모드에서 푸터 내 모든 링크에 밑줄을 표시하는 규칙입니다.

푸터(화면 하단)에는 개인정보처리방침·이용약관·사이트맵 등 많은 링크가 모여 있습니다. 42편에서 봤듯 본문 링크는 색+밑줄로 식별하는데, 선명한 화면 모드에서는 푸터 링크도 모두 밑줄로 명확히 식별하라는 것이죠. 이번 편은 푸터 링크 밑줄을 풀어냅니다.

1. 규칙 원문 — 푸터 링크 밑줄

DS-111 (디자인 스타일 > 선명한 화면 모드) “선명한 화면 모드에서 푸터 내 모든 링크에 밑줄을 표시하고 있다.”

선명한 화면 모드에서 푸터의 모든 링크에 밑줄을 더해 명확히 식별하라는 뜻입니다.

정리: 선명한 화면 모드에서 푸터 링크에 모두 밑줄을 표시하라. 이게 DS-111입니다.

2. 왜 푸터 링크에 밑줄인가

42편에서 봤듯, 밑줄은 ’링크’를 식별하는 신호입니다. 색만으로 링크를 표시하면 색약자·저시력자가 놓치기 쉬워, 밑줄을 함께 줘야 하죠.

푸터는 링크가 빽빽하게 모인 영역입니다. 일반 모드에서는 색·간격으로 어느 정도 구분되지만, 선명한 화면 모드의 저시력 사용자에게는 푸터의 작은 링크들이 잘 구분되지 않을 수 있습니다. 그래서 선명한 화면 모드 에서는 푸터의 모든 링크에 밑줄을 더해, 각 링크가 명확히 식별되게 합니다. 밑줄이 있으면 ’이게 누를 수 있는 링크’임이 형태로 분명해지죠.

이는 110편(헤더 유틸 링크 윤곽선·배경)과 짝을 이룹니다 — 헤더 링크는 윤곽선·배경으로, 푸터 링크는 밑줄로, 각 영역의 링크 가시성을 선명한 화면 모드에서 강화하는 것이죠. 화면 상단(헤더)과 하단(푸터)의 링크 모두를 저시력 사용자가 쉽게 식별하게 하는 것입니다. 6편(색만 의존 금지)·42편(밑줄은 링크)의 원리가 선명한 화면 모드에서 더 강하게 적용되는 셈입니다.

3. 점검 / 개선

무엇을 점검하나

푸터 링크 밑줄 — 선명모드에서 푸터의 모든 링크에 밑줄이 있는가.

식별성 — 저시력 사용자가 푸터 링크를 구분할 수 있는가.

Before / After

/* ✅ 선명모드 푸터 링크 밑줄 */ [data-mode="high-contrast"] footer a { text-decoration: underline; }

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

역할	책임
퍼블리셔/개발	선명모드 푸터 링크 밑줄 구현

기관 유형	DS-111 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (선명모드 제공 시)

선명한 화면 모드를 제공하고 푸터 링크가 있는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 선명모드에서 푸터의 모든 링크에 밑줄이 있나요?

□ 푸터 링크가 명확히 식별되나요?

□ 색만으로 링크를 표시하지 않나요?

❓ FAQ

Q1. 일반 모드 푸터도 밑줄인가요? 일반 모드는 맥락에 따라 다를 수 있으나, 선명한 화면 모드에서는 모든 푸터 링크에 밑줄이 필수입니다. 저시력 사용자의 식별을 위해서입니다. Q2. 110편(헤더)과 다른가요? 헤더 유틸 링크는 윤곽선·배경(110편), 푸터 링크는 밑줄(111편)로 강화합니다. 영역에 맞는 방식입니다. Q3. KRDS를 채택하면 자동인가요? KRDS 푸터 컴포넌트는 선명모드에서 링크 밑줄을 적용합니다.

6. 마무리

DS-111의 메시지:

푸터 링크도 밑줄로 또렷이 — 선명모드에선 모든 링크를 명확히 식별되게.

밑줄은 링크 식별 신호라, 선명한 화면 모드에서 푸터의 모든 링크에 밑줄을 더해 저시력 사용자가 구분하게 합니다. 헤더(윤곽선)·푸터(밑줄)의 링크 가시성을 함께 강화하는 것이죠.

다음 편은 버튼·입력·링크 강화를 다룹니다. DS-112 — “선명한 화면 모드에서 버튼·입력·선택의 외곽선, 링크 밑줄을 기본 모드보다 굵고 대비 높게 한다.”

다음 편 예고 ▶ 「112. 선명한 화면 모드에서 버튼, 입력, 선택 컴포넌트의 외곽선, 링크 밑줄을 기본 모드 보다 굵고 명도 대비가 높게 적용하고 있다.」

ViewCheck는 선명한 화면 모드에서 푸터 링크에 밑줄이 표시되는지를 진단합니다.

📚 참고 출처

KRDS 선명한 화면 모드 가이드 — https://www.krds.go.kr/html/site/style/style_02.html

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

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