접근성: 사용자 지정 웹 애플리케이션에 ARIA 속성 추가하기

3 분 분량
ARIA 속성은 스크린 리더와 같은 보조 기술 요소의 의미 체계에 대한 추가 정보를 제공합니다. ARIA 속성을 사이트의 모든 사용자 지정 요소 또는 애플리케이션에 추가할 수 있습니다.
ARIA 속성은 요소의 기본 HTML로 액세스할 수 없는 경우 사용자 지정 요소 및 애플리케이션에 액세스할 수 있는 방법을 정의하므로 중요합니다. 
중요!
이 기능은 ARIA 속성이 필요한 사용자 지정 애플리케이션/요소를 보유한 사용자를 대상으로 합니다. 사이트에 ARIA 속성이 없다면 ARIA 속성을 편집할 필요가 없습니다.

ARIA 속성 추가하기

에디터 내 대부분의 요소의 ARIA 속성은 이미 하드코딩되어 있습니다. 하지만 사용자 지정 애플리케이션을 추가한 경우 접근성을 위해 고유한 ARIA 속성을 추가할 수 있습니다.

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 속성 편집하기

사용자 지정 애플리케이션에 속성을 추가한 후 접근성 아이콘을 사용해 언제든지 속성을 편집 및 업데이트할 수 있습니다. 이 아이콘은 속성을 연결한 요소에 자동으로 추가됩니다.

속성을 편집하려면:

  1. 사이트 빌더에서 요소/어플리케이션을 선택합니다.
  2. 접근성 아이콘을 선택합니다.
  3. 해당 속성에 마우스오버한 후 더보기 아이콘을 선택합니다.
  4. 편집을 선택합니다.
  5. 원하는 대로 변경하고 저장을 선택합니다.

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 속성은 삭제되지 않습니다.

도움이 되었나요?

|