접근성: 사용자 지정 웹 애플리케이션에 ARIA 속성 추가하기
3 분 분량
ARIA 속성은 스크린 리더와 같은 보조 기술 요소의 의미 체계에 대한 추가 정보를 제공합니다. ARIA 속성을 사이트의 모든 사용자 지정 요소 또는 애플리케이션에 추가할 수 있습니다.
ARIA 속성은 요소의 기본 HTML로 액세스할 수 없는 경우 사용자 지정 요소 및 애플리케이션에 액세스할 수 있는 방법을 정의하므로 중요합니다.
중요!
이 기능은 ARIA 속성이 필요한 사용자 지정 애플리케이션/요소를 보유한 사용자를 대상으로 합니다. 사이트에 ARIA 속성이 없다면 ARIA 속성을 편집할 필요가 없습니다.
ARIA 속성 추가하기
에디터 내 대부분의 요소의 ARIA 속성은 이미 하드코딩되어 있습니다. 하지만 사용자 지정 애플리케이션을 추가한 경우 접근성을 위해 고유한 ARIA 속성을 추가할 수 있습니다.
에디터에서 속성 추가하기
에디터 X에서 속성 추가하기
ARIA 속성을 다음 요소에 추가할 수 있습니다.
요소 | 속성 |
---|---|
라이트박스 | label |
텍스트 | |
컨테이너 상자 | label, tabindex, role [region, group, none, status, alert], live, relevant, atomic, current, controls, hidden |
스트립 | label, tabindex, role [heading, status, alert], live, atomic, hidden, current |
반복 레이아웃 | label, role [heading, status, alert] |
텍스트 버튼 | tabindex, pressed, expanded, haspopup |
더 많은 요소에 ARIA 속성을 추가할 수 있는 기능을 지속적으로 개발하고 있습니다. [문의하기해 주세요.
ARIA 속성 편집하기
사용자 지정 애플리케이션에 속성을 추가한 후 접근성
아이콘을 사용해 언제든지 속성을 편집 및 업데이트할 수 있습니다. 이 아이콘은 속성을 연결한 요소에 자동으로 추가됩니다.
속성을 편집하려면:
- 사이트 빌더에서 요소/어플리케이션을 선택합니다.
- 접근성
아이콘을 선택합니다.
- 해당 속성에 마우스오버한 후 더보기
아이콘을 선택합니다.
- 편집을 선택합니다.
- 원하는 대로 변경하고 저장을 선택합니다.
ARIA 속성 유형
속성 이름 | 카테고리 | 토큰 |
---|---|---|
tabindex | 0, -1 | |
역할 | token: 원시 내 정의에 따름 | |
aria-level | int | |
aria-live | 라이브 | token: polite, assertive |
aria-multiline | 설명 | true, false |
aria-multiselectable | 설명 | true, false |
aria-pressed | 시/도/주/지역 | true, false |
aria-relevant | 라이브 | token: all, additions, removals, text |
aria-activedescendant | 관계 | ID_REF |
aria-atomic | 라이브 | true, false |
aria-autocomplete | 설명 | true, false |
aria-controls | 관계 | ID_REF |
aria-current | 시/도/주/지역 | step, page, true, false |
aria-descriptions | 관계 | ID_REF (공백으로 구분된 아이템) |
aria-expanded | true, false | |
aria-haspopup | 관계 | dialog, menu, true, false |
aria-hidden | true, false | |
aria-invalid | 시/도/주/지역 | true, false |
aria-label | string | |
aria-labelledby | 관계 | ID_REF (공백으로 구분된 아이템) |
중요!
고급 접근성 설정은 언제든지 비활성화할 수 있으며 ARIA 속성은 삭제되지 않습니다.