Web Accessibility Academy · 강의

페이지를 새로 고치지 않고 경로 변경하기

경로가 바뀔 때 탐색을 알리고 포커스를 이동합니다.

레슨 1/413개 단계

페이지를 새로 고치지 않고 경로 변경하기은(는) CoddyKit의 무료 Web Accessibility Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Web Accessibility Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Web Accessibility Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

소리 없는 탐색 문제

SPA에서는 링크를 클릭하면 전체를 다시 로드하지 않고 콘텐츠만 바뀝니다. 화면 읽기 프로그램에는 아무 일도 일어나지 않은 것처럼 보여 새 페이지에 대해 아무것도 알리지 않습니다. 🤫

전체 다시 로드가 쉬웠던 이유

실제 페이지 로드는 포커스를 초기화하고 화면 읽기 프로그램이 새 제목을 읽게 합니다. 클라이언트 측 라우팅은 이 모든 과정을 건너뛰므로 이러한 단서를 직접 재현해야 합니다.

문서 제목 업데이트하기

경로가 바뀔 때마다 document.title을 새 화면에 맞게 설정합니다. 많은 화면 읽기 프로그램은 제목이 바뀌면 이를 읽어 사용자에게 현재 위치를 알려 줍니다.

useEffect(() => {
  document.title = 'Settings - MyApp';
}, [location.pathname]);

탐색할 때 포커스 이동하기

라우팅이 끝나면 포커스를 새 콘텐츠의 맨 위, 보통 주요 제목으로 보냅니다. 이렇게 하면 키보드와 화면 읽기 프로그램 사용자가 페이지가 바뀌었다는 것을 알 수 있습니다.

제목 또는 주요 영역에 포커스 주기

대상에 tabindex of -1을 지정하여 Tab 순서에는 포함하지 않고 스크립트로 포커스를 받을 수 있게 합니다. 그런 다음 경로가 업데이트된 후 대상에서 .focus()를 호출합니다.

<h1 tabindex="-1" ref={headingRef}>Settings</h1>

라이브 영역으로 알리기

또 다른 방법은 Navigated to Settings와 같은 텍스트를 채우는 시각적으로 숨겨진 라이브 영역을 사용하는 것입니다. 포커스를 이동하지 않고 화면 읽기 프로그램이 이를 읽습니다.

<div aria-live="polite" className="sr-only">{message}</div>

두 가지가 아닌 한 가지 전략 선택하기

focus를 이동하는 방법과 라이브 영역에서 알리는 방법 모두 사용할 수 있습니다. 두 가지를 동시에 사용하면 이중 알림이 발생할 수 있으므로, 앱마다 한 가지 방법을 선택하고 일관되게 유지하시기 바랍니다.

타이밍이 중요합니다

새 뷰가 렌더링된 후에 focus를 이동하거나 알림을 실행하시기 바랍니다. React에서는 경로에 의존하는 효과가 DOM이 업데이트된 후 한 번 실행됩니다.

작업 중간에 focus를 강제로 이동하지 마세요

사소한 화면 내 업데이트가 아니라 실제 경로 변경이 있을 때만 focus를 이동하시기 바랍니다. 사용자가 작업을 수행하는 중에 focus를 빼앗으면 당황스럽고 혼란스러울 수 있습니다.

라우터 라이브러리가 도움을 줄 수 있습니다

일부 라우터는 경로 변경을 위한 훅을 제공합니다. React Router는 useLocation을 제공하므로, 효과가 경로가 실제로 변경될 때마다 반응할 수 있습니다.

const location = useLocation();
useEffect(() => focusMain(), [location.pathname]);

사용자처럼 테스트하세요

스크린 리더를 켜고 탐색 메뉴를 클릭해 보면서 들어 보시기 바랍니다. 경로 변경이 알려지고 focus가 적절한 위치에 놓인다면 SPA 탐색은 접근성을 갖춘 것입니다.

빠른 확인

스크린 리더 사용자가 SPA 링크를 클릭했지만 아무런 변화도 듣지 못합니다. 가장 가능성 높은 원인은 무엇일까요?

인터랙티브 레슨에서 답해보세요

복습: 경로를 알리기

SPA 탐색은 사용자가 들을 수 있도록 만들기 전까지 보이지 않습니다. title을 업데이트한 다음 focus를 이동하거나 라이브 영역을 사용하여 페이지가 변경되었음을 모두에게 알리시기 바랍니다. ✅

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 30
레슨: 120

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“페이지를 새로 고치지 않고 경로 변경하기” 강의는 무료인가요?

네 — “페이지를 새로 고치지 않고 경로 변경하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Web Accessibility Academy 강의 전체를 잠금 해제할 수 있습니다. Web Accessibility Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“페이지를 새로 고치지 않고 경로 변경하기”에서 뭘 배우나요?

경로가 바뀔 때 탐색을 알리고 포커스를 이동합니다. 브라우저에서 직접 실행하는 실습 코드로 Web Accessibility Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Web Accessibility Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Web Accessibility Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“페이지를 새로 고치지 않고 경로 변경하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Web Accessibility Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Web Accessibility Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Web Accessibility Academy(으)로 돌아가기