INTERACTIVE DEMO

스크린리더를 켜면
이 화면은 어떻게 들릴까요?

접근성을 고려하지 않은 화면이 어떻게 무너지는지, 그리고 저희 설계가 적용된 뒤 무엇이 달라지는지를 4단계로 직접 체험해 보십시오.

지금 이대로 개발되면, 첫 화면에서 막힙니다

기능 개발은 끝났지만 접근성 명세가 없는 상태입니다. 스크린리더를 켜면 화면이 "버튼, 이미지, 버튼"으로만 읽힙니다. 무의미 낭독 11건, 본문 대비 2.1:1, 터치 타깃 32dp — 시각장애인 사용자는 공연에 입장조차 하지 못합니다.

9:41LTE 100%
Performances
햄릿
예술의전당 CJ토월극장
live · 47
베르나르다 알바의 집
LG아트센터 서울
20:00
No performance? Wait automatically.
TALKBACK 낭독 결과 · 접근성 진단
스크린리더를 켜고 첫 화면을 위에서 아래로 훑었을 때 실제로 들리는 문장입니다.
“버튼”
무엇을 하는 버튼인지 알 수 없음 (label 미정의)
“이미지”
포스터 대체 텍스트 없음
“햄릿 예술의전당 CJ토월극장 live 47”
끊김 없이 한 덩어리로 읽혀 의미 파악 불가
“버튼”
입장 버튼 · 두 번째 카드 버튼과 구분 불가
무의미 낭독 11건 · 진입 불가
본문 11px, 보조 텍스트 대비 2.1:1, 터치 타깃 32dp. 저시력 사용자도 이 화면에서 이탈합니다.
9:41LTE 100%
1
2
3
4
5
진행 중인 공연
🎭
● 나레이션 진행 중
햄릿
예술의전당 CJ토월극장
입장하기
오늘 20:00 시작 예정
베르나르다 알바의 집
새 공연이 시작되면 자동으로 음성 안내
VOICE SPEC LAYER 주입 중
시안 위에 포커스 순번과 낭독 문구를 확정해 얹습니다. 개발팀은 오른쪽 코드를 그대로 옮기면 됩니다.
1
화면 제목
“진행 중인 공연, 제목”
Semantics(header: true)
2
진행 중 공연 카드
“햄릿, 예술의전당 CJ토월극장, 나레이션 진행 중, 함께 듣는 중 47명”
Semantics(label: …, button: true)
3
입장 버튼
“입장하기, 버튼. 두 번 누르면 청취를 시작합니다”
Semantics(hint: '두 번 누르면…')
4
예정 공연 카드
“오늘 20시 시작 예정, 베르나르다 알바의 집”
Semantics(label: …)
5
자동 대기 안내
“새 공연이 시작되면 자동으로 음성 안내합니다”
SemanticsService.announce()
타입 스케일 200% 동시 전환
type/body 20 → 40, touch/primary 96dp. 토큰 한 줄 수정으로 두 앱 전체가 함께 커집니다.
9:41LTE 100%
공연 중 · 00:24:18
햄릿 · 2막 1장
마이크 켜짐
두 번 누르면 마이크가 꺼집니다
47
청취자
공연 종료
9:41LTE 100%
실시간 나레이션 청취 중
햄릿
나레이터 김서연 · 2막 1장
소리 크게 / 작게
위쪽을 누르면 크게
아래쪽을 누르면 작게
단일 터치 영역 · 화면의 41%
청취 종료
LIVE REGION · 자동 낭독
두 앱은 같은 순간을 공유합니다. 상태가 바뀌면 화면 갱신 없이 양쪽 모두에게 문장으로 전달됩니다.
19:30:02 · 양쪽
“공연이 시작되었습니다. 마이크가 켜졌습니다”
19:31:44 · 나레이터
“청취자가 47명으로 늘었습니다”
19:42:10 · 청취자
“음성이 잠시 끊길 수 있습니다”
햅틱 3종
짧게 1회 = 마이크 ON
짧게 2회 = 마이크 OFF
길게 1회 = 공연 종료
9:41LTE 100%
STORE KIT PREVIEW
공연을 귀로 봅니다
AOS 512 · iOS 1024
지금 열리는 공연을
바로 듣기
캡션 대비 8.4:1
화면을 보지 않아도
조작됩니다
캡션 대비 13.4:1
글씨 크기
200%까지
캡션 대비 9.1:1
납품 전 / 후 · 접근성 검수 리포트
측정 항목
기존 시안
납품 시안
무의미 낭독 요소
11건
→
0건
본문 명도 대비
2.1:1
→
16.1:1
핵심 버튼 대비
3.4:1
→
5.9:1
핵심 터치 타깃
32dp
→
96dp
폰트 200% 깨짐
7화면
→
0화면
포커스 순서 정의
0건
→
214건
7일 뒤 손에 남는 것
Foundation + 2개 앱 Figma 원본
Voice Spec Sheet (214건 확정)
대비 · 타입 스케일 검증 리포트
스토어 키트 (아이콘 · 스크린샷 · 피처드)
Flutter Semantics 매핑 시트