접근성 개선을 위한 개발자 실전 가이드

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

웹 개발자, 특히 JavaScript 기반 애플리케이션 개발자

난이도: 중급 (WCAG 가이드라인 이해 필요)

핵심 요약

• ARIA는 JavaScript 기반 애플리케이션에서 접근성을 향상시키기 위한 역할과 속성의 집합으로, aria- 속성을 사용하여 구현 (aria-describedby, aria-pressed 등*)
• Accessibility Tree는 DOM과 독립적으로 생성되며, semantic HTML(, )과 visibility-related CSS(display: none, visibility: hidden)를 기반으로 구성
• Source Order vs. Tab Order를 구분하여 키보드 네비게이션을 최적화해야 하며, 태그는 tabindex="0"을 추가해야 탭 순서에 포함됨

섹션별 세부 요약

1. ARIA와 접근성 기초

• ARIA는 스크린 리더 등 보조 기술과의 호환성을 높이기 위한 DOM API의 접근성 대응 메커니즘
• ARIA 속성(aria-label, aria-describedby)은 세마틱 HTML이 제공하지 않는 기능을 보완
• 접근성 트리(Accessibility Tree)는 DOM 트리와 별도로 생성되며, 의미 있는 요소만 포함

2. 접근성 트리의 구조와 활용

• 접근성 트리의 구성 요소:

- 세마틱 HTML(,

- ARIA 속성

- CSS 시각성 관련 속성(display, visibility)

- 요소 상태 및 콘텐츠

• DevTools에서 접근성 트리 시각화 기능 활성화 방법: Settings > Experiments > Enable Full Accessibility Tree View
• Ignored 노드는 접근성 트리에 영향을 주지 않음

3. Source Order vs. Tab Order

• Source Order: DOM 내 노드의 순서
• Tab Order: tabindex 속성 기반으로 구성된 키보드 순서
• 태그는 기본적으로 tabindex가 없으므로 키보드 순서에 포함되지 않음
• 테스트 도구: Taba11y, Polypane 활용

4. 세마틱 HTML의 중요성

• , ,
  등 세마틱 HTML 요소는 접근성 트리 생성 시 모호함을 줄이고, WCAG 2.1 A/AA 기준의 80%를 충족
• 예시: 요소 사용 시 ARIA 속성과 별도의 키보드 이벤트 핸들러 필요 없음
• 불필요한 ARIA 속성 추가는 혼란 유발 가능

결론

• 세마틱 HTML을 기반으로 접근성 트리를 구성하고, ARIA 속성을 전략적으로 활용하여 스크린 리더와의 호환성을 강화해야 함
• tabindex와 aria-pressed 등의 속성을 통해 키보드 네비게이션을 명확히 정의하고, DevTools 및 Taba11y 등 도구로 접근성 테스트를 수행해야 함
• 최종 목표: 모든 사용자(시각, 청각, 운동 기능 제한자 포함)에게 명확하고 접근 가능한 웹 경험 제공