접근성

lh-ui-plus는 전 세계 모든 사용자에게 장벽 없는 UI 경험을 제공하기 위해 노력합니다.

키보드 내비게이션

모든 인터랙티브 컴포넌트는 키보드 조작을 지원합니다:

키	동작
Tab	포커스 가능한 요소 간 전환
Enter / Space	버튼/스위치 활성화
Escape	Dialog/Select 팝업 레이어 닫기
Arrow Up/Down	Select/Cascader 옵션에서 상하 이동

ARIA 속성

컴포넌트는 필요에 따라 ARIA 속성을 출력합니다 (아래는 실제 렌더링 결과입니다):

<!-- Button 비활성화 상태: 네이티브 disabled, Tab으로 건너뛸 수 있음 -->
<button disabled>...</button>

<!-- Switch 스위치: button + role/aria-checked -->
<button role="switch" aria-checked="false">...</button>

<!-- Checkbox: 네이티브 input, 시맨틱은 레이블이 제공 -->
<input type="checkbox" />

<!-- Dialog 대화상자: aria-modal + aria-label이 제목을 가리킴 -->
<div role="dialog" aria-modal="true" aria-label="대화상자 제목">
  ...
</div>

네이티브 시맨틱을 우선합니다: Button은 네이티브 disabled를, Checkbox는 네이티브 <input type="checkbox">를 사용하며, aria-disabled / role="checkbox"를 중복해서 추가하지 않습니다 — 네이티브 요소에 중복된 ARIA를 덧붙이는 것이 오히려 명세에 어긋납니다.

스크린 리더

• 아이콘 전용 버튼에는 수동으로 aria-label을 전달해야 합니다 (아래 개발 권장 사항 참고)
• Dialog 닫기 버튼에는 aria-label="close"가 기본 제공됩니다
• 컴포넌트는 네이티브 속성을 그대로 전달합니다: 명시적으로 처리되지 않은 속성은 루트 요소에 적용되므로, 필요에 따라 aria-*를 추가할 수 있습니다

색상 대비

본문과 주요 색상은 WCAG 2.1 AA를 목표로 선정됩니다 (일반 텍스트 ≥ 4.5:1, 큰 텍스트와 비텍스트 요소 ≥ 3:1). 국풍의 저채도 색상 구성에서는 임의의 색상을 고르기보다 테마 사용자 정의의 --lh-text-color-* 계층을 사용하여 대비를 보장하는 것을 권장합니다.

포커스 관리

• 루트 요소에는 일관된 :focus-visible 포커스 링이 제공됩니다: 키보드 내비게이션 시 표시되고, 마우스 클릭 시에는 표시되지 않습니다
• Dialog/Select 팝업 레이어는 Escape로 닫을 수 있습니다
• 키보드 조작성: 포커스 가능한 요소는 모두 네이티브 <button> / <input>이며, 자연스럽게 Tab 탐색을 지원합니다

포커스 트랩과 포커스 복원 (Dialog를 열 때 첫 번째 요소에 포커스, 닫은 후 트리거 버튼으로 복귀)은 아직 구현되지 않았습니다. Issue에서 진행 상황을 확인해 주세요.

개발 권장 사항

컴포넌트에 aria-label 추가

<LhButton aria-label="대화상자 닫기" @click="close">
  <LhIcon name="close" />
</LhButton>

라이브 영역으로 알림

<script setup lang="ts">
import { ref } from 'vue'
const message = ref('')
</script>

<template>
  <div aria-live="polite">{{ message }}</div>
</template>

Skip Navigation

<a href="#main" class="skip-link">주요 콘텐츠로 건너뛰기</a>

테스트 도구

접근성 문제를 검사할 때 다음 도구를 권장합니다:

• axe DevTools — 브라우저 확장
• WAVE — Web Accessibility Evaluation Tool
• lighthouse — 내장 접근성 감사

---

접근성은 선택적 기능이 아니라 기본적인 권리입니다. — Web Accessibility Initiative (WAI)