웹 접근성 (Web Accessibility) 예제

WCAG 2.1 가이드라인을 따르는 접근성 있는 웹 컴포넌트 예제입니다. 스크린 리더와 키보드 네비게이션을 테스트해 보세요.

1. 시맨틱 HTML

시맨틱 요소 사용

적절한 HTML 요소를 사용하면 접근성이 자동으로 향상됩니다.

올바른 헤딩 구조

<h1>페이지 제목</h1>
<h2>섹션 제목</h2>
<h3>하위 섹션</h3>

리스트 구조

  • 항목 1: 순서 없는 리스트 (ul)
  • 항목 2: 스크린 리더가 항목 수를 알려줌
  • 항목 3: 네비게이션에도 활용
  1. 첫 번째: 순서 있는 리스트 (ol)
  2. 두 번째: 순서가 중요할 때 사용
  3. 세 번째: 단계별 설명에 적합
정의 리스트 (dl)
용어와 설명을 짝지을 때 사용합니다.
접근성
모든 사용자가 웹을 이용할 수 있도록 하는 것

이미지 대체 텍스트

정보를 전달하는 이미지: 초록색 배경에 흰색 텍스트
정보 전달 이미지 - alt 텍스트 필수
장식용 이미지 - alt="" 사용

2. ARIA (Accessible Rich Internet Applications)

ARIA 역할 (Roles)

현재 상태: 정상 (role="status")

ARIA 상태와 속성

60%

탭 1의 내용입니다.

Live Regions

여기에 실시간 메시지가 표시됩니다.

3. 접근성 있는 폼

개인 정보
한글 또는 영문으로 입력
형식: 010-1234-5678
연락 선호 방법
연락 방법 선택
관심 분야 (복수 선택 가능)
추가 정보
최대 500자

4. 키보드 내비게이션

키보드 단축키

주요 키보드 단축키
키 동작
Tab 다음 포커스 가능한 요소로 이동
Shift + Tab 이전 포커스 가능한 요소로 이동
Enter / Space 버튼 활성화, 링크 클릭
↑ ↓ 라디오 버튼, 드롭다운 선택
Esc 모달 닫기, 동작 취소

커스텀 키보드 내비게이션

화살표 키로 항목을 탐색하고 Enter로 선택하세요.

  • 🍎 사과
  • 🍊 오렌지
  • 🍇 포도
  • 🍓 딸기
  • 🍌 바나나

선택된 항목: 사과

5. 포커스 관리

모달 다이얼로그

포커스 트랩 예제

아래 영역 내에서 Tab 키를 누르면 포커스가 순환합니다.

링크

6. 색상 대비

좋은 대비 (4.5:1 이상)

이 텍스트는 읽기 쉽습니다.

나쁜 대비 (피해야 함)

이 텍스트는 읽기 어렵습니다.