스크린 리더 텍스트 미리보기이란?
Screen Reader Text Preview는 보조 기술이 HTML 콘텐츠를 어떻게 읽는지 보여줍니다. 각 요소의 접근성 이름, 역할, 읽기 순서를 드러내므로 실제 사용자가 부딪히기 전에 누락된 레이블, 깨진 제목 구조, ARIA 문제를 잡아낼 수 있습니다.
도구는 스크린리더가 접근성 트리를 만드는 방식과 동일하게 HTML을 해석합니다. 시각적 레이아웃을 걷어내고 aria-label과 aria-labelledby를 풀어낸 뒤, img의 alt를 모아 결과를 선형 읽기 순서로 평탄화합니다. 이슈 패널은 접근 가능한 이름이 없는 링크, 제목 단계의 비약, alt 없는 이미지, 라벨 없는 폼 컨트롤을 짚어냅니다.
사용 방법
- HTML 콘텐츠를 붙여넣거나 분석할 URL을 입력하세요.
- 선형화된 읽기 순서와 요소 접근성 트리를 검토하세요.
- 발견된 문제를 수정하고 읽기 흐름이 명확해질 때까지 다시 테스트하세요.
사용 시기
- WCAG AA 감사를 통과해야 하는 랜딩 페이지를 배포하기 전에.
- NVDA나 VoiceOver 사용자가 내비게이션이 헷갈린다고 제보했을 때 원인을 찾을 때.
- 서드파티 위젯 업데이트 후 HTML을 검토해 접근성 회귀를 잡아낼 때.
결과
개발자가 내비게이션 메뉴를 붙여넣으면 3개 링크에 접근성 이름이 없고 제목 순서가 h1에서 h4로 건너뛰어 스크린 리더 사용자에게 혼란을 준다는 결과가 표시됩니다.
자주 묻는 질문
- 실제 스크린리더 테스트를 이 도구로 대체할 수 있나요?
- 대체할 수 없습니다. NVDA, JAWS, VoiceOver는 라이브 영역, 표 헤더, 동적 콘텐츠를 읽는 방식에 각자 고유한 버릇이 있습니다. 본 도구로 분명한 문제(누락 레이블, 깨진 제목 순서)를 먼저 정리한 뒤 실제 스크린리더에서 정밀하게 확인하는 것이 효율적입니다.
- 장식용 아이콘이 왜 문제로 표시되나요?
- 스크린리더는 기본적으로 모든 img를 읽습니다. 순수 장식 아이콘이라면 빈 alt와 aria-hidden="true"를 넣으면 도구가 읽기 순서에서 건너뜁니다. alt="아이콘"이나 alt="장식" 같은 표기는 오히려 없는 것보다 못합니다.
- 올바른 제목 단계는 어떤 모습인가요?
- 페이지에 h1은 정확히 하나, 내려갈 때는 단계를 건너뛰면 안 됩니다(h2 다음에 h4가 오면 안 됨). 위로 올라가는 것은 괜찮습니다. 스크린리더 사용자는 제목 사이를 점프해 이동하기 때문에 위계가 깨지면 페이지가 미로처럼 느껴집니다.
- 모든 상호작용 요소에 aria-label이 필요한가요?
- 그렇지 않습니다. 보이는 텍스트가 있는 버튼은 따로 aria-label이 필요 없고, 그 텍스트가 곧 접근 가능한 이름이 됩니다. 보이는 텍스트가 없거나(아이콘 전용 버튼) 텍스트가 설명적이지 않을 때("더 보기"가 줄지어 있을 때)에만 aria-label을 추가하세요.
- 페이지 전체를 붙여넣어도 되나요?
- 괜찮습니다. HTML 소스 전체를 그대로 붙여넣으세요. 도구는 script, style, meta 태그를 무시하고 body에 집중합니다. 페이지가 매우 크다면 섹션별로 검사하는 편이 이슈 목록을 보기 쉽습니다.