ARIA 상태와 속성

🍰 WAI-ARIA 속성들 정리

ARIA 속성 유형

1. Widget 속성 - 웹 페이지의 상호 작용 요소를 식별하고 기능을 정의
2. Live region 속성 - 웹 페이지의 내용이 동적으로 업데이트되는 영역을 식별하고 스크린 리더에 알림
3. Drag-and-Drop 속성 - 웹 페이지에서 드래그 앤 드롭 기능을 구현하고 접근성을 향상시킴
4. Relationship 속성 - 웹 페이지의 요소들 간의 관계를 정의하고 의미를 명확하게 전달함

aria-haspopup - 해당 요소와 연결된 팝업 창이나 메뉴가 있는지 여부 나타냄

• true - 요소에 연결된 팝업이 있음
• false - 요소에 연결된 팝업이 없음(기본값)

aria-controls - 현재 요소가 제어하는 요소(들)을 식별함

• ex. 탭 패널을 제어하는 탭과 같이 다른 요소를 제어하는 요소에 사용됨
• 현재 요소가 제어하는 요소의 ID 목록을 공백으로 구분함

aria-expended - 확장하거나 축소할 수 있는 요소의 현재 확장 상태를 나타냄

• ex. 아코디언, 메뉴, 트리뷰 같이 열거나 닫을 수 있는 요소에 사용됨
• true - 요소가 현재 확장되어 있음
• false - 요소가 현재 축소되어 있음(기본값)

aria-pressed - 토글 버튼이 현재 활성화 되어 있는지 여부

• true - 요소가 현재 눌려 있거나 활성화되어 있음
• false - 요소가 현재 눌리지 않거나 비활성화되어 있음(기본값)

aria-label - 요소의 기능이나 용도에 대한 텍스트 설명을 제공

• 요소의 시각적 표현만으로는 의미가 명확하게 전달되지 않는 경우 사용

aria-labelledby - 현재 요소의 설명을 제공하는 다른 요소를 참조

• aria-label과 유사하지만 설명을 위해 기존 콘텐츠 (제목, 단락)를 참조

aria-describedby - 현재 요소에 대한 추가 설명 텍스트를 제공하는 하나 이상의 요소를 참조

• aria-label 또는 aria-labelledby 외에 요소에 대한 추가 설명이 필요한 경우 사용