HTML 이메일은 여전히 사용자 에이전트(user agent)가 렌더링하는 HTML입니다 — 웹메일 클라이언트는 브라우저이고, 네이티브 메일 앱의 렌더링 엔진도 근본적으로 다르지 않습니다. WCAG의 성공 기준은 이메일을 위한 예외를 두지 않으며, 동등한 웹 컴포넌트에 적용되는 것과 정확히 같은 방식으로 CSS만으로 만든 투표, 퀴즈, 아코디언에도 그대로 적용됩니다. 이는 체크박스 트릭 기반의 인터랙티브 이메일에 가장 중요한 네 가지 기준을 다루는 실무 체크리스트입니다.
애초에 WCAG가 여기 적용되는 이유
WCAG 2.2는 특정한 "웹 페이지"가 아니라 "사용자 에이전트"가 렌더링하는 "콘텐츠"를 기준으로 작성되었습니다 — 이메일이라는 매체 자체가 스펙에서 명시적으로 언급되지 않으므로 공식적인 이메일 전용 표준은 아니지만, 그 기저에 있는 콘텐츠는 어느 쪽이든 HTML입니다. 그래서 접근성 커뮤니티는, 이 체크리스트가 그렇듯, 이메일을 가이드라인이 닿지 않는 별개의 범주로 취급하는 대신 WCAG의 성공 기준을 이메일 콘텐츠의 실무 기준선으로 삼습니다.
1.1.1 텍스트 아닌 콘텐츠 — 모든 이미지에는 실질적인 alt가 필요하다
제품 사진, 히어로 이미지, 장식용 구분선, 아이콘만 있는 버튼 모두 스크린 리더가 읽어줄 수 있는 alt 속성이 필요합니다 — 정보를 전혀 담지 않는 순수 장식용 이미지라면, 스크린 리더가 의미 없는 파일명을 읽는 대신 건너뛰도록 명시적으로 빈 alt=""를 넣어야 합니다. 이는 정적 블록보다 인터랙티브 블록에서 더 중요합니다: 결과를 설명하는 텍스트 대안 없이 이미지에만 의존하는 스핀 투 윈 휠이나 스크래치 리빌은 스크린 리더 사용자에게 무엇을 획득했는지 알 방법을 전혀 남기지 않습니다.
1.4.3 / 1.4.11 — 텍스트와 인터랙티브 컨트롤의 대비
WCAG는 일반 본문 텍스트에 대해 4.5:1의 최소 명암비를(큰 텍스트는 3:1, 1.4.3 기준), UI 컴포넌트와 그래픽의 시각적 경계에 대해서는 3:1의 최소 명암비를(1.4.11) 요구합니다. 둘 다 문단 텍스트뿐 아니라 인터랙티브 요소에도 직접 적용됩니다 — 투표 옵션의 테두리, 퀴즈 답변 버튼과 컨테이너 사이의 배경색, 카운트다운 타이머의 숫자와 배경 사이의 대비까지요. 대비가 낮은 인터랙티브 컨트롤은 단순히 미적으로 아쉬운 정도가 아니라, 저시력 수신자에게는 컨트롤 자체가 아예 보이지 않게 만들 수 있습니다.
2.1.1 키보드 — 체크박스 트릭 기법의 실질적인 이점
실제 <input type="radio">/<input type="checkbox">를 <label for="...">와 짝지으면, 폼 컨트롤을 렌더링하는 모든 클라이언트에서 Tab과 Space 또는 Enter로 조작할 수 있는, 네이티브로 포커스 가능한 요소가 됩니다 — 추가 마크업도, 추가 작업도 필요 없습니다. 브라우저는 원래부터 실제 폼 컨트롤을 그렇게 다뤄왔기 때문입니다. 이 기법 자체가 작동하는 방식은 CSS :checked 상태 머신을 참고하세요. 이는 키보드 핸들러가 없는 <div onclick>으로 흔히 구현되는 JavaScript 기반 웹 캐러셀에 비해 실질적인 이점이며, 진짜 <label>/<input> 짝을 사용하기만 하면 순전히 클릭 가능한 <div> 대신 추가 노력 없이도 구조상 자연스럽게 얻어지는 인터랙티브 이메일의 이점입니다.
2.5.8 대상 크기(최소) — WCAG 2.2 신규 항목
WCAG 2.2에서 새로 도입된 성공 기준 2.5.8은 인라인 텍스트, 필수적인 레이아웃 제약, 또는 다른 곳에 동등하게 더 큰 컨트롤이 있는 경우 등의 예외를 제외하면 인터랙티브 대상에 24×24 CSS 픽셀의 최소 기준을 설정합니다. 전체 이메일 열람의 대다수가 발생하는 모바일에서 가장 중요하며, 스튜디오에서 지나치게 작게 줄이기 쉬운 가장 작은 인터랙티브 요소들 — 캐러셀 점, 별점 아이콘, 촘촘하게 배치된 퀴즈 답변 칩 — 에 특히 관련이 있습니다.
4.1.2 이름, 역할, 값 — :checked 컨트롤을 올바르게 레이블링하기
스크린 리더는 실제 시맨틱 마크업으로부터 컨트롤의 이름, 역할, 현재 상태를 안내합니다 — 이는 실제 <input>을 감싼 <label>이 그냥 얻어지는 반면, 버튼을 흉내 낸 단순한 스타일링된 <div>에는 빠져 있는 부분입니다. 실무적으로 이는 모든 투표 옵션, 퀴즈 답변, 아코디언 헤더가 배경 이미지나 텍스트 없는 아이콘만이 아니라 스크린 리더가 소리 내어 읽을 수 있는 실제 레이블 텍스트를 가져야 한다는 뜻입니다.
실무 체크리스트
- 모든 이미지에 실질적인
alt가 있거나, 장식용이라면 명시적으로 빈alt=""가 있다. - 인터랙티브 컨트롤의 텍스트와 테두리가 4.5:1(텍스트) / 3:1(UI 컴포넌트) 명암비를 충족한다.
- 모든
:checked인터랙션이 실제<input>+<label for="...">짝을 사용하며, 순전히 클릭 가능한<div>는 절대 쓰지 않는다. - 인터랙티브 대상이 최소 24×24 CSS 픽셀 이상이며, 특히 모바일 지향 블록에서 그렇다.
- 투표/퀴즈/아코디언 레이블이 이미지나 아이콘 단독이 아니라 실질적으로 읽을 수 있는 텍스트를 담고 있다.