Frontend Academy · 강의

키보드 탐색과 포커스 관리

모든 상호작용 요소에 Tab으로 접근할 수 있게 하고, 대화상자와 라우팅에서 포커스를 프로그래밍 방식으로 관리하며, 포커스 표시기를 눈에 띄게 만듭니다.

레슨 4/414개 단계

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

키보드 탐색이 중요한 이유

많은 사용자는 마우스를 사용할 수 없습니다. 운동 장애가 있는 사용자, 스크린 리더 사용자, 키보드를 선호하는 숙련 사용자가 여기에 포함됩니다. 앱을 키보드로 탐색할 수 없다면 이러한 사용자에게는 제대로 작동하지 않는 것입니다.

Tab과 Shift+Tab

Tab은 다음 상호작용 요소로 focus를 이동합니다. Shift+Tab은 이전 요소로 이동합니다. 기본적으로 순서는 DOM 순서를 따릅니다. 이 동작을 억지로 바꾸지 말고 DOM이 탭 순서가 되도록 하십시오.

기본적으로 focus를 받을 수 있는 요소

기본 상호작용 요소는 focus를 받을 수 있습니다: a[href], button, input, select, textarea, summary. 사용자 지정 요소에는 tabindex가 필요합니다.

tabindex 값

tabindex="0": DOM 위치에서 탭 순서에 포함됩니다. tabindex="-1": JS를 통해서만 focus를 받을 수 있습니다(스크립트 focus는 가능하지만 Tab으로는 불가능). tabindex=">0": 안티 패턴입니다. 혼란스러운 focus 순서를 만들므로 절대 사용하지 마십시오.

<!-- Custom button (still: use real <button>!): -->
<div role="button" tabindex="0" onkeydown="...">Custom</div>

<!-- Programmatically focusable, skipped by Tab: -->
<div tabindex="-1" id="error-summary"></div>

눈에 보이는 focus 표시기

대체 수단을 제공하지 않고 focus 윤곽선을 제거하지 마십시오. WCAG는 focus를 받을 수 있는 모든 요소에 눈에 보이는 표시기를 요구합니다.

/* BAD: hides focus for everyone */
*:focus { outline: none; }

/* GOOD: only show focus from keyboard (not mouse click) */
:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

:focus-visible

:focus-visible 의사 클래스는 마우스 클릭이 아니라 키보드로 focus가 이동했을 때만 적용됩니다. 마우스 스타일은 깔끔하게 유지하면서 키보드 focus는 표시할 수 있습니다.

콘텐츠로 건너뛰기 링크

첫 번째로 focus를 받을 수 있는 요소는 건너뛰기 링크여야 합니다. 그러면 키보드 사용자가 머리글 탐색을 건너뛰고 바로 주요 콘텐츠로 이동할 수 있습니다.

<a href="#main" class="skip-link">Skip to main content</a>
...
<main id="main" tabindex="-1">...</main>

/* CSS */
.skip-link {
  position: absolute; left: -10000px;
}
.skip-link:focus {
  left: 1rem; top: 1rem;
  background: white; padding: 0.5rem 1rem;
}

모달의 focus 가두기

모달이 열리면 focus를 모달 안에 가두어야 합니다. 마지막 요소에서 Tab을 누르면 첫 번째 요소로 순환하고, 첫 번째 요소에서 Shift+Tab을 누르면 마지막 요소로 순환해야 합니다. Escape 키를 누르면 모달이 닫혀야 합니다.

// On modal open:
modal.querySelector('h2').focus(); // move focus into modal
lastFocused = document.activeElement;

// On Tab in modal: detect leaving and wrap to first focusable.
// On Escape: close modal and restore focus:
lastFocused.focus();

dialog 요소 사용

HTML의 기본 <dialog>는 focus 가두기, Escape 키로 닫기, 모달 배경을 자동으로 처리합니다.

<dialog id="signup">
  <h2>Sign up</h2>
  <form method="dialog">
    <input name="email" required>
    <button>Submit</button>
    <button value="cancel">Cancel</button>
  </form>
</dialog>

<script>
  document.getElementById('signup').showModal(); // opens with focus trap
</script>

경로 변경 후 focus 관리

SPA는 페이지를 다시 로드하지 않으므로 스크린 리더 사용자는 탐색이 일어났다는 신호를 받지 못합니다. 경로가 변경되면 focus를 새 페이지의 h1 또는 main으로 이동하십시오.

// On route change:
document.getElementById('main')?.focus();
// or focus the new h1:
newPage.querySelector('h1')?.setAttribute('tabindex', '-1');
newPage.querySelector('h1')?.focus();

focus 순서는 시각적 순서와 일치해야 합니다

DOM 순서가 시각적 흐름과 일치하는지 확인하십시오. CSS가 요소의 순서를 바꾸면(flex order, grid 배치, position absolute) 탭 순서가 일치하지 않아 모두에게 혼란을 줍니다.

마우스를 치우고 테스트

가장 유용한 접근성 테스트는 마우스를 분리한 뒤 Tab, Shift+Tab, Enter, Space, 화살표 키만으로 앱 전체를 사용해 보는 것입니다. 여러분이 막히면 사용자도 막힙니다.

빠른 확인

마우스 클릭이 아니라 키보드로 focus가 이동했을 때만 focus 윤곽선의 스타일을 지정할 수 있는 CSS 의사 클래스는 무엇입니까?

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

복습: 키보드 탐색

기본 상호작용 요소는 기본적으로 focus를 받을 수 있습니다. 사용자 지정 위젯에는 tabindex=0만 사용하고 tabindex>0은 절대 사용하지 마십시오. 항상 focus를 표시하십시오. :focus-visible을 사용하면 됩니다. 콘텐츠로 건너뛰기 링크를 추가하십시오. 모달에서는 focus를 가두고 닫을 때 복원하십시오. 가능하면 기본 <dialog>를 사용하십시오. 경로가 변경되면 focus를 h1/main으로 이동하십시오. 마우스를 치우고 테스트하십시오.

무료로 시작

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

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

코스: 41
레슨: 163

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

자주 묻는 질문

“키보드 탐색과 포커스 관리” 강의는 무료인가요?

네 — “키보드 탐색과 포커스 관리” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“키보드 탐색과 포커스 관리”에서 뭘 배우나요?

모든 상호작용 요소에 Tab으로 접근할 수 있게 하고, 대화상자와 라우팅에서 포커스를 프로그래밍 방식으로 관리하며, 포커스 표시기를 눈에 띄게 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“키보드 탐색과 포커스 관리” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← Frontend Academy(으)로 돌아가기