Web Accessibility Academy · 강의

첫 번째 오류로 포커스 이동하기

사용자가 수정해야 할 곳으로 바로 안내합니다.

레슨 3/413개 단계

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

제출 후 길을 잃다

사용자가 제출하면 페이지 맨 위에 오류가 표시되지만 포커스는 버튼에 그대로 있습니다. 사용자는 무언가가 실패했다는 사실을 전혀 알 수 없습니다. 😕

문제가 있는 곳으로 포커스 보내기

제출에 실패하면 포커스를 처음으로 유효하지 않은 필드로 이동하세요. 사용자는 수정이 시작되는 정확한 위치에 도착하므로 직접 찾아다닐 필요가 없습니다.

JS에서 focus 사용하기

처음으로 실패한 컨트롤을 찾아 그 컨트롤에서 focus()를 호출하세요. 이제 키보드 사용자와 스크린 리더 사용자 모두 올바른 위치에서 시작합니다.

const first = form.querySelector("[aria-invalid='true']");
if (first) first.focus();

이름, 유형, 오류 읽기

포커스가 해당 위치에 도착하면 스크린 리더는 필드의 이름, 해당 필드가 invalid라는 사실, 그리고 설명된 오류를 한 번에 알립니다.

무작위가 아닌 첫 번째 항목

문서 순서에서 항상 첫 번째 오류를 대상으로 지정하세요. 뒤에 있는 필드로 이동하면 사용자가 여전히 해결해야 하는 문제를 건너뛰게 됩니다.

스크롤만 하지 않기

오류가 보이도록 스크롤하면 마우스 사용자에게는 도움이 되지만, 키보드 사용자와 스크린 리더 사용자에게는 픽셀만 이동하는 것이 아니라 실제 포커스를 이동해야 합니다.

요약 상자 활용하기

오류가 많다면 먼저 맨 위의 오류 요약으로 포커스를 이동하세요. 각 문제를 해당 필드로 이동하는 링크로 나열하세요.

<div tabindex="-1" id="errors">
  3 errors found
</div>

요약을 포커스 가능하게 만들기

heading이나 div는 기본적으로 포커스를 받을 수 없습니다. 스크립트가 프로그래밍 방식으로 포커스를 이동할 수 있도록 tabindex="-1"을 추가하세요.

오류를 필드에 연결하기

요약 안에서 각 항목은 필드의 id로 연결되는 링크입니다. 이 링크를 활성화하면 깨진 입력 필드로 포커스가 곧바로 이동합니다.

<a href="#email">Email is required</a>

너무 일찍 포커스를 빼앗지 않기

사용자가 submit한 것에 응답할 때만 포커스를 이동하고, 키를 입력할 때마다 이동하지 마세요. 입력 중간에 포커스를 빼앗으면 당황스럽고 불쾌합니다.

복구 확인하기

사용자가 모든 문제를 수정하고 다시 제출한 뒤에는 성공 메시지로 포커스를 이동하여 마침내 성공했다는 사실을 들려주세요.

빠른 확인

폼 제출이 실패하면 포커스는 어디로 이동해야 하나요?

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

복습

실패하면 포커스를 처음으로 유효하지 않은 필드나 포커스 가능한 오류 요약으로 이동하고, 성공하면 성공 메시지로 이동하세요. ✅

무료로 시작

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개 중 3번째 강의입니다.

“첫 번째 오류로 포커스 이동하기” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

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