aria

- aria-controls

: aria-controls는 선택한 요소에 영향을 받는 하위 요소가 현재 포커스 한 라인과 떨어져 있을 경우 스크린리더 사용자가 하위 요소가 열린 위치를 파악하기 어려우므로 관련된 하위 요소로 바로 이동할 수 있도록 해 주는 역할.

: tab 역시 특정 tab을 선택한 경우 tab 패널이 시작되는 부분으로 바로 이동할 수 있도록 aria-controls를 포함.

: tab의 aria-controls와 해당 패널의 id값을 같게 해주기

 

- aria-selected

: 선택된 tab은 스크린리더 사용자에게 선택된 tab임을 알려주어야하므로 aria-selected = "true"/"false"를 사용하여 선택된 tab 요소를 알려줌

 

- aria-labelledby

: 화면에 현재 요소를 설명할 텍스트가 있을 경우에 해당 텍스트 영역과 현재 요소를 연결할 때 사용.여러개의 폼 요소를 그룹화하여 동일한 label 값으로 묶고 싶을 때 사용

 

- aria-describedly

: aria-labelledby와 유사하며 모든 html 요소에 사용 가능하며 aria-labelledby보다 더 상세한 설명이 제공되어야 할 때 사용할 수 있음

 

- aria-hidden

: 스크린 리더와 같은 보조 기술을 사용하는 사용자를 대상으로 콘텐츠의 탐색을 제한함.: aria-hidden = "true"/"false"

: true는 스크린 리더로 해당 콘텐츠를 가상 커서로 탐색할 수 없음.

: false는 스크린 리더와 같은 보조기술 사용자에게 숨겨진 콘텐츠를 노출하여 콘텐츠를 탐색할 수 있음.

 

- aria-modal

: 접근성 API는 스크린 리더기와 같은 보조 기술에서 modal 대화상자 내에서만 콘텐츠가 탐색되도록 알림.

: aria-modal = "true"/"false"

: true는 modal 대화상자 내에서만 콘텐츠를 탐색할 수 있도록 제한함.

: false는 modal 대화상자 외부의 콘텐츠를 탐색할 수 있도록 설정함.

 

- aria-expanded

: 현재 탭 패널이 펼쳐져 활성화 상태라는 것을 전달

: aria-expanded = "true"/"false"

: true는 활성화

: false는 비활성화

 

- aria-autocomplete

: 자동완성이 가능한 요소임을 알 수 있도록 사용자에게 알려주는 역할

: aria-autocomplete = "none" 기본값으로 속성을 제공하지 않은 상태, 값이 없을 경우 사용자가 요소에 포커스를 해도 자동완성 요소임을 알리지 않음

: aria-autocomplete = "inline" 직렬형 자동완성 편집 요소임을 명시

: aria-autocomplete = "list" 목록형 자동완성 편집 요소임을 명시

: aria-autocomplete = "both" 목록형과 직렬형 둘다 포함한 요소임을 명시

 

- aria-owns

: 서로 구조상 관계가 없는 요소를 연결하는 역할

: 시각적으로는 어떤 하위 메뉴가 상위 메뉴의 근처에 위치하지만 dom에서 상위 항목의 하위 메뉴가 될 수 없을 때 스크린리더에 알려주기위해 사용(input은 닫는 태그 없이 셀프로 닫는 요소로 자손 요소를 둘 수 없어서 이때 aria-owns를 사용하여 input의 자손처럼 스크린리더가 인식할 수 있도록 input과 그 자손 요소를 연결하는 것)

: 속성의 값은 htm의 ID이며 aria-owns에 입력된 ID와 일치하는 요소를 자손 요소로 스크린리더에게 전달함

 

- aria-haspopup

: 메뉴를 열기 위한 버튼, 메뉴 향목이 서브메뉴를 가진 경우의 버튼, 해당 버튼이 팝업 메뉴를 가지고 있는 버튼의 경우 스크린리더에 알려줌

: 요소에 연결되어 있는 팝업(다른 내용 위에 표시하는 블럭)에 대한 정보 제공

: aria-haspopup = "true" "menu"와 동일한 의미

: aria-haspopup = "menu" menu(role)는 링크 목록

: aria-haspopup = "dialog" dialog는 상호작용 요소가 포함된 현재 문서의 하위창

: aria-haspopup = "listbox" listbox는 선택 가능한 option을 포함한 콤보박스

: aria-haspopup = "tree" tree는 하위 list를 포함하고 접고 펼칠 수 있는 것

: aria-haspopup = "gird" grid는 행과 열로 구성된 선택 가능한 위젯, 상호작용이 가능한 셀이기 때문에 table과는 역할이 다름

: aria-haspopup = "false" false는 연결된 팝업이 없음을 의미

: 연결한 팝업의 role이 암시적인 경우에도 aria-haspopup 속성을 연결할 수 있음(연결된 팝업이 <dialog> 요소라면 암시적으로 role = "dialog" 속성을 지닌 것이므로 aria-haspopup = "dialog" 속성 사용 가능

 

- aria-activedescendant

: 현재 선택된 내 아이

: 스크린리더 사용자의 실제 초점과 가상 커서는 편집창에 위치하고 있으나 마치 초점이 어떠한 요소를 탐색하는 것과 같이 속성값을 제공한 ID와 일치하는 요소를 읽게끔 전달

: 속성의 값은 htm의 ID이며 aria-activedescendant에 입력된 ID와 일치하는 요소를 스크린리더에게 전달함

: 현재 하위 항목 중 선택된 값을 스크린리더에게 알려줄 때 사용

: 현재 선택한 항목에 맞춰 계속 업데이트하여 상태를 나타낼 수 있으며 스크린리더는 현재 선택한 항목이 마치 포커스된 항목인 것처럼 나타나게 할 수 있음

 

- aria-disabled

: 요소가 인식 가능하지만 비활성화를 시켜 편집하거나 작동할 수 없을 때 사용

: aria-disabled = "true"/"false"

: true 는 요소 및 포커스 가능한 하위 항목이 비활성화되고 사용자가 변경할 수 없음

: false는 기본값으로 요소 활성화

 

- aria-current

: 관련 그룹과 그 관련 그룹을 나타내는 항목 요소를 사용자에게 이 요소가 관련 그룹과 관련된 요소임을 나타내주는 태그

: 항목 집합에서 항목을 식별하는데 사용함

: 속성값으로 정해진 값중에 하나를 사용해아함

: aria-selected 속성과 다른 의미로 사용되기 때문에 aria-selected 속성을 대체해서는 안됨

: aria-current = "true"/"flase"/"page"/"step"/"location"/"date"/"time"

: true와 false는 구분이 명확하지 않으므로 되도록 사용 안하는 것이 좋음

: true는 항목이 현재 세트와 일치함을 강조

: false는 기본값으로 항목이 현재 세트와 일치하지 않음을 강조

: page는 현재 페이지와 일치하는 것을 강조

: step는 현재 단계와 일치하는 것을 강조

: location은 현재 위치와 일치하는 것을 강조

: date는 달력에서 현재 날짜와 일치하는 것을 강조

: time은 시간표에서 현재 시간과 일치하는 시간

 

---

참고

https://nuli.navercorp.com/community/article/1132879

https://nuli.navercorp.com/community/article/1132697?email=true 

https://nuli.navercorp.com/community/article/1132937

https://inswave.com/confluence/pages/viewpage.action?pageId=19076563 

https://nuli.navercorp.com/community/article/1133011

https://aoa.gitbook.io/skymimo/aoa-2018/2018-aria/autocompletehttps://github.com/lezhin/accessibility/blob/master/aria/README.md#aria-haspopuphttps://velog.io/@a_in/WAI-ARIA-role-aria-label

https://www.digitala11y.com/aria-disabled-state/

https://www.aditus.io/aria/aria-current/