WAI-ARIA 1.2 · WCAG 2.2 · KWCAG 2.2 · 모바일 앱 지침

보고, 고쳐 보고, 물어보며 배우는
웹 접근성

화면낭독기는 요소의 이름·역할·상태를 읽어 줍니다. ARIA는 그 정보를 채우는 도구이고, 접근성 지침은 무엇을 지켜야 하는지 알려 줍니다. 기본 개념부터 속성·역할 하나하나, 국내외 지침까지 한곳에 정리하고 직접 실습할 수 있게 만들었습니다.

기본 개념부터 시작하기 속성 찾아보기 역할 찾아보기 실습실 열기

ARIA 속성: 53
ARIA 역할: 81
컴포넌트 패턴: 19
지침 항목: 160
가이드 문서: 20

직접 해 보기

학습 순서

이번 주의 속성

상태

aria-checked

체크 상자·라디오 버튼·스위치가 체크되었는지, 해제되었는지, 일부만 체크되었는지 알립니다.

· 자주 쓰는 속성 16개가 매주 돌아가며 소개됩니다.

가장 많이 쓰는 속성

aria-checked
체크 상자·라디오 버튼·스위치가 체크되었는지, 해제되었는지, 일부만 체크되었는지 알립니다.

상태기초
aria-controls
이 요소가 내용이나 표시 여부를 제어하는 다른 요소를 ID로 연결합니다.

속성기초
aria-current
여러 항목 중 현재 페이지·현재 단계·현재 위치에 해당하는 항목을 표시합니다.

상태기초
aria-describedby
다른 요소의 텍스트를 ID로 참조해 이름 뒤에 읽히는 접근 가능한 설명으로 씁니다.

속성기초
aria-disabled
요소가 보이고 포커스도 받지만 지금은 조작할 수 없음을 알립니다.

상태기초
aria-expanded
버튼 등이 제어하는 영역이 펼쳐졌는지 접혔는지 알립니다.

상태기초
aria-haspopup
요소를 조작하면 메뉴·목록·트리·그리드·대화상자 같은 팝업이 열린다는 것과 그 종류를 알립니다.

속성중급
aria-hidden
화면에는 보이지만 보조기술에서는 숨길 요소를 표시합니다. 하위 요소 전체가 접근성 트리에서 빠집니다.

상태기초
aria-invalid
입력한 값이 요구 형식에 맞지 않음을 알립니다. 오류 메시지와 함께 씁니다.

상태기초
aria-label
화면에 보이는 텍스트가 없거나 부족한 요소에 문자열로 직접 접근 가능한 이름을 붙입니다.

속성기초
aria-labelledby
페이지에 있는 다른 요소의 텍스트를 ID로 참조해 접근 가능한 이름으로 씁니다.

속성기초
aria-live
영역의 내용이 바뀌면 포커스가 없어도 화면낭독기가 자동으로 읽어 주도록 하고, 그 긴급도를 정합니다.

속성기초
aria-modal
대화상자가 모달이라서, 열려 있는 동안 바깥 콘텐츠를 사용할 수 없다는 것을 알립니다.

속성중급
aria-pressed
버튼을 토글 버튼으로 만들고, 지금 눌린(켜진) 상태인지 알립니다.

상태기초
aria-required
양식을 제출하기 전에 반드시 입력하거나 선택해야 하는 항목임을 알립니다.

속성기초
aria-selected
탭·목록 상자 옵션·그리드 셀처럼 고를 수 있는 항목이 현재 선택되었는지 알립니다.

상태기초

속성 53개 전체 보기

역할 분류

접근성 지침

ARIA 사용 5원칙

HTML 요소로 되면 HTML을 쓴다. <button>이 있는데 <div role="button">을 만들지 않습니다.
HTML이 가진 의미를 바꾸지 않는다. 제목 태그에 role="button"을 붙이지 않습니다.
ARIA 위젯은 키보드로 조작돼야 한다. 역할을 줬다면 키보드 동작도 만들어야 합니다.
포커스 받는 요소를 숨기지 않는다. 버튼에 aria-hidden="true"나 role="presentation"을 쓰지 않습니다.
조작 요소에는 접근 가능한 이름이 있어야 한다. 아이콘 버튼도 무엇을 하는지 읽혀야 합니다.

원칙 자세히 보기

테스트할 때

화면낭독기(NVDA·센스리더·VoiceOver)로 직접 들어 보는 방법과 검수 체크리스트를 정리했습니다.

화면낭독기로 테스트하기

보고, 고쳐 보고, 물어보며 배우는웹 접근성