새 화면은 처음부터 읽게

KRDS SP-089 — 로그인 완료 후 화면이 로딩되었을 때 키보드 및 스크린 리더 초점은 문서 가장 처음부터 접근하도록 구현되어 있다.

0. 들어가며 — 로그인 완료 서브섹션의 마지막

이번 763편은 로그인 완료 후 화면이 로딩되었을 때 키보드 및 스크린 리더 초점은 문서 가장 처음부터 접근하도록 구현 하라는 규칙입니다. ‘로그인 완료’ 서브섹션(SP-087~089)의 마지막이죠.

로그인 후 새 화면이 떴는데 — 초점이 엉뚱한 데 있거나 이전 화면에 남아 있으면, 키보드·스크린 리더 사용자가 혼란스럽죠. SP-089는 초점을 문서 처음부터로 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 로그인 후 초점 문서 처음

SP-089 (서비스 패턴 > 로그인 > 로그인 완료) “로그인 완료 후 화면이 로딩되었을 때 키보드 및 스크린 리더 초점은 문서 가장 처음부터 접근하도록 구현되어 있다.”

로그인 후 새 화면의 초점을 문서 가장 처음부터 접근하게 하라는 뜻입니다.

정리: 로그인 후 새 화면 초점을 문서 처음부터로 하라. 이게 SP-089입니다.

2. 왜 초점 문서 처음인가

로그인이 완료되면, 새 화면(원래 가려던 화면 SP-087, 또는 마이페이지)이 로딩됩니다. 이때 키보드·스크린 리더 초점이 어디 있느냐가 중요하죠. SP-089는 초점을 문서 가장 처음부터로 하라고 합니다.

초점이 적절하지 않을 때의 문제:

초점 이전 화면 잔류 로그인 후 새 화면이 떴는데, 초점이 이전(로그인 폼) 화면에 남아 있거나 사라지면, 키보드·스크린 리더 사용자는 새 화면을 어디서부터 봐야 할지 모릅니다.

새 화면 인지 못 함 스크린 리더 사용자는, 초점이 새 화면 처음에 없으면, 새 화면이 떴는지·무슨 화면인지 모릅니다.

그래서 SP-089는 — 초점 문서 처음을 요구합니다:

문서 처음부터 로그인 후 새 화면이 로딩되면, 키보드·스크린 리더 초점을 문서의 가장 처음(또는 주요 랜드마크·제목)으로 보냅니다. 사용자가 새 화면을 처음부터 순서대로 인지·탐색하게요.

새 화면 인지 초점이 처음에 있으면, 스크린 리더가 새 화면의 제목·내용을 처음부터 읽어, 사용자가 무슨 화면인지 알죠. 로그인 상태 전환(SP-088)도 인지하고요.

페이지 전환의 초점 관리 페이지가 전환될 때(로그인 → 새 화면), 초점 관리가 중요합니다. 새 화면 로딩 시 초점을 적절히(문서 처음·주요 콘텐츠) 보내는 게 표준 접근성 패턴이죠.

SPA·동적 전환 주의. 단일 페이지 앱(SPA)에서, 로그인 후 화면을 동적으로 바꾸면(전체 새로고침 없이), 초점이 자동으로 처음에 안 갑니다(브라우저 기본 동작이 안 일어남). 그래서 명시적으로 초점을 새 화면 처음·제목으로 보내야 하죠(focus 관리). 전통 페이지 로드는 자동이지만, SPA는 직접 관리해야 합니다.

WCAG 연계. 초점 관리(2.4.3 초점 순서)·페이지 전환 접근성과 연결됩니다. 새 화면 진입 시, 사용자가 처음 부터 접근하게 초점을 둬야, 키보드·스크린 리더 사용자가 길을 잃지 않죠.

로그인 후 접근성의 마무리. SP-087(적합 화면 이동)·SP-088(상태 표현)·SP-089(초점 처음)가 함께 로그인 완료의 접근성을 완성합니다. 원래 화면으로 가고(087), 상태를 알리고(088), 새 화면을 처음부터 인지(089)하게요.

이 규칙은 로그인(SP)의 ’로그인 후 초점 관리’를 담당합니다 — 로그인 후 초점을 문서 처음부터로 해(089), 키보드·스크린 리더 사용자가 새 화면을 처음부터 인지·탐색하게 하죠. 로그인 완료 서브섹션의 마무리입니다.

정리하면 — 로그인 후 새 화면 초점이 이전에 남거나 사라지면 키보드·스크린 리더 사용자가 혼란스러우므로, 초점을 문서 가장 처음(또는 주요 제목)부터 접근하게 구현해야 합니다(SPA는 명시적 초점 관리).

3. 점검 / 개선

무엇을 점검하나

초점 문서 처음 — 로그인 후 새 화면 초점이 문서 처음·주요 제목에 가는가.

새 화면 인지 — 스크린 리더가 새 화면을 처음부터 읽는가.

SPA 초점 관리 — SPA면 명시적으로 초점을 새 화면 처음으로 보내는가.

개선 방향

로그인 후 새 화면 초점을 문서 처음·주요 제목으로(focus 관리).

SPA는 동적 전환 시 명시적 초점 이동. WCAG 2.4.3 초점 관리.

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

역할	책임
개발	페이지 전환 초점 관리 구현
QA/접근성	로그인 후 초점 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 로그인 후 새 화면 초점이 문서 처음·주요 제목에 가나요?

□ 스크린 리더가 새 화면을 처음부터 읽나요?

□ SPA면 명시적으로 초점을 새 화면 처음으로 보내나요?

❓ FAQ

Q1. 초점이 이전 화면에 남으면 왜 문제인가요? 로그인 후 새 화면이 떴는데 초점이 이전(로그인 폼)에 남거나 사라지면, 키보드·스크린 리더 사용자가 새 화면을 어디서부터 봐야 할지 모릅니다. 새 화면이 떴는지도 모르죠. Q2. SPA는 왜 직접 관리해야 하나요? SPA는 전체 새로고침 없이 화면을 바꿔, 초점이 자동으로 처음에 안 갑니다(브라우저 기본 동작 안 일어남). 명시적으로 초점을 새 화면 처음·제목으로 보내야 하죠. Q3. SP-087·088과 어떻게 연결되나요? SP-087(적합 화면 이동)·SP-088(상태 표현)·SP-089(초점 처음)가 함께 로그인 완료 접근성을 완성합니다. 원래 화면으로 가고·상태 알리고·처음부터 인지하게요.

6. 마무리

SP-089의 메시지:

새 화면은 처음부터 읽게 — 로그인 후 초점을 문서 가장 처음부터로 하라.

로그인 후 초점이 이전에 남거나 사라지면 키보드·스크린 리더 사용자가 혼란스럽습니다. 초점을 문서 처음부터로 해 새 화면을 처음부터 인지하게 하는 게 핵심이죠. ‘로그인 완료’ 서브섹션이 끝났습니다. 다음 편부터는 ‘서비스 이용’(세션) 서브섹션 입니다.

다음 편 예고 ▶ 「764. (SP-090) 사용자에게 로그인 세션이 만료되기 전에 유지 시간에 제한이 있음을 안내하고 있다.」

ViewCheck는 로그인 후 초점이 문서 처음부터 접근하는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 2.4.3 Focus Order — https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html

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

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