접근성 — a11y 지원과 스크린 리더 호환

"접근성은 법적 요구사항이기도 하지만, 좋은 UX의 기본이기도 하다" — 키보드만으로도 앱을 완전히 사용할 수 있어야 합니다.

Electron에서의 접근성

Electron은 Chromium을 기반으로 하므로 웹 접근성 표준을 그대로 적용할 수 있습니다.

스크린 리더 지원

Electron은 다음 스크린 리더를 지원합니다:

macOS: VoiceOver
Windows: NVDA, JAWS
Linux: Orca

ARIA 속성 활용

HTML

<!-- 역할(role) 지정 -->
<div role="navigation" aria-label="메인 내비게이션">
  <button role="tab" aria-selected="true">파일</button>
  <button role="tab" aria-selected="false">편집</button>
</div>

<!-- 라이브 영역 — 동적 콘텐츠 변경 알림 -->
<div aria-live="polite" id="status">
  파일이 저장되었습니다.
</div>

<!-- 커스텀 컴포넌트에 접근성 추가 -->
<div role="slider"
     aria-label="볼륨"
     aria-valuemin="0"
     aria-valuemax="100"
     aria-valuenow="50"
     tabindex="0">
</div>

키보드 내비게이션

JAVASCRIPT

// 포커스 트랩 — 모달에서 Tab이 모달 밖으로 나가지 않게
function trapFocus(element) {
  const focusable = element.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  const first = focusable[0];
  const last = focusable[focusable.length - 1];

  element.addEventListener('keydown', (e) => {
    if (e.key !== 'Tab') return;

    if (e.shiftKey) {
      if (document.activeElement === first) {
        e.preventDefault();
        last.focus();
      }
    } else {
      if (document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    }
  });

  first.focus();
}

고대비 모드 지원

JAVASCRIPT

// nativeTheme으로 고대비 감지
const { nativeTheme } = require('electron');

if (nativeTheme.shouldUseHighContrastColors) {
  mainWindow.webContents.send('highContrast:enabled');
}

CSS

/* 고대비 모드 스타일 */
@media (forced-colors: active) {
  button {
    border: 2px solid ButtonText;
  }
  .icon {
    forced-color-adjust: none;
  }
}

/* 모션 감소 설정 존중 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

접근성 테스트

DevTools Accessibility 패널

JAVASCRIPT

// 개발 중 접근성 패널 활성화
win.webContents.openDevTools();
// Elements → Accessibility 탭에서 접근성 트리 확인

axe-core 자동 테스트

JAVASCRIPT

// 렌더러에서 axe-core로 접근성 감사
const axe = require('axe-core');

axe.run(document, {
  rules: {
    'color-contrast': { enabled: true },
    'label': { enabled: true },
  },
}).then(results => {
  if (results.violations.length > 0) {
    console.warn('접근성 위반:', results.violations);
  }
});

접근성 체크리스트

모든 이미지에 alt 텍스트
모든 폼 요소에 label 연결
키보드만으로 모든 기능 사용 가능
포커스 순서가 논리적
색상만으로 정보를 전달하지 않음
충분한 색상 대비 (4.5:1 이상)
동적 콘텐츠에 aria-live 설정

면접 포인트 정리

Electron은 Chromium 기반이므로 웹 접근성 표준 그대로 적용 가능
ARIA 속성으로 커스텀 컴포넌트에 의미 부여
키보드 내비게이션과 포커스 관리가 접근성의 핵심
prefers-reduced-motion, forced-colors 미디어 쿼리로 사용자 설정 존중
axe-core로 자동 접근성 감사 가능

접근성을 다뤘으면, 다음은 CI/CD 파이프라인을 알아봅시다.