로그인이 ’링크’로 읽히게

KRDS SP-063 — 로그인 링크는 스크린 리더에서 링크로 인지될 수 있도록 하고 있다.

0. 들어가며 — 로그인 기능 찾기 서브섹션의 마지막

이번 737편은 로그인 링크는 스크린 리더에서 링크로 인지될 수 있도록 하라는 규칙입니다. ‘로그인 기능 찾기’ 서브섹션 (SP-059~063)의 마지막이죠.

로그인 링크가 — <div>+클릭으로 만들어지면, 스크린 리더가 ’링크’로 인지 못 해 시각 장애 사용자가 로그인을 못 하죠. SP-063은 로그인 링크의 스크린 리더 인지를 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 로그인 링크 스크린 리더 인지

SP-063 (서비스 패턴 > 로그인 > 로그인 기능 찾기) “로그인 링크는 스크린 리더에서 링크로 인지될 수 있도록 하고 있다.”

로그인 링크를 스크린 리더가 링크로 인지할 수 있게 하라는 뜻입니다.

정리: 로그인 링크를 스크린 리더가 링크로 인지하게 하라. 이게 SP-063입니다.

2. 왜 링크 인지인가

로그인 링크는, 시각 사용자에게는 보입니다. 그런데 스크린 리더 사용자에게는, 그게 링크로 인지돼야 누를 수 있죠. 로그인이 <div>+클릭 같은 비표준으로 만들어지면, 스크린 리더가 링크로 못 읽어 시각 장애 사용자가 로그인을 못 합니다. SP-063은 링크 인지를 요구합니다.

로그인이 링크로 인지 안 될 때의 문제:

로그인 못 함 로그인이 <div>+클릭 이벤트로만 구현되면, 스크린 리더는 그게 링크(또는 버튼)인지 모릅니다. 시각 장애 사용자는, 로그인 입구가 있는지·어떻게 누르는지 모르죠. 로그인 자체를 못 합니다.

개인화 서비스 배제 로그인을 못 하면, 마이페이지·민원·신청 등 개인화 서비스 전체에서 배제됩니다. 심각한 접근성 장벽이죠.

그래서 SP-063은 — 링크 인지를 요구합니다:

진짜 링크·버튼 로그인을 진짜 <a>(링크) 또는 <button>(버튼)으로 구현합니다. 그러면 스크린 리더가 ’로그인 링크/버튼’으로 인지하고, 키보드 작동도 기본 제공되죠(SP-015 정신).

접근가능한 이름 로그인 링크에 ‘로그인’ 이름을요(SP-060 레이블, 또는 aria-label). 아이콘만이면 별도 이름을요. 스크린 리더가 ’로그인 링크’로 읽게요.

역할 인지 스크린 리더가, 그 요소를 링크/버튼(역할)으로 인지하게요(WCAG 4.1.2 이름·역할·값). 시맨틱 요소면 역할이 자동, 커스텀이면 role을 지정합니다.

키보드 접근 링크로 인지되면, 키보드 Tab으로 포커스가 가고 Enter로 작동하죠. 마우스 없이도 로그인하게요.

**‘로그인 기능 찾기’의 접근성 마무리.** ’로그인 기능 찾기’(SP-059~063)는 로그인을 어디서·어떻게 찾고 누르나를 다뤘 습니다. 위치(059)·구성(060)·연결(061)·모바일(062)·스크린 리더 인지(063)까지요. SP-063은 그 접근성 마무리죠. 로그인 을 시각 사용자뿐 아니라 스크린 리더 사용자도 인지·작동하게요.

검색 SP-015·016과의 유사성. 검색 돋보기의 키보드 접근(SP-015)·이름(SP-016)과 같은 정신입니다. 핵심 기능 (검색·로그인)의 입구를, 모든 사용자가 인지·작동하게요. 비표준 <div>가 아니라 진짜 시맨틱 요소로요.

이 규칙은 로그인(SP)의 ’로그인 링크 접근성’을 담당합니다 — 로그인 링크를 스크린 리더가 링크로 인지하게 해(063), 시각 장애 사용자도 로그인하게 하죠. 로그인 기능 찾기 서브섹션의 마무리입니다.

정리하면 — 로그인이 <div>+클릭으로 만들어지면 스크린 리더가 링크로 인지 못 해 시각 장애 사용자가 로그인을 못 하므로, 진짜 <a>/<button>으로 구현하고 접근가능한 이름·역할을 줘 링크로 인지하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

진짜 링크·버튼 — 로그인이 <a>/<button>으로 구현되는가(<div> 아님).

접근가능한 이름 — ‘로그인’ 이름이 있는가(레이블·aria-label).

역할·키보드 — 링크/버튼 역할 인지 + 키보드 작동이 되는가(WCAG 4.1.2/2.1.1).

개선 방향

로그인을 진짜 <a>/<button>으로 → 스크린 리더 링크 인지 + 키보드.

접근가능한 이름(‘로그인’), role 지정(커스텀 시). WCAG 4.1.2.

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

역할	책임
퍼블리셔/개발	로그인 링크 시맨틱 구현
QA/접근성	스크린 리더 인지 검증

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

웹접근성 의무 대상이며 로그인을 제공하는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 로그인이 <a>/<button>으로 구현되나요(<div> 아님)?

□ ‘로그인’ 접근가능한 이름이 있나요(레이블·aria-label)?

□ 링크/버튼 역할 인지 + 키보드 작동이 되나요(WCAG 4.1.2/2.1.1)?

❓ FAQ

Q1. 로그인이 링크로 인지 안 되면 왜 심각한가요? 스크린 리더 사용자가 로그인 입구를 못 인지·작동해 로그인 자체를 못 합니다. 그러면 마이페이지·민원·신청 등 개인화 서비스 전체에서 배제되죠. Q2. 어떻게 링크로 인지하게 하나요? 진짜 <a>(링크)/<button>(버튼)으로 구현합니다. 그러면 스크린 리더가 ’로그인 링크’로 인지하고 키보드 작동도 기본 제공되죠. <div>+클릭은 안 됩니다. Q3. 검색 SP-015·016과 같나요? 같은 정신입니다. 핵심 기능(검색·로그인)의 입구를 모든 사용자가 인지·작동하게요. 진짜 시맨틱 요소 + 접근가능한 이름·역할로요.

6. 마무리

SP-063의 메시지:

로그인이 ’링크’로 읽히게 — 로그인 링크를 스크린 리더가 링크로 인지하게 하라.

로그인이 <div>로 만들어지면 스크린 리더가 인지 못 해 시각 장애 사용자가 로그인을 못 합니다. 진짜 링크·버튼으로 인지· 작동하게 하는 게 핵심이죠. ‘로그인 기능 찾기’ 서브섹션이 끝났습니다. 다음 편부터는 ‘로그인 안내’ 서브섹션입니다.

다음 편 예고 ▶ 「738. (SP-064) 로그인에 대한 안내는 모달로 제공하여 사용자의 과업 맥락이 유지될 수 있도록 하고 있다.」

ViewCheck는 로그인 링크가 스크린 리더에서 링크로 인지되는지를 진단합니다.

📚 참고 출처

KRDS 서비스 패턴 — 로그인 가이드 — https://www.krds.go.kr/html/site/service/service_03.html

WCAG 2.1 SC 4.1.2 Name, Role, Value — https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

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

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