/* ============================================================ yedam-a11y.css — WCAG 2.2 AA 공통 보정 (2026-09-15) 전체 44개 페이지를 정적 진단한 결과 네 가지가 걸렸다. 페이지마다 따로 고치면 다음에 새 페이지를 만들 때 또 빠지므로 공통 파일로 둔다. 2.4.11 Focus Not Obscured 23페이지 — 최다 2.5.8 Target Size (24px) 4페이지 2.4.7 Focus Visible 3페이지 1.4.4 확대 차단 3페이지 (CSS로는 못 고침, 아래 주석) WCAG 2.2 는 ISO/IEC 40500:2025 로 채택됐고, 교육 B2G 는 접근성이 법적 요건이다. 2.1 AA 를 이미 만족하는 사이트에서 가장 자주 실패하는 항목이 Focus Not Obscured 와 Target Size 인데 둘 다 CSS 로 해결된다. ============================================================ */ /* ── 2.4.11 Focus Not Obscured (AA) ────────────────────────── 상단 고정 헤더가 있는 페이지에서 Tab 으로 이동하면 포커스된 요소가 헤더 뒤로 숨는다. 키보드 사용자는 지금 어디에 있는지 알 수 없다. 스크롤 여백을 줘서 브라우저가 요소를 헤더 아래로 데려오게 한다. 헤더 높이를 모르는 페이지가 많아 넉넉히 잡되, 변수로 덮어쓸 수 있게 한다. (--yd-sticky-h 를 페이지에서 정의하면 그 값을 쓴다) */ :root { --yd-sticky-h: 72px; } html { scroll-padding-top: calc(var(--yd-sticky-h) + 16px); } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { scroll-margin-top: calc(var(--yd-sticky-h) + 16px); scroll-margin-bottom: 24px; } /* ── 2.4.7 Focus Visible (AA) ──────────────────────────────── outline:none 을 쓴 자리에 대체 표시가 없으면 키보드로는 현재 위치가 보이지 않는다. :focus-visible 이라 마우스 클릭에는 테두리가 뜨지 않는다 — 디자인을 해치지 않으면서 키보드만 보호한다. 두 겹으로 그려 밝은 배경에서도 어두운 배경에서도 보이게 한다. */ :where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="tab"]):focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(255, 255, 255, .9); border-radius: 4px; } /* 강제 색상 모드(고대비)에서는 시스템 색을 따른다. */ @media (forced-colors: active) { :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid Highlight; box-shadow: none; } } /* ── 2.5.8 Target Size Minimum (AA) ────────────────────────── 포인터 대상은 최소 24×24 CSS 픽셀이어야 한다. 손가락이 굵거나 손이 떨리는 사용자가 옆 버튼을 누르는 일을 줄인다. 키오스크는 특히 그렇다. 기존 레이아웃을 깨지 않으려고 크기를 강제로 키우지 않고, 최소값만 보장한다. inline 요소는 min-height 가 먹지 않으므로 제외한다. 본문 문장 안의 링크도 제외한다(예외로 허용되는 경우다). */ :where(button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], input[type="checkbox"], input[type="radio"], select, summary) { min-width: 24px; min-height: 24px; } /* 아이콘 버튼처럼 작게 그려진 것은 클릭 영역만 넓힌다. 보이는 크기는 그대로 두고 ::after 로 투명한 판을 깐다. */ :where(button, [role="button"]).yd-icon-btn { position: relative; } :where(button, [role="button"]).yd-icon-btn::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max(100%, 24px); height: max(100%, 24px); } /* ── 2.5.7 Dragging Movements (AA) ─────────────────────────── 드래그로만 되는 기능에는 단일 포인터 대안이 있어야 한다. 현재 사이트에 드래그 UI 는 없지만, 새로 만들 때 이 클래스를 붙여 대안 버튼을 함께 두도록 표시를 남긴다. */ [data-yd-drag-only]::before { content: "이 조작에는 버튼 대안이 필요합니다(WCAG 2.5.7)"; display: none; /* 개발 중 확인용 — 프로덕션에서는 보이지 않는다 */ } /* ── 1.4.4 확대 정책 (2026-09-27 변경) ──────────────────────── 일반 기기에서는 확대를 막지 않는다. kiosk-home.html·mom/test.html· mom-play.html 의 viewport 에서 user-scalable=no·maximum-scale=1 을 뺐다. 키오스크(html.kiosk-on)에서만 kiosk.js 13) 이 viewport 를 잠그고 kiosk.css 가 touch-action 으로 핀치·더블탭 확대를 막는다. '글자 크게' 버튼은 여전히 보조 수단이라 크기를 보장한다. */ .pia-fs-toggle, [data-yd-fontsize] { min-width: 44px; min-height: 44px; } /* 버튼을 빠르게 두 번 누를 때(어르신 게임·검사) 화면이 확대되며 튀는 것만 막는다. manipulation 은 핀치 확대는 그대로 허용한다(MDN touch-action). */ :where(button, [role="button"], a, input, select, textarea, label, summary) { touch-action: manipulation; } /* ── 잊기 쉬운 것들 ────────────────────────────────────────── 건너뛰기 링크: 키보드 사용자가 매 페이지 헤더를 Tab 으로 통과하지 않게 한다. 평소에는 숨고 포커스를 받으면 나타난다. */ .yd-skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; padding: 12px 20px; background: #1d4ed8; color: #fff; font-weight: 700; border-radius: 0 0 8px 0; text-decoration: none; } .yd-skip-link:focus { left: 0; } /* 움직임에 민감한 사용자 보호. 애니메이션을 지우지 않고 아주 짧게 만든다 — 완전히 0 으로 두면 전환이 끊겨 오히려 혼란스러운 UI 가 있다. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ── 2.5.8 보강: 메뉴·목록 링크 (2026-09-16) ───────────────── 처음엔 button 계열만 최소 크기를 줬다. 본문 문장 안의 링크는 키우면 줄 간격이 깨지고, WCAG 도 인라인 링크는 예외로 둔다. 그런데 실제 화면을 열어 재보니 높이 19px 짜리 링크가 남아 있었다. 헤더·푸터의 메뉴 항목들이다('예담 톡', '맘(MOM)', '선생님도우미'). 이들은 문장 속 링크가 아니라 독립된 메뉴라 예외 대상이 아니다. 레이아웃을 건드리지 않으려고 크기를 키우는 대신 세로 패딩만 준다. nav·헤더·푸터 안의 링크로 한정해 본문 링크는 그대로 둔다. 실제 화면에서 재보니 footer 태그가 아니라 div.ft-inner 로 감싸여 있어 처음 선택자에 걸리지 않았다. 클래스명을 확인해 추가했다. */ :where(nav, header, footer, .hdr, .hdr-inner, .foot, .footer, .ft, .ft-inner, .ft-meta, .ft-links, .nav, .gnb, .menu) a:not(.yd-skip-link) { display: inline-flex; align-items: center; min-height: 24px; } /* ── 1.4.3 텍스트 명도 대비 — 브랜드 주황·회색 토큰 (2026-09-27) ── 근거: WCAG 2.2 1.4.3 / KWCAG 2.2(KS X OT0003:2022) 5.4.3 — 본문 글자 4.5:1, 큰 글자 (24px 이상, 또는 18.66px 이상 굵게) 3:1. 로고·장식은 예외. 학교·공공기관(장애인차별금지법 시행령 대상)에 납품하므로 AA 가 기준선이다. 브랜드 주황 #d97757 은 흰 글자와 3.12:1, 크림 바탕(#faf9f5) 위 글자로 2.96:1 이라 "글자가 올라가는 곳"에는 못 쓴다. 인상은 그대로 두려고 색상(H)·채도(S)는 같게 두고 명도만 낮춘 값을 계산했다. --yd-rust-ink #b04928 흰 글자 5.48 · #faf9f5 5.21 · #f3f1ea 4.85 · #f6e9e2 4.61 --yd-rust-ink-hover #8f3d22 흰 글자 7.35 (눌림·호버) --yd-rust-large #c4623f 큰 글자 전용 · #faf9f5 3.86 · #f6e9e2 3.42 (3:1 이상) #d97757(--rust) 은 선·점·테두리·로고 등 장식에 그대로 쓴다. --rust-deep / --rust2 는 전 페이지에서 글자색·호버 배경으로만 쓰이므로 (2026-09-27 전수 조사) 토큰 자체를 글자용 값으로 바꾼다. --mid 는 글자색으로만 쓰이는데 #b0aea5 는 크림 위 2.11:1 이었다. 이 파일은 각 페이지