0Pricing
HTML Academy · 강의

스크린 리더로 테스트하기

VoiceOver와 NVDA로 ARIA 구현 확인하기

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

화면 낭독기로 테스트해야 하는 이유

자동화 도구는 접근성 문제의 30~40%만 포착합니다. 실제 화면 낭독기 테스트를 하면 자동화된 검사에서 놓치는 문제를 확인할 수 있습니다:

  • 혼란스러운 읽기 순서
  • 도움이 되지 않는 ARIA 안내
  • 누락된 focus 관리
  • 혼란스러운 상호작용 패턴

Mac의 VoiceOver

VoiceOver는 macOS에 내장되어 있으므로 설치할 필요가 없습니다:

<!-- Activate: Cmd+F5 (or System Settings → Accessibility → VoiceOver) -->

<!-- Key commands:
  VO = Control+Option
  VO+Right Arrow = Next element
  VO+Left Arrow = Previous element
  VO+Space = Activate element
  VO+U = Open rotor (landmark navigation)
  VO+H = Next heading
  Tab = Next focusable element
  Shift+Tab = Previous focusable
-->

iOS의 VoiceOver

iPhone/iPad의 VoiceOver로 모바일 화면 낭독기 경험을 테스트하십시오:

<!-- Activate: Settings → Accessibility → VoiceOver
     Or: triple-click side button if set up -->

<!-- Gestures:
  Swipe right = next element
  Swipe left = previous element
  Double-tap = activate element
  Two-finger scrub = back
  Three-finger swipe up/down = scroll
-->

Windows의 NVDA

NVDA는 Windows용 무료 오픈 소스 화면 낭독기입니다:

<!-- Download: nvaccess.org -->

<!-- Key commands:
  NVDA key = Insert (or Caps Lock)
  NVDA+N = NVDA menu
  H = next heading
  K = next link
  B = next button
  F = next form field
  D = next landmark
  Insert+F7 = element list (links, headings, landmarks)
-->

화면 낭독기 테스트 체크리스트

화면 낭독기로 확인할 항목:

  • 로드될 때 페이지 제목이 안내되는지 확인합니다
  • 제목이 논리적인 탐색 구조를 만드는지 확인합니다
  • 모든 이미지에 의미 있는 대체 텍스트 또는 빈 대체 텍스트가 있는지 확인합니다
  • 모든 양식 필드에 레이블이 있는지 확인합니다
  • 버튼과 링크에 설명적인 이름이 있는지 확인합니다
  • 모달의 focus 가두기가 올바르게 작동하는지 확인합니다
  • 동적 콘텐츠 업데이트가 안내되는지 확인합니다

일반적인 화면 낭독기 버그

자동화된 테스트에서 놓치는 문제:

<!-- 1. Reading order differs from visual order -->
<!-- CSS flex/grid order ≠ DOM order for screen readers -->

<!-- 2. aria-label doesn't match visible text -->
<!-- Voice control users say visible text to click -->

<!-- 3. Focus disappears after dialog closes -->
<!-- Programmatically return focus to trigger -->

<!-- 4. Dynamic content not in a live region -->
<!-- New items added silently, no announcement -->

키보드 우선 테스트

화면 낭독기를 사용하기 전에 키보드만으로 먼저 테스트하십시오:

  1. 마우스나 트랙패드를 분리합니다
  2. Tab만 사용하여 전체 페이지를 탐색합니다
  3. 모든 상호작용 요소에 접근할 수 있는지 확인합니다
  4. 모든 작업을 키보드로 수행할 수 있는지 확인합니다

자동화된 접근성 테스트 도구

수동 테스트를 자동화 도구로 보완하십시오:

  • axe DevTools — Chrome 확장 프로그램; 가장 정확한 자동 검사 도구
  • WAVE — wavebooth.com; 페이지에 시각적 오버레이를 표시합니다
  • Lighthouse — Chrome DevTools; 성능 + 접근성 감사
  • pa11y — CLI 도구; CI/CD 파이프라인에 적합합니다

ARIA 패턴 참고 자료

W3C ARIA 작성 관행 가이드(APG)는 참고용 구현을 제공합니다:

  • 아코디언, 알림, 알림 대화 상자
  • 이동 경로, 버튼, 회전목마
  • 체크박스, 콤보 상자, 대화 상자
  • 공개, Feed, 그리드
  • 목록 상자, 메뉴, 메뉴 모음
  • 탭, 툴팁, 트리 보기

URL: w3.org/WAI/ARIA/apg/

지속적인 접근성 통합

작업 흐름에 접근성 테스트를 포함하십시오:

// Jest + axe-core for unit tests:
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

test('Button is accessible', async () => {
  const results = await axe('<button>Click me</button>');
  expect(results).toHaveNoViolations();
});

// pa11y in CI pipeline:
// pa11y https://example.com --standard WCAG2AA

테스트 요약

완전한 접근성 테스트 전략:

  1. 설계 — 색상 대비와 터치 대상 크기를 확인합니다
  2. 개발 — 키보드 테스트와 자동화된 axe 검사를 수행합니다
  3. 검토 — 화면 낭독기 테스트(VoiceOver + NVDA)를 수행합니다
  4. CI/CD — 자동화된 파이프라인에서 pa11y 또는 axe를 사용합니다
  5. 프로덕션 — Lighthouse와 수동 표본 검사를 수행합니다

빠른 확인

자동화 도구가 안정적으로 포착할 수 있는 접근성 문제는 몇 퍼센트일까요?

복습: 화면 낭독기 테스트

테스트의 핵심:

  • VoiceOver(Mac/iOS)와 NVDA(Windows)는 무료이며 필수적입니다
  • 먼저 키보드만으로 테스트한 다음 화면 낭독기를 추가하십시오
  • 자동화 도구: axe, WAVE, Lighthouse, pa11y
  • 자동화된 테스트는 문제의 약 30~40%만 포착합니다
  • 올바른 ARIA 구현을 위해 APG 패턴을 참고하십시오

자주 묻는 질문

“스크린 리더로 테스트하기” 강의는 무료인가요?

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

“스크린 리더로 테스트하기”에서 뭘 배우나요?

VoiceOver와 NVDA로 ARIA 구현 확인하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“스크린 리더로 테스트하기” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

  1. 토글을 위한 aria-expanded 및 aria-controls
  2. aria-selected 및 탭 패턴
  3. 라이브 영역 aria-live aria-atomic aria-relevant
  4. 스크린 리더로 테스트하기
← HTML Academy(으)로 돌아가기