접근성

키보드, 화면 판독기, 저시력 및 저사양 기술 사용자를 위해 구축하는 방법. 솔직한 날짜 기록 스냅샷입니다.

이 페이지는 사이트의 나머지 부분과 동일한 방식으로 작성됩니다: 작동하는 것, 작동하지 않는 것, 그리고 직접 확인하는 방법. 접근성은 움직이는 목표이기 때문에 날짜가 표시됩니다. 모든 주요 릴리스 후에 다시 테스트합니다.

공식 접근성 성명

목표 표준

전체 경험에서 WCAG 2.2 AA. 포커스 외관(두꺼운 고대비 링, 가려지지 않음)과 양식 레이블링 + 오류 복구에 AAA 처리. W3C 권고안에 대해 추적, 의역이 아님.

최근 내부 감사

2026-04-19. 홈페이지, print-size, /standards/ 허브 + 9개 권위 페이지, 45개 결제 방식 랜딩 페이지에 대한 자체 팀의 수동 검사.

외부 감사

의뢰됨, 보고서 대기 중. /accessibility/audit/에 도착 시 수정 메모와 함께 게시, 결함 포함, 선별 없음.

재테스트 주기

월별 스팟 체크 + 주요 UI 변경 후 전체 수동 검사. 자동화된 검사(대비 린팅, WCAG 2.2 새 기준 스캔)는 모든 배포 시 실행.

연락처 + SLA

hello@abundera.ai, 접근성 보고서를 영업일 2일 이내에 확인하고, 5일 이내에 분류하며, 키보드 / 화면 판독기 / 인지적 차단제를 우선 문제로 처리합니다(기능 작업보다 먼저 출시).

성공 기준별 WCAG 2.2 AA 준수

우리가 적극적으로 모니터링하는 2.2의 새 기준들. 상태는 내부적으로 확인한 내용을 반영합니다. 외부 감사가 이를 대체할 것입니다.

모션 및 강제 색상 지원

• prefers-reduced-motion: reduce, 주변 오브 부유 및 페이드인 전환이 억제됩니다. 기능적 전환은 짧게 유지됩니다. macOS Reduce Motion과 Windows "애니메이션 표시" 비활성화로 확인됨.
• forced-colors: active (Windows 고대비 모드), 포커스 링이 시스템 Highlight 색상 사용; 테두리가 시스템 CanvasText 상속. Windows 11 고대비의 Edge에서 확인됨.

알려진 제한 사항

• JAWS는 아직 테스트되지 않았습니다. 다음 AT 라운드는 Windows 11의 Edge에서 JAWS를 목표로 합니다.
• 명함 디자이너는 드래그하여 위치 지정 미리보기 디자인에서 마우스 우선입니다. 모든 컨트롤에 키보드 대안이 있지만 라이브 피드백 루프는 여전히 시각적입니다. 색상 입력, 프리셋 그리드, 16진수 필드에는 이제 명시적 ARIA 바인딩이 있습니다(2026-04-19).
• 외부 감사 보고서가 대기 중입니다. 위 표의 자체 증명 상태는 보고서가 도착하면 감사자의 발견 사항으로 대체됩니다.
• 일부 타사 보조 기술(Dragon NaturallySpeaking, Android의 음성-텍스트 변환)은 회귀 매트릭스에 없습니다. 커뮤니티 보고서를 수락하고 티켓별로 수정합니다.

접근성 변경 로그

• 2026-04-19 (오후), TalkBack 라이브 영역 이중 발화 수정: #qr-preview 래퍼에서 aria-live="polite" 제거; 공지는 이제 스캔 가능성 role="status" 배지에서만, 생성당 한 번. BCD 모달: 색상 선택기가 적절한 <label for> 바인딩(배경, 텍스트, 강조, 그라데이션)을 얻음; 프리셋 그리드 컨테이너가 role="group" + aria-label을 얻음. 접근성 표가 <caption> + scope="col"/"row"를 얻음, WCAG 2.2 AA + AT 매트릭스가 이제 VoiceOver, NVDA, TalkBack에서 올바르게 공지됨.
• 2026-04-19 (오전), 포커스 표시기 업그레이드(3 px + box-shadow 백업). forced-colors + prefers-reduced-motion 지원 추가. 대상 크기 감사: .saved-profile-delete, .type-search-clear, .compat-toggle-btn을 ≥ 28 px로 증가. 제목 수준 건너뜀 수정(vCard/MECARD 소제목 h4 → h3). 공식 WCAG 2.2 AA 성명 + AT 매트릭스 게시.
• 2026-04-18, 수동 WCAG 2.2 AA 기준선 검사 문서화. 4기둥 신뢰 스트립을 더 깔끔한 계층을 위해 축소.
• 2026-03-08, 초기 /accessibility/ 페이지 게시.

우리의 약속

• 완전한 키보드 탐색. 모든 생성기 컨트롤, 모든 모달, 모든 내보내기 흐름이 마우스 없이 접근 가능합니다.
• 가시적 포커스 상태. 포커스된 입력, 버튼, 링크는 명확한 링을 표시합니다. 색상에만 의존하지 않습니다.
• 모든 필드에 레이블. 양식 입력에는 연결된 <label> 요소 또는 aria-label 속성이 있습니다. 자리 표시자 텍스트는 절대 유일한 레이블로 사용되지 않습니다.
• QR 미리보기 및 토스트를 위한 ARIA 라이브 영역. 화면 판독기는 "QR이 생성되었습니다"와 토스트 메시지를 포커스가 이동할 때가 아니라 발생할 때 듣습니다.
• 아이콘 전용 버튼에 대한 텍스트 대안. 모든 SVG 전용 버튼에 aria-label.
• 색상 독립적 상태 의미. 스캔 가능성 배지와 호환 칩은 색상과 글리프 및 텍스트 레이블을 결합합니다.
• 명시적 내보내기 형식 이름. 다운로드 버튼은 "PNG 다운로드", "SVG 다운로드" 등을 표시하며 단순히 "다운로드"가 아닙니다.
• 큰 모바일 탭 대상. 인터랙티브 요소는 WCAG 2.5.8에 따라 거친 포인터에서 최소 44 × 44 CSS 픽셀입니다.
• 감소된 모션 존중. prefers-reduced-motion: reduce 아래에서 전환이 비활성화됩니다.

여전히 부족한 부분

• JAWS는 아직 테스트되지 않았습니다. JAWS 라이선스 취득, 다음 AT 라운드를 위한 테스터 슬롯 예약. 다른 모든 주요 도구(VoiceOver macOS + iOS, NVDA, Narrator, TalkBack)는 최신 회귀를 통과했습니다.
• 명함 디자이너는 설계상 마우스 의존도가 높습니다(드래그하여 위치 지정, 캔버스 미리보기). 모든 컨트롤에 키보드 대안이 있지만 라이브 미리보기 피드백 루프는 여전히 시각 우선입니다. 색상 컨트롤은 이제 적절한 <label for> 바인딩 + 프리셋 선택기의 role="group"을 사용합니다(2026-04-19).
• 복잡한 생성기 흐름(일괄 CSV, 다단계 마법사)은 더 나은 건너뛰기 링크 구조를 사용할 수 있습니다. 계획됨.
• 설명적인 표 요약. 접근성 + 호환성 표에는 이제 <caption> + scope 속성이 있습니다(2026-04-19). 각 행에 대한 더 긴 행 수준 서술 요약은 아직 계획 중입니다.

보조 기술 지원 매트릭스

엔지니어링 산출물이며 PR 성명이 아닙니다. 각 행은 우리가 실제로 직접 테스트한 브라우저 + AT + 플랫폼 조합입니다. 상태는 가장 최근의 수동 검사를 반영합니다. 주의 사항은 완전한 통과를 여전히 차단하는 항목을 기록합니다.

릴리스 주기: 매트릭스는 모든 주요 UI 변경에 대해 재실행됩니다. "통과" = 차단 없음; 주의 사항은 다음 릴리스를 위해 대기 중인 외관상 또는 좁은 범위의 회귀입니다. "미테스트" = 아직 해당 조합을 실제로 실행하지 않았습니다, 생략 대신 명시합니다.

키보드 맵

• Tab / Shift+Tab: 포커스 가능한 요소 사이를 앞뒤로 이동.
• Enter / Space: 버튼 및 토글 활성화.
• 화살표 키: 라디오 그룹 내 옵션 사이 이동(유형 선택기, 템플릿 선택기, 탭 바).
• Escape: 모달 닫기(명함 디자이너, 프리플라이트, 인쇄 서비스, 이미지 자르기).
• Home / End: 오버플로 메뉴 내 첫 번째 / 마지막 항목으로 이동.

내부 감사, 2026-04-19

홈페이지, /print-size/, 새 /standards/ 허브 + 9개 권위 페이지, 45개 결제 방식 랜딩 페이지(공유 템플릿에서 상속)에 대한 수동 WCAG 2.2 AA 검사. 확인한 내용, 수정한 내용, 미해결 사항:

통과로 확인됨

• 건너뛰기 링크 대상이 있음, 건너뛰기 링크(href="#generator")가 모든 페이지 변형에서 보이는 요소로 해결됩니다.
• 포커스 가시적 스타일, :focus-visible이 2px 윤곽선으로 전역 선언되어 있으며, 색상 테두리 + 그림자를 가진 입력별 재정의도 있습니다. site/css/style.c17bfd85.css의 34번과 88번 줄에서 CSS 감사로 확인됨.
• 모든 양식 입력에 레이블이 있음, 생성기의 모든 <input> / <select> / <textarea>에 명시적인 <label for="..."> 또는 래핑 <label>이 있습니다. 자리 표시자가 레이블로 사용되는 곳은 없습니다.
• 버튼에 접근 가능한 이름이 있음, 모든 <button>에 텍스트 내용 또는 aria-label이 있습니다. SVG 전용 버튼(햄버거, 공유, 설치)에는 모두 aria-label이 있습니다.
• 장식적 SVG가 숨김으로 표시됨, 모든 장식 아이콘에 aria-hidden="true"가 있어 화면 판독기가 기하학을 공지하는 대신 건너뜁니다.
• 올바른 ARIA 역할, 유형 선택기에 role="radiogroup", 각 옵션에 role="radio" + aria-checked; 패널 탭에 role="tablist" / role="tab" + aria-selected.
• 텍스트 대비, 기본 텍스트는 #08090a 위의 #f5f5f5(≈ 17:1, WCAG AAA). 같은 배경에서 음소거 텍스트 #a3a3a3은 ≈ 8:1(AAA 7:1 이상).
• 언어 전환기에는 가시적 레이블이 암묵적이더라도 aria-label="Language"가 있습니다.

이번 검사에서 수정됨

• 제목 수준 건너뜀, vCard / MECARD 추가 필드 섹션 내 세 개의 소제목이 중간 <h3> 없이 <h2> 아래 <h4>였습니다. 화면 판독기 개요 도구가 이를 "수준 건너뜀"으로 표시했습니다. 개요가 h1 → h2 → h3 → h3으로 깔끔하게 읽히도록 <h3>으로 변경됨.

알려진 제한 사항

• Axe / NVDA / VoiceOver 전체 스캔은 빌드 파이프라인에서 실행할 수 없는 브라우저 + AT가 필요합니다. 월별 수동 브라우저 기반 검사가 예정되어 있습니다.
• 타사 독립 감사가 의뢰됨(자리 표시자 /accessibility/audit/ 참조). 발견 사항이 있더라도 도착 시 보고서가 게시됩니다.
• "/" 키보드 단축키는 검색 필드가 있는 페이지에서 약간의 충돌 위험이 있습니다. 포커스가 입력 외부에 있을 때만 preventDefault()를 사용합니다. 문서화되었지만 아직 AT로 감사되지 않았습니다.

문제 보고

키보드로 접근할 수 없거나 잘못 레이블된 것이 있거나 설정에서 사용할 수 없는 경우 hello@abundera.ai로 이메일을 보내주세요. 브라우저, OS, AT 및 특정 흐름을 포함해 주세요. 접근성 버그를 우선 문제로 취급합니다.

마지막 검토: 2026-04-19. 다음 검토: 다음 주요 UI 변경 후.