자동완성 편집창

자동완성 편집창이란?

 

편집창에 사용자가 내용을 입력할 때 추천 목록을 제공하고 추천 항목을 선택하여 완성하는 자동완성 편집창을 말함

---

자동완성 편집창의 유형

직렬완성형(inline)

: 사용자에게 목록을 별도로 제공하지 않고 캐럿 뒤에 사용자가 입력한 글자로 시작하는 단어가 입력되며 블록으로 선택됨

: 입력서식에 글자 입력 시 단어가 자동완성

: 사용자가 추가로 글자를 입력할 때 추천 단어의 다음 글자와 일치할 경우 해당 추천 단어가 캐럿 뒤에 계속 표시되며 추천 단어와 글자가 일치하지 않으면 사라지는 구조

 

목록선택형(list)

: 사용자가 편집창에 초점을 보냈을 때 자동완성 리스트가 제공

: 펼쳐진 목록을 방향키로 탐색할 시 편집창에 해당 내용이 들어오며 엔터를 눌러 선택하는 방식

 

복합형(both)

: 직렬형과 목록형을 모두 적용한 자동완성 유형

: 사용자가 입력한 글자와 가장 인접한 단어가 캐럿 뒤에 입력되며 편집창 아래에 목록형 목록이 표시

---

스크린리더 사용자를 위한 WAI-ARIA 사용법

 

role = "combobox"

: 직렬형 자동완성 요소가 아닌 확장하거나 축소할 수 있는 항목형이나 복합형의 경우 role = "combobox"를 사용하여 스크린리더에 확장 축소 가능한 요소임을 알려줘야함

 

aria-expanded = "ture"/"false"

: 목록의 펼침 접힘 상태를 알려줌

 

aria-haspopup = "true"/"false"

: 자동완성 항목이 있음을 명시함

 

aria-autocomplete = "none"/"inline"/"list"/"both"

: 스크린리더 사용자에게 자동완성이 가능한 편집 요소임을 알 수 있도록 하려면 사용자가 편집할 input 요소에 aria-autocomplete를 사용하고

: none 기본값, 속성을 제공하지 않은 상태이거나 값이 없을 경우로 자동완성 요소임을 아리지 않음

: inline 직렬형 자동완성 편집 요소

: list 목록형 자동완성 편집 요소

: both 목록형과 직렬형 포괄한 복합형 요소

 

aria-owns = "id값"

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

: input 요소는 닫는 태그가 별도로 없는 셀프 클로징 요소로 자손 요소를 둘 수 없어서 이때 aria-owns를 사용하여 input의 자손처럼 스크린리더가 인식할 수 있게 listbox를 연결하는 것

 

aria-activedescendant = "id값"

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

: 이 속성을 통해 스크린리더 사용자는 별도로 자동완성 항목의 개수를 제공하지 않아도 목록 항목 개수를 제공 받을 수 있음

: 목록 ul에는 role = "listbox"라는 것을 명시해야함

: 목록 ul의 하위 요소인 li 태그에 role = "option"을 제공하여 option 항목의 인식을 도움

: 

 

---

참고

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