웹 퍼블리싱웹 퍼블리싱 · 중급

웹 접근성 기초 점검: 키보드 순서·초점 표시·확대 화면을 직접 확인하는 체크리스트

2026.09.12·수정 2026.09.14·약 29분·작성: 해비·블로그 소개
작성자:

웹 접근성 기초 점검: 키보드 순서·초점 표시·확대 화면을 직접 확인하는 체크리스트 대표 일러스트

이 글에서 만드는 것

키보드 이동 순서와 초점 표시, 입력 레이블, 200% 확대와 좁은 화면 리플로를 실패·수정 예제로 비교하고 직접 점검 결과를 기록합니다.

키보드 이동 순서, 보이는 초점과 입력 레이블, 화면 확대 후 콘텐츠 배치를 차례로 확인합니다.
키보드 이동 순서, 보이는 초점과 입력 레이블, 화면 확대 후 콘텐츠 배치를 차례로 확인합니다.

시작·완성 실습 파일 ZIP 내려받기

1. “자동 검사 통과”와 “직접 사용할 수 있음”을 나눕니다

이번 실습은 이미 만든 페이지를 키보드와 확대 화면으로 점검하는 방법입니다. 화면이 그럴듯하게 보여도 초점이 사라지거나 입력 이름표가 없거나 글자가 잘릴 수 있습니다. starter에는 일부러 세 가지 문제를 넣었습니다. 고정 폭 900px, 초점 윤곽 제거, placeholder만 있는 입력입니다. 이 실패용 파일을 실제 서비스에 배포하지 마세요.

complete는 이 문제를 수정한 작은 페이지입니다. 모든 장애 유형, 보조기술, WCAG 성공 기준을 검사한 인증 예제가 아닙니다. 아래 항목은 검증 절차이며 이 글이 독자의 환경에서 검사를 완료했다는 뜻도 아닙니다.

2. 점검 전에 환경과 기대 동작을 적습니다

브라우저와 운영체제, 버전, 창의 콘텐츠 영역 폭, 확대 배율을 기록하세요. 브라우저 설정에 따라 Tab이 이동하는 대상이 달라질 수 있으므로 키보드 탐색 옵션도 확인합니다. 처음에는 화면 읽기 프로그램을 끄고 일반 브라우저 조작을 점검합니다. 이후 보조기술을 켜서 이름과 구조가 전달되는지 별도로 확인합니다.

  • 예상 순서: 본문 건너뛰기 → 입력 연습 메뉴 → 도움말 메뉴 → 가상 닉네임 → 입력 초기화 → FAQ 제목 → 입력 연습으로 돌아가기.
  • 이동 링크는 Enter, 버튼은 Enter 또는 Space, details 제목은 Enter 또는 Space로 확인합니다.
  • Tab은 다음 조작 요소로, Shift+Tab은 이전 조작 요소로 돌아갑니다. 링크의 목적지 이동 후 순서가 이어지는지도 봅니다.

3. 마우스 없이 초점을 따라갑니다

페이지를 다시 불러온 뒤 Tab을 한 번씩 누릅니다. 현재 선택한 요소를 눈으로 찾을 수 있어야 합니다. complete의 :focus-visible은 어두운 윤곽과 바깥 간격을 둡니다. 초점만 가려진 문제를 색을 바꾸는 것만으로 고치지 말고 outline: none 같은 제거 규칙부터 찾으세요. 이 샘플의 3px 윤곽은 구현 선택이며 모든 환경에서 기준을 충족한다는 수치 보증이 아닙니다.

공식 참고: WCAG 2.2, 2.4.7 Focus Visible

다음은 실패와 수정을 비교하는 부분 CSS입니다. 실패 규칙을 완성 파일에 함께 넣지 마세요.

/* 실패 비교용: 키보드 위치를 지웁니다. */
:focus { outline: none; }

/* 수정 예시: 키보드 초점을 표시합니다. */
:focus-visible { outline: 3px solid #111; outline-offset: 3px; }

양수 tabindex로 화면 순서를 강제로 맞추기보다 HTML의 순서를 읽는 순서에 맞춥니다. 본문 건너뛰기 링크는 반복 메뉴를 지나갈 수 있게 돕습니다. 링크 목적지의 tabindex=”-1″은 스크립트나 앵커 이동으로 초점을 받을 수 있게 하되 일반 Tab 항목을 늘리지 않습니다.

4. 레이블과 기본 요소를 점검합니다

placeholder는 사용자가 입력하면 사라집니다. 화면에 계속 남는 label과 입력 id를 연결하세요. 이 예제는 제출 기능이 없고 textarea에서 Enter는 줄바꿈합니다. 초기화 버튼은 type=”reset”으로 지정합니다. FAQ는 details와 summary로 구성해 기본 키보드 동작을 사용합니다. 클릭 이벤트가 있는 div를 버튼처럼 다루는 실습은 하지 않습니다.

이름표를 클릭했을 때 입력으로 초점이 오는지 확인하는 것은 레이블 연결을 확인하는 한 방법입니다. 그러나 화면 읽기 프로그램에서 그 입력 이름이 실제로 어떻게 읽히는지까지 증명하지는 않습니다. 접근성 트리와 실제 보조기술 조작을 구분해서 기록하세요.

5. 글자 확대와 좁은 화면 리플로를 따로 봅니다

WCAG 1.4.4는 자막과 이미지 속 텍스트의 예외를 두고, 텍스트를 200%까지 확대할 때 내용·기능 손실이 없어야 한다고 설명합니다. 브라우저의 페이지 확대를 사용해 입력, 버튼, FAQ 내용을 확인하고, 텍스트만 확대 기능이 있는 환경에서는 그 방식도 별도 확인해 보세요. 확대 후 글자가 커졌는지만 보지 말고 잘림·겹침·조작 손실을 찾습니다.

공식 참고: WCAG 2.2, 1.4.4 Resize Text

세로로 읽는 일반 페이지의 리플로 기준은 320 CSS 픽셀에 해당하는 폭에서 의미나 기능을 잃지 않고 두 방향 스크롤 없이 읽는지입니다. 이는 시작 콘텐츠 영역 폭 1280 CSS 픽셀을 400%로 확대한 경우와 대응합니다. 임의의 창에서 400%만 설정하면 항상 320 CSS 픽셀이 되는 것은 아닙니다. 개발자 도구의 좁은 뷰포트 확인과 실제 브라우저 확대는 둘 다 유용하지만 같은 검사는 아닙니다.

의미상 2차원 배치가 필요한 지도·데이터 표 등에는 예외가 있습니다. 이 작은 예제의 문단과 폼에는 그런 예외가 필요하지 않습니다. 전체 페이지에 overflow-x: hidden을 추가해 잘린 내용을 감추지 마세요.

공식 참고: WCAG 2.2, 1.4.10 Reflow

6. 보조기술 점검은 별도 작업으로 남깁니다

가능한 환경에서 화면 읽기 프로그램을 켜고 페이지 제목, 주 영역, 제목 계층, 링크 이름, 입력 이름과 설명, FAQ의 펼침 상태를 확인합니다. 해당 보조기술의 문서 탐색·폼 조작 명령을 사용하세요. 브라우저에서 방향키가 스크롤하던 동작이 읽기 모드에서는 문장 탐색이 될 수 있습니다. 키보드로 페이지를 사용할 수 있었다는 결과와 보조기술로 의미를 이해할 수 있었다는 결과는 따로 적어야 합니다.

7. starter 수정 과제와 기록 양식

  • 고정 width: 900px를 가변 폭과 최대 폭으로 바꾸고 320px 화면에서 문단·입력이 넘치지 않는지 봅니다.
  • outline 제거를 삭제하고 :focus-visible을 추가해 모든 링크·버튼·입력·summary를 순서대로 점검합니다.
  • placeholder만 있는 입력에 지속적으로 보이는 label과 설명 연결을 추가합니다.
  • 본문 건너뛰기 링크를 추가하고 첫 Tab에서 나타나며 Enter로 본문에 이동하는지 확인합니다.
  • 200% 확대와 320 CSS 픽셀 리플로를 각각 기록하고, 가능하면 시작 폭 1280에서 400% 확대도 비교합니다.
직접 작성할 점검 기록
항목 기대 결과 기록할 내용
키보드 이동 논리적 순서, 초점 표시, 빠져나오기 가능 브라우저·버전·실제 순서·문제 위치
200% 확대 글자·기능 손실 없음 확대 방식·겹침·잘림 여부
320px 리플로 일반 본문과 폼의 전체 가로 스크롤 없음 실제 콘텐츠 폭·넘치는 요소
보조기술 이름·역할·상태 이해 가능 도구·버전·읽기 결과 또는 미실시

8. 여기서 확인하지 않은 것도 명시합니다

이 실습은 색 대비 전체, 오류 메시지 처리, 동적 상태 알림, 동영상 자막, 모든 입력 장치나 브라우저 조합까지 검사하지 않습니다. “키보드·확대 기초 항목을 확인했다”처럼 실제 범위만 적으세요. 추가 과제는 앞서 만든 서비스 안내 페이지에 같은 기록 양식을 적용하고, 발견한 문제 한 개의 원인과 수정 전후 결과를 설명하는 것입니다.

완성 코드: complete/index.html 전체

아래 코드는 부분 예제가 아니라 HTML 파일 전체입니다. 같은 폴더에 이어지는 style.css를 저장하세요.

실습 파일

파일 경로를 확인하고 같은 프로젝트 안에 저장하세요. 이미지 등 소스 목록에 없는 파일과 실행 안내는 실습 ZIP에 포함되어 있습니다.

키보드 초점과 문서 순서를 보완하고 확대 화면에서도 내용을 읽을 수 있게 합니다. 수정 전은 시작 상태, 수정 후는 비교할 완성 상태입니다.

수정 전

index.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>
      웹 접근성 기초 점검: 키보드 순서·초점 표시·확대 화면을 직접 확인하는 체크리스트
    </title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header class="site-header">
      <p>접근성 점검 연습</p>
      <nav aria-label="주요 메뉴">
        <a href="#form-section">입력 연습</a> <a href="#faq">도움말</a>
      </nav>
    </header>
    <main id="main">
      <h1>수정할 점을 찾아보세요</h1>
      <p>
        연습용으로 가로 고정 폭과 초점 표시 제거가 들어 있습니다. 실제 배포에 사용하지
        마세요.
      </p>
      <section id="form-section">
        <h2>입력 연습</h2>
        <p>전송·저장 기능이 없습니다. 가상 값만 입력하세요.</p>
        <form>
          <textarea id="nickname" rows="2" placeholder="가상 닉네임"></textarea
          ><button type="reset">입력 초기화</button>
        </form>
      </section>
      <section id="faq">
        <h2>도움말</h2>
        <details>
          <summary>이 화면의 문제는 무엇인가요?</summary>
          <p>
            키보드 초점이 보이는지, 입력 이름표가 있는지, 좁은 화면에서 가로로 넘치는지
            확인하세요.
          </p>
        </details>
      </section>
    </main>
  </body>
</html>

style.css

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.7;
  color: #222;
  background: #f1f1f1;
}
main,
.site-header {
  width: 900px;
  padding: 1.5rem;
  margin-inline: auto;
}
a {
  color: #222;
}
/* 학습용 실패 상태: complete의 초점 표시와 비교하세요. */
:focus {
  outline: none;
}
textarea {
  display: block;
  width: 100%;
  font: inherit;
  border: 1px solid #666;
}
button {
  font: inherit;
  border: 1px solid #555;
  background: #ddd;
  color: #222;
}
details {
  border: 1px solid #777;
  padding: 1rem;
}

수정 방법

index.html

index.html에서 아래 차이가 있는 위치를 수정하세요. -는 삭제할 줄, +는 추가할 줄이며 표시는 실제 코드에 넣지 않습니다.

키보드 초점과 문서 순서를 보완하고 확대 화면에서도 내용을 읽을 수 있게 합니다.

--- 수정 전/index.html
+++ 수정 후/index.html
@@ -9,36 +9,46 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
+    <a class="skip-link" href="#main">본문으로 건너뛰기</a>
     <header class="site-header">
-      <p>접근성 점검 연습</p>
+      <p><strong>접근성 점검 연습</strong></p>
       <nav aria-label="주요 메뉴">
         <a href="#form-section">입력 연습</a> <a href="#faq">도움말</a>
       </nav>
     </header>
-    <main id="main">
-      <h1>수정할 점을 찾아보세요</h1>
-      <p>
-        연습용으로 가로 고정 폭과 초점 표시 제거가 들어 있습니다. 실제 배포에 사용하지
-        마세요.
+    <main id="main" tabindex="-1">
+      <h1>키보드와 확대 화면을 점검합니다</h1>
+      <p class="notice">
+        가상의 닉네임만 입력하세요. 이 페이지는 전송·저장 기능이 없는 점검용 예제입니다.
       </p>
-      <section id="form-section">
-        <h2>입력 연습</h2>
-        <p>전송·저장 기능이 없습니다. 가상 값만 입력하세요.</p>
+      <section id="form-section" aria-labelledby="form-title">
+        <h2 id="form-title">입력 연습</h2>
         <form>
-          <textarea id="nickname" rows="2" placeholder="가상 닉네임"></textarea
-          ><button type="reset">입력 초기화</button>
+          <label for="nickname">가상 닉네임</label>
+          <textarea id="nickname" rows="2" aria-describedby="nickname-help"></textarea>
+          <p id="nickname-help">예: 연습생. Enter는 줄바꿈하며 제출하지 않습니다.</p>
+          <button type="reset">입력 초기화</button>
         </form>
       </section>
-      <section id="faq">
-        <h2>도움말</h2>
+      <section id="faq" aria-labelledby="faq-title">
+        <h2 id="faq-title">도움말</h2>
         <details>
-          <summary>이 화면의 문제는 무엇인가요?</summary>
+          <summary>키보드로 어떻게 확인하나요?</summary>
           <p>
-            키보드 초점이 보이는지, 입력 이름표가 있는지, 좁은 화면에서 가로로 넘치는지
-            확인하세요.
+            Tab으로 다음 조작 요소, Shift+Tab으로 이전 요소로 이동합니다. 이 제목에
+            초점이 있을 때 Enter 또는 Space로 내용을 열고 닫아 보세요.
           </p>
         </details>
+        <p>
+          아래 문장은 확대 시 줄이 늘어나는지 확인하는 긴 문장입니다. 글자를 크게
+          보더라도 내용이 상자 밖에서 잘리거나 다른 요소와 겹치지 않아야 하며 필요한
+          조작에 계속 접근할 수 있어야 합니다.
+        </p>
+        <a href="#form-section">입력 연습으로 돌아가기</a>
       </section>
     </main>
+    <footer class="site-footer">
+      <p>실습 결과와 사용 환경을 별도 기록해 주세요.</p>
+    </footer>
   </body>
 </html>

수정 후 탭의 전체 파일과 비교한 뒤 본문의 확인 절차를 실행하세요.

style.css

style.css에서 아래 차이가 있는 위치를 수정하세요. -는 삭제할 줄, +는 추가할 줄이며 표시는 실제 코드에 넣지 않습니다.

키보드 초점과 문서 순서를 보완하고 확대 화면에서도 내용을 읽을 수 있게 합니다.

--- 수정 전/style.css
+++ 수정 후/style.css
@@ -1,39 +1,99 @@
 * {
   box-sizing: border-box;
 }
+html {
+  color: #222;
+  background: #f1f1f1;
+  font-family: system-ui, sans-serif;
+}
 body {
   margin: 0;
-  font-family: system-ui, sans-serif;
   line-height: 1.7;
-  color: #222;
-  background: #f1f1f1;
+}
+input {
+  accent-color: #555;
 }
 main,
-.site-header {
-  width: 900px;
+.site-header,
+.site-footer {
+  width: min(70rem, 100%);
+  margin-inline: auto;
   padding: 1.5rem;
-  margin-inline: auto;
+}
+h1,
+h2,
+h3,
+p {
+  margin-top: 0;
 }
 a {
   color: #222;
+  text-underline-offset: 0.2em;
 }
-/* 학습용 실패 상태: complete의 초점 표시와 비교하세요. */
-:focus {
-  outline: none;
+:focus-visible {
+  outline: 3px solid #111;
+  outline-offset: 3px;
+}
+section {
+  margin-block: 2rem;
+}
+.notice {
+  padding: 1rem;
+  background: #e5e5e5;
+  border: 1px solid #666;
+}
+
+.skip-link {
+  position: absolute;
+  top: -8rem;
+  left: 1rem;
+  padding: 0.75rem;
+  border: 2px solid #222;
+  background: #fff;
+}
+.skip-link:focus {
+  position: fixed;
+  top: 1rem;
+  z-index: 10;
+}
+nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+form {
+  max-width: 36rem;
+}
+label {
+  display: block;
+  font-weight: 700;
 }
 textarea {
   display: block;
   width: 100%;
+  padding: 0.75rem;
   font: inherit;
+  color: #222;
+  background: #fff;
   border: 1px solid #666;
+  resize: vertical;
 }
 button {
+  padding: 0.75rem 1rem;
   font: inherit;
+  color: #222;
+  background: #ddd;
   border: 1px solid #555;
-  background: #ddd;
-  color: #222;
 }
 details {
+  padding: 1rem;
   border: 1px solid #777;
-  padding: 1rem;
+  background: #fff;
 }
+summary {
+  cursor: pointer;
+  font-weight: 700;
+}
+details p {
+  margin-block: 0.75rem 0;
+}

수정 후 탭의 전체 파일과 비교한 뒤 본문의 확인 절차를 실행하세요.

수정 후

index.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>
      웹 접근성 기초 점검: 키보드 순서·초점 표시·확대 화면을 직접 확인하는 체크리스트
    </title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <a class="skip-link" href="#main">본문으로 건너뛰기</a>
    <header class="site-header">
      <p><strong>접근성 점검 연습</strong></p>
      <nav aria-label="주요 메뉴">
        <a href="#form-section">입력 연습</a> <a href="#faq">도움말</a>
      </nav>
    </header>
    <main id="main" tabindex="-1">
      <h1>키보드와 확대 화면을 점검합니다</h1>
      <p class="notice">
        가상의 닉네임만 입력하세요. 이 페이지는 전송·저장 기능이 없는 점검용 예제입니다.
      </p>
      <section id="form-section" aria-labelledby="form-title">
        <h2 id="form-title">입력 연습</h2>
        <form>
          <label for="nickname">가상 닉네임</label>
          <textarea id="nickname" rows="2" aria-describedby="nickname-help"></textarea>
          <p id="nickname-help">예: 연습생. Enter는 줄바꿈하며 제출하지 않습니다.</p>
          <button type="reset">입력 초기화</button>
        </form>
      </section>
      <section id="faq" aria-labelledby="faq-title">
        <h2 id="faq-title">도움말</h2>
        <details>
          <summary>키보드로 어떻게 확인하나요?</summary>
          <p>
            Tab으로 다음 조작 요소, Shift+Tab으로 이전 요소로 이동합니다. 이 제목에
            초점이 있을 때 Enter 또는 Space로 내용을 열고 닫아 보세요.
          </p>
        </details>
        <p>
          아래 문장은 확대 시 줄이 늘어나는지 확인하는 긴 문장입니다. 글자를 크게
          보더라도 내용이 상자 밖에서 잘리거나 다른 요소와 겹치지 않아야 하며 필요한
          조작에 계속 접근할 수 있어야 합니다.
        </p>
        <a href="#form-section">입력 연습으로 돌아가기</a>
      </section>
    </main>
    <footer class="site-footer">
      <p>실습 결과와 사용 환경을 별도 기록해 주세요.</p>
    </footer>
  </body>
</html>

style.css

* {
  box-sizing: border-box;
}
html {
  color: #222;
  background: #f1f1f1;
  font-family: system-ui, sans-serif;
}
body {
  margin: 0;
  line-height: 1.7;
}
input {
  accent-color: #555;
}
main,
.site-header,
.site-footer {
  width: min(70rem, 100%);
  margin-inline: auto;
  padding: 1.5rem;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
a {
  color: #222;
  text-underline-offset: 0.2em;
}
:focus-visible {
  outline: 3px solid #111;
  outline-offset: 3px;
}
section {
  margin-block: 2rem;
}
.notice {
  padding: 1rem;
  background: #e5e5e5;
  border: 1px solid #666;
}

.skip-link {
  position: absolute;
  top: -8rem;
  left: 1rem;
  padding: 0.75rem;
  border: 2px solid #222;
  background: #fff;
}
.skip-link:focus {
  position: fixed;
  top: 1rem;
  z-index: 10;
}
nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
form {
  max-width: 36rem;
}
label {
  display: block;
  font-weight: 700;
}
textarea {
  display: block;
  width: 100%;
  padding: 0.75rem;
  font: inherit;
  color: #222;
  background: #fff;
  border: 1px solid #666;
  resize: vertical;
}
button {
  padding: 0.75rem 1rem;
  font: inherit;
  color: #222;
  background: #ddd;
  border: 1px solid #555;
}
details {
  padding: 1rem;
  border: 1px solid #777;
  background: #fff;
}
summary {
  cursor: pointer;
  font-weight: 700;
}
details p {
  margin-block: 0.75rem 0;
}

index.html 전체 코드 보기

완성 코드: complete/style.css 전체

style.css 전체 코드 보기

이 글이 도움이 되었나요?

조회 중

웹 퍼블리싱 학습 순서

학습 시작 · 첫 글부터 읽기전체 학습 경로

필수 13개 · 전체 15개

읽음 기록 관리

전체 과정 목차 (15개)
  1. 필수 학습 · HTML 입문: 시맨틱 문서와 접근 가능한 폼 만들기
  2. 필수 학습 · CSS 입문: 박스 모델·선택자·캐스케이드 직접 확인하기
  3. 필수 학습 · CSS Flex와 미디어 쿼리 입문: 반응형 카드 페이지 만들기
  4. 필수 학습 · CSS position 완전 이해: relative·absolute·fixed·sticky 실습
  5. 필수 학습 · HTML details와 summary로 접근 가능한 FAQ 만들기
  6. 필수 학습 · CSS Grid 실습: Flex 학습 카드로 열 맞추기와 auto-fit 비교
  7. 필수 학습 · CSS overflow 해결: 긴 텍스트·min-width: 0·말줄임 실습
  8. 필수 학습 · HTML 표 만들기: caption·scope로 비교표를 읽기 쉽게, 모바일에서는 표만 스크롤하기
  9. 필수 선수 · HTML CSS 이미지 문제 해결 실습: 경로·비율·잘림·흐림·CLS
  10. 필수 학습 · Container Query 실습: 같은 카드를 본문과 사이드바에 배치하기
  11. 선택 참고 · CSS Baseline 보는 법: 지원 범위와 폴백을 직접 확인하기
  12. 필수 학습 · CSS z-index가 안 먹힐 때: stacking context와 부모 층 디버깅
  13. 필수 선수 · 웹 접근성 기초 점검: 키보드 순서·초점 표시·확대 화면을 직접 확인하는 체크리스트 현재 글
  14. 필수 학습 · HTML CSS 종합 실습: 소개·카드·이미지·요금표·문의 폼·FAQ가 있는 반응형 서비스 페이지
  15. 선택 참고 · 프론트엔드 SEO 기초: HTML 구조와 이미지 성능 진단하기

새 글 받아보기

RSS 리더에서 BlogFlow의 새 글을 확인할 수 있습니다.

RSS 피드 구독하기

댓글 남기기