의미 있는 HTML과 ARIA: 접근성 향상 없이 과도한 사용 없이

카테고리

디자인

서브카테고리

UX 디자인

대상자

웹 개발자 및 UX 디자이너에게 유용하며, 접근성 기초 지식을 가진 중급 수준의 개발자에게 적합

핵심 요약

• 의미 있는 HTML은 브라우저 및 보조 기술에 자동으로 접근성 정보(역할, 상태, 접근 가능한 이름)를 제공하여 기본적인 키보드 네비게이션과 스크린 리더 지원을 활성화한다.
• ARIA(Accessible Rich Internet Applications)는 커스텀 컴포넌트(예: 슬라이더, 탭 인터페이스)에서 의미 있는 HTML이 제공하지 못하는 접근성 틈을 메우기 위해 역할, 상태, 속성을 추가한다.
• W3C에 따른 ARIA 사용 원칙: 의미 있는 HTML 우선, 보조 기술 호환성, 키보드 사용 가능성, 접근 가능한 이름 제공이 필수적이다.

섹션별 세부 요약

1. 의미 있는 HTML의 중요성

• 의미 있는 HTML 요소(예:
  , , )는 브라우저, 검색 엔진, 스크린 리더에게 내장된 의미와 동작을 제공한다.
• 비의미 있는 HTML 사용 시, 스크린 리더가 헤딩, 버튼, 입력 필드 등 핵심 요소를 식별하는 데 어려움이 발생한다.
• 예: 요소는 역할(checkbox), 상태(checked), 접근 가능한 이름(레이블 텍스트)을 자동으로 제공한다.

2. 네이티브 HTML 요소의 접근성 이점

• 키보드 인터랙티비티: 는 탭 키로 포커스 가능하며, 스페이스바로 상태 전환 가능하다.
• 일관된 동작: 네이티브 요소는 브라우저 및 운영체제 간 예측 가능한 행동을 보장한다.
• JavaScript 없이 기본 동작: 키보드, 스크린 리더 사용자에게 자연스러운 경험을 제공한다.

3. ARIA 사용 시기와 예시

• 커스텀 컴포넌트(예: 프로그레스 바, 탭 인터페이스)에서 의미 있는 HTML이 제공하지 못할 경우 ARIA 속성을 사용한다.
• 예:
  는 접근성 트리에 정보를 추가하여 스크린 리더에 현재 진행률을 전달한다.

4. W3C의 ARIA 사용 원칙

• 1. ARIA 사용 제한: 네이티브 HTML 요소가 제공하는 기능이 있을 경우 ARIA 사용은 피해야 한다(예: 를 버튼으로 사용하는 것은 비추천).
• 2. 네이티브 의미 변경 금지: ARIA를 사용해도 원래의 의미가 파괴되지 않도록 해야 한다.
• 3. 키보드 사용 가능성: 커스텀 위젯은 탭, 스페이스바 등 기본 키보드 동작을 지원해야 한다.
• 4. 포커스 가능한 요소 감춤 금지: 버튼, 링크 등 접근 가능한 요소는 aria-hidden="true" 사용 금지.
• 5. 모든 인터랙티브 요소에 접근 가능한 이름 제공: 모든 버튼, 입력 필드에는 레이블 또는 aria-label이 필수적이다.

결론

• 의미 있는 HTML을 우선적으로 사용하고, ARIA는 필요 시만 적용하며 W3C 가이드라인을 준수하는 것이 접근성 향상에 핵심이다.
• 예시: 는 네이티브 요소로 사용하여 스크린 리더 및 키보드 사용자에게 자동으로 제공되는 접근성 기능을 활용해야 한다.
• 핵심 팁: ARIA 속성은 네이티브 요소의 한계를 보완하기 위한 도구이며, 과도한 사용은 피해야 한다.