접근성

본 문서는 접근성 책임의 분담과, 직접 구현할 때 지켜야 하는 최소 기준을 정의합니다.

1. 책임 분담

접근성 구현을 전부 직접 하지 않습니다. 대부분은 이미 검증된 구현이 담당하며, 우리가 책임지는 범위는 그보다 좁습니다.

우선순위는 다음과 같습니다.

1. 시맨틱 HTML로 해결합니다. <button>은 클릭·엔터·스페이스·포커스를 모두 갖고 있습니다.
2. 시맨틱으로 표현할 수 없으면 brain 프리미티브를 사용합니다.
3. 둘 다 불가능한 경우에만 직접 구현하며, 4절의 기준을 적용합니다.

2단계의 적용 범위는 생각보다 넓습니다. 접근성 결함이 가장 자주 나오는 날짜 그리드도 brain이 담당합니다. 방향키·Home·End·PageUp·PageDown 이동, 로빙 탭인덱스, role="grid"와 셀 단위 ARIA가 이미 구현되어 있으므로 4절의 직접 구현 대상이 아닙니다. 남는 몫은 라벨의 한국어화이며 provideBrnCalendarI18n()으로 지정합니다. 확인 결과의 원본은 개발 환경 7절입니다.

2. 시맨틱

<div (click)>은 키보드로 도달할 수 없고 스크린리더가 동작 요소로 인식하지 않습니다. tabindex와 role과 키 핸들러를 붙여 흉내 내는 것보다 <button>을 쓰고 스타일을 제거하는 편이 짧고 정확합니다.

동작과 이동을 구분합니다. 이동은 링크이며, 사용자가 새 탭으로 열거나 주소를 복사할 수 있어야 합니다.

3. 접근 가능한 이름

모든 상호작용 요소는 이름을 가져야 합니다.

placeholder를 레이블 대신 쓰는 것을 금지합니다. 입력을 시작하면 사라져 무엇을 입력하는 칸인지 알 수 없게 되며, 스크린리더 지원도 일관되지 않습니다.

이름은 화면에 보이는 텍스트와 일치시킵니다. 음성 제어 사용자는 보이는 텍스트를 말해 조작합니다.

4. 직접 구현하는 상호작용

시맨틱과 brain으로 해결되지 않아 직접 만드는 경우 다음을 필수로 갖춥니다.

outline: none만 적용하고 대체 표시를 두지 않는 것을 금지합니다. :focus-visible로 키보드 포커스에만 표시를 주는 방식을 사용합니다.

5. 크기와 확대

문서 루트의 font-size 를 뷰포트 폭에 연동합니다. 1920px 에서 100%, 2560px 에서 125% 이며 상한과 하한을 둡니다.

html { font-size: clamp(1rem, 0.25rem + 0.625vw, 1.25rem); }

단위는 rem 또는 % 를 사용하고 px 를 쓰지 않습니다. 접근성을 위해 브라우저 기본 글꼴을 키워 둔 사용자가 있으며, px 로 고정하면 그 설정이 무시됩니다.

6. 색과 대비

대비 기준은 라이트 모드와 다크 모드 양쪽에서 충족해야 합니다. 토큰을 추가할 때 두 모드의 값을 함께 정의하는 이유입니다.

색만으로 상태를 전달하면 색각 이상 사용자가 구분할 수 없습니다. 오류를 빨간색으로만 표시하지 않고 아이콘과 문구를 함께 둡니다.

7. 상태 전달

화면 변화를 시각 외의 방법으로도 알립니다.

단일 페이지 애플리케이션에서 화면을 전환하면 스크린리더에는 아무 일도 일어나지 않은 것처럼 보입니다. 라우팅 후 포커스 이동이나 알림이 없으면 사용자가 전환 사실을 알 수 없습니다.

8. 터치 환경

호버로만 접근 가능한 기능은 터치 사용자에게 존재하지 않는 것과 같습니다. 툴팁에 필수 정보를 담지 않는 규칙도 여기서 나옵니다. 상세는 적응형 UI에 있습니다.

9. 동작과 애니메이션

prefers-reduced-motion을 존중합니다. 전정기관 장애가 있는 사용자에게 큰 움직임은 불편을 유발합니다.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

자동 재생되는 캐러셀이나 5초 이상 지속되는 자동 변화에는 정지 수단을 제공합니다.

10. 검증

자동 검사는 위반의 일부만 잡습니다. 접근 가능한 이름이 부적절하거나 포커스 순서가 논리적이지 않은 것은 도구가 판정하지 못하므로 수동 확인이 필요합니다.

11. 금지 사항