WAI-ARIA 역할·속성·상태
한국어 해설 KO
WAI-ARIA의 역할(Roles), 속성(Properties), 상태(States)를 이해하고, ARIA를 언제, 어떻게 사용해야 하는지 학습합니다.
학습 목표
ARIA의 역할, 속성, 상태의 차이를 설명할 수 있다
ARIA 사용의 첫 번째 규칙을 이해한다
주요 aria-* 속성(aria-label, aria-labelledby, aria-live 등)의 용도를 설명할 수 있다
aria-live 영역의 두 가지 값(polite, assertive)의 차이를 설명할 수 있다
WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications)는 시맨틱 HTML만으로 표현하기 어려운 복잡한 UI 패턴의 접근성을 보완하는 W3C 표준입니다.
ARIA의 3가지 핵심 개념: ① 역할(Roles) - 요소의 용도를 정의합니다. 예: role="button", role="dialog", role="tablist", role="alert" ② 속성(Properties) - 요소에 대한 추가 정보를 제공합니다. 예: aria-label="닫기", aria-labelledby="title-id", aria-required="true" ③ 상태(States) - 요소의 현재 상태를 나타냅니다. 예: aria-expanded="true", aria-checked="false", aria-disabled="true"
ARIA 사용의 첫 번째 규칙(First Rule of ARIA Use): '시맨틱 HTML이 동일한 역할을 할 수 있다면 ARIA를 사용하지 않는다.' 예를 들어 `<button>`을 사용할 수 있다면 `<div role="button">`을 사용하지 않아야 합니다.
주요 aria 속성: aria-label(레이블 직접 제공), aria-labelledby(다른 요소의 텍스트를 레이블로 참조), aria-describedby(추가 설명 제공), aria-hidden(보조기술에서 요소 숨기기), aria-required(필수 입력 표시), aria-invalid(유효성 검사 오류 표시).
aria-live 영역: 동적으로 변경되는 콘텐츠(알림, 오류 메시지, 로딩 상태 등)에 사용합니다. aria-live="polite"는 현재 읽기가 끝난 후 알리고, aria-live="assertive"는 현재 읽기를 중단하고 즉시 알립니다. assertive는 중요한 오류나 긴급 알림에만 사용해야 합니다.
Original Text EN
Understand WAI-ARIA Roles, Properties, and States and learn when and how to use ARIA correctly.
Learning Objectives
Explain the differences between ARIA Roles, Properties, and States
Understand the First Rule of ARIA Use
Describe the purpose of key aria-* attributes
Distinguish between aria-live='polite' and aria-live='assertive'
WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) is a W3C standard that supplements semantic HTML to make complex UI patterns accessible.
Three core ARIA concepts: ① Roles – define the purpose of an element (e.g., role="button", role="dialog") ② Properties – provide additional information about an element (e.g., aria-label, aria-required) ③ States – communicate the current condition of an element (e.g., aria-expanded, aria-checked, aria-disabled).
First Rule of ARIA Use: 'If you can use a native HTML element with the semantics you need, don't use ARIA.' For example, use `<button>` instead of `<div role="button">`.
Key aria attributes: aria-label (provide a label directly), aria-labelledby (reference another element as label), aria-describedby (provide additional description), aria-hidden (hide from assistive tech), aria-required (mark required fields), aria-invalid (mark validation errors).
aria-live regions: Used for dynamically updated content (notifications, errors, loading states). aria-live="polite" announces updates after the current speech finishes. aria-live="assertive" interrupts immediately. Use assertive only for critical errors or urgent alerts.