01
토큰 그대로 검색하기
button, role=button, aria-expanded로 찾을 수 있습니다. 분류를 바꿔도 내장된 항목만 필터링하며 외부 자료를 자동으로 내려받지 않습니다.
개발자 참고 자료
ARIA 역할및 속성 참고
역할 이름이나 aria-* 속성으로 찾고 예제, 동작 조건, 규격 출처를 한자리에서 살펴보세요.
ARIA 역할
검색 결과
button
역할button 역할은 동작을 시작하며 기본 button 요소는 포커스와 키보드 동작을 제공합니다.
키보드: 기본 HTML은 기초 키 동작을 제공합니다. 사용자 정의 역할이라면 같은 동작을 직접 만드세요.
주의: 기본 요소가 같은 의미와 동작을 제공하면 role을 중복하지 마세요.
핵심 요구사항: 없음
HTML 예제
<button type="button">Save</button>실제 컨트롤 시험
0회 실행
검색은 이 페이지 안에서만 처리합니다. 출처 링크를 누를 때만 외부 사이트가 열립니다.
분류
1개 표시 / 전체 16개
WAI-ARIA 1.2 · 2023-06-06자료 확인: 2026-09-23
사용자 정의 컨트롤에 의미를 붙이기 전 ARIA 역할이 필요한지 확인하세요. button과 input 같은 기본 HTML 요소는 이미 의미와 키보드 동작을 제공하지만 role 속성만으로는 동작이 생기지 않습니다.
이 ARIA 역할 자료는 흔히 쓰는 상태와 속성을 예제 및 규격 링크와 묶었습니다. 탭이나 대화 상자처럼 복잡한 패턴은 APG 안내를 열어 포커스 규칙까지 확인할 수 있습니다.
ARIA 역할 참고가 필요한 순간
의미, 키보드 동작, 근거 문서를 함께 확인합니다.
기본 HTML을 먼저 보기
button과 checkbox 항목은 원래 HTML 요소를 먼저 보여 줍니다. div에 ARIA 역할을 추가해도 포커스와 Enter·Space 처리까지 자동으로 생기지 않습니다.
상태와 화면을 함께 보기
aria-expanded 예제는 버튼과 제어 대상 영역을 연결합니다. ARIA 역할 또는 상태만 복사하면 안 되고 열림 여부가 바뀔 때 속성값도 갱신해야 합니다.
검색 결과를 실제 컴포넌트로 옮기기
02
복사 전에 상호작용 읽기
ARIA 역할 코드 조각은 의미를 보여 주는 출발점입니다. tab, dialog, combobox는 APG에서 키와 포커스 동작을 먼저 확인하세요.
03
버전과 실제 동작 대조하기
항목마다 고정된 WAI-ARIA 1.2 정의로 이동합니다. 구현 뒤 키보드와 스크린 리더로 포커스, 발표, 동작을 직접 시험하세요.
정의에서 사용 조건까지
두 종류를 한 번에 조회
8개 역할과 8개 aria-* 속성·상태를 검색합니다. 결과가 없다는 뜻은 전체 표준에 없는 항목이라는 뜻이 아닙니다.
예제와 출처 연결
각 항목은 HTML 조각과 WAI-ARIA 1.2 정의를 제공하고, 복합 위젯에는 APG 패턴 링크를 더합니다.
속성과 동작 구분
aria-expanded는 상태를 알릴 뿐 패널을 자동으로 열지 않습니다. 실제 표시 상태와 값을 함께 업데이트해야 합니다.
참고 자료의 판정 범위
- 16개 선별 항목만 수록
- 이 ARIA 역할 참고표는 전체 목록이 아닙니다. 검색에 없는 토큰은 무효라고 판단하지 말고 규격 원문에서 다시 확인하세요.
- 코드 조각은 완성된 위젯이 아님
- tab, dialog, 사용자 정의 checkbox를 복사해도 방향키, 포커스 복귀, 상태 변경 로직은 별도로 구현해야 합니다.
- WCAG 적합 판정 없음
- 페이지의 DOM이나 스크린 리더 결과를 검사하지 않습니다. 색 대비는 별도 도구를 사용하고 실제 사용자 작업은 수동으로 테스트하세요.
ARIA 역할에 관한 자주 묻는 질문
ARIA 역할은 언제 사용하나요?
기본 HTML이 필요한 의미와 동작을 제공하면 그것을 사용하세요. 기본 요소로 표현하기 어려운 위젯에서 ARIA 역할을 선택하고 상호작용을 직접 구현합니다.
role=button을 쓰면 키보드로 바로 작동하나요?
아니요. role=button은 보조 기술에 의미를 전달하지만 div에 포커스나 Enter·Space 동작을 추가하지 않습니다. 가능하면 button 요소를 사용하세요.
aria-label과 aria-labelledby의 차이는 무엇인가요?
aria-label은 이름을 문자열로 직접 넣고, aria-labelledby는 화면에 있는 다른 요소의 ID를 참조합니다. 보이는 레이블과 기본 label을 먼저 고려하세요.
역할에 필요한 ARIA 속성은 무엇인가요?
역할마다 필요한 상태와 관계가 다릅니다. 선택한 항목의 핵심 요구사항을 보고 완전한 규범 조건은 연결된 WAI-ARIA 1.2 원문에서 확인하세요.
ARIA만 추가하면 웹 접근성 검사를 통과하나요?
아니요. ARIA 역할 참고표는 의미를 찾는 도구입니다. 실제 콘텐츠, 키보드 경로, 보조 기술 경험과 사용자 작업을 검사해야 적합성을 판단할 수 있습니다.
누락되거나 잘못된 항목을 발견했나요?