WAI-ARIA 요소 - 자동완성 편집창의 올바른 구현방법

편집 가능한 텍스트 편집창에 사용자가 내용을 입력할 때, 추천 목록을 제공하여 키보드 또는 마우스로 원하는 추천항목을 선택하여 완성하는 자동완성 편집창 기능을 WAI-ARIA를 중심으로 다룹니다.

 

이번 아티클은 크게 두 개의 부문으로 나뉩니다.

• 자동완성 편집 창의 유형
• 접근 가능한 자동완성 편집 창 구현하기

 

자동완성 편집 창의 유형

자동완성 편집창은 사용자의 상호작용 방법에 따라 크게 다음과 같은 세 가지 유형으로 나눌 수 있습니다.

• 직렬완성(inline) 형
• 목록선택(list) 형
• 복합(both) 형

 

직렬(inline)형 자동완성

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

직렬 완성형 자동완성 기능은 편집 중인 사용자에게 목록을 별도로 제공하지 않고, 캐럿 뒤에 사용자가 입력한 글자로 시작하는 단어가 입력되며, 블록으로 선택됩니다.

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

 

목록(list)형 자동완성

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

사용자가 편집창에 초점을 보냈을 때 자동완성 리스트가 제공됩니다. 대표적인 사례로는 파일 탐색기의 주소 표시줄이나 시작 메뉴의 검색을 예로 들 수 있습니다. 펼쳐진 목록을 방향키로 탐색할 시 편집창에 해당 내용이 들어오며, Enter를 눌러 해당 내용을 선택하는 방식입니다.

 

복합(both)형 자동완성

위에서 언급한 직렬형과 목록형을 모두 적용한 자동완성 유형으로 사용자가 입력한 글자와 가장 인접한 단어가 캐럿 뒤에 입력되며, 편집창 아래에 목록형과 같은 목록이 표시됩니다. 인라인으로 이미 표시중인 단어는 첫 번째 항목으로 선택된 상태로 표시됩니다. 대표적인 both 유형이 사례는 웹 브라우저의 주소 표시줄 입니다.

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

 

 

접근 가능한 자동완성 편집 창 구현하기

자동완성의 접근성을 이해하기 위해서는 자동완성 편집창을 구성하는 HTML 요소를 먼저 파악해야 합니다. 자동완성 편집창은 다음과 같은 태그의 마크업이 필요합니다.

// list형 목록을 기준으로 작성 됨
<form>
    <input type="text" id="search" aria-label="검색어 입력" placeholder="검색어를 입력하세요.">
    <button id="btn_search" aria-label="검색"></button>
    <ul id="ac-listbox">
        <li>...</li>
        ...
    </ul>
</form>

위 코드를 분석해 보자면

input에서 입력된 텍스트에 대한 값을 listbox 의 li 로 시각적으로 표시하여 사용자가 마우스나 방향 키로 해당 목록을 편집창에 채워 넣을 수 있다는 것을 알 수 있습니다. 위 마크업은 키보드 상호작용과 함께 제공한 경우, 시각적으로는 아무 문제가 없습니다. 하지만 위 마크업의 경우, 스크린리더 사용자가 텍스트 편집창에 초점을 이동했을 때, 하단 또는 상단에 목록이 확장되어 자동완성 목록이 표시됨을 전혀 인지할 수 없으며, 목록 정보를 제공받을 수 없습니다. 또한 스크린리더 사용자의 경우, 가상 커서를 활성화할 경우, 가상 커서가 listbox 요소에 접근되어 반복된 내용을 들어야 하는 불필요한 탐색이 발생하게 됩니다.

 

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

우리는 위 기본 마크업만으로 스크린리더 사용자가 자동완성 편집창을 사용할 수 없다는 문제점을 알았습니다. 이제 이를 해결하기 위해서 어떤 방법을 써야할까 알아볼 차례입니다.

 

input 요소의 접근성 속성

• role="combobox"의 사용
  직렬형 자동완성 요소가 아닌 확장하거나 축소할 수 있는 항목형이나 복합형의 경우 role="combobox"를 사용하여 스크린 리더 사용자가 확장 축소 가능한 요소임을 인지할 수 있도록 해야 하며, aria-expanded로 목록의 펼침/접힘 상태를, aria-haspopup="true"로 자동완성 항목이 있음을 명시할 수 있습니다.
• aria-autocomplete
  우선, 스크린리더 사용자가 자동완성이 가능한 편집 요소임을 알 수 있도록 하려면 사용자가 편집할 input 요소에 aria-autocomplete를 사용하고, 브라우저에서 제공하는 autocomplte속성을 비활성 상태로 변경해주어야 합니다.

<form>
    <input type="text" id="search" aria-label="검색어 입력" placeholder="검색어를 입력하세요." autocomplete="off" aria-autocomplete="list">
    ...
</form>

aria-autocomplte는 총 4가지 속성을 가지고 있습니다.

1. none (기본값)
   속성을 제공하지 않은 상태이거나, 값이 없을 경우, 기본값은 none으로, 사용자가 편집 요소에 초점을 보내도 자동완성 요소임을 알리지 않습니다.
2. inline
   직렬형 자동완성 편집 요소임을 명시합니다.
3. list
   목록형 자동완성 편집 요소임을 명시합니다.
4. both
   목록형과 직렬형을 포괄한 복합형 요소임을 명시합니다.

위 속성 값에 따른 스크린리더 사용자에게 제공되는 음성 출력 내용은 다르지 않으며, 속성값은 개발자를 위한 명시에 가깝습니다.

따라서 none을 제외한 나머지 속성값을 제공하여 스크린리더 사용자가 편집창에 초점을 보냈을 시, 음성을 통해 자동완성 기능을 사용할 수 있다는 음성이 출력할 수 있도록 할 수 있습니다.

• aria-owns
  aria-owns 속성은 서로 구조상 관계가 없는 요소를 연결하는 역할을 수행합니다. input 요소는 닫는 태그가 별도로 없는 셀프 클로징 요소로 자손 요소를 둘 수 없습니다. 따라서 aria-owns를 사용하여 input의 자손처럼 스크린리더가 인식할 수 있도록 listbox 요소를 연결하는 것입니다.

<form>
    <input type="text" id="search" aria-label="검색어 입력" placeholder="검색어를 입력하세요." autocomplte="off" aria-autocomplate="list" aria-owns="ac-listbox">
    ...
</form>

aria-owns의 속성 값은 HTML ID이며, aria-owns에 입력된 ID와 일치하는 요소를 자손 요소로 스크린리더 사용자에게 전달합니다.

• aria-activedescendant
  aria-activedescendant는 aria-owns와 마찬가지로 HTML id 값을 받는 속성으로 스크린리더 사용자의 실제 초점과 가상 커서는 편집창에 위치하고 있으나, 마치 초점이 어떠한 요소로 탐색하는 것과 같이 속성값에 제공한 id와 리치하는 요소를 읽게끔 전달합니다.
  이 속성을 통해 스크린리더 사용자는 별도로 자동완성 항목의 개수를 제공하지 않아도 목록 항목 개수를 제공받을 수 있습니다.
  목록 및 항목 요소에 대한 접근성 속성
  목록 ul에는 role="listbox"를 사용하여 콤보 상자의 목록상자임을 명시해야 하며
  목록 요소 하위에 위치한 항목, li 태그에는 role="option"을 제공하여 콤보 박스의 option 항목으로 인식될 수 있도록 해야 합니다.
  접근성이 제공된 HTML 마크업 형태
  다음은 사용자가 편집창에 "사" 라고 입력하였을 때 자동완성 상태를 마크업 형태로 표현한 것입니다.

<form>
    <input type="text" role="combobox" id="search" aria-label="검색어 입력" placeholder="검색어를 입력하세요." aria-owns="ac-listbox" aria-activedescendant="ac_list_selected">
    <button id="btn_search" aria-label="검색"></button>
    <ul id="ac-listbox">
        <li id="ac_list_selected" role="option">사과</li>
        <li role="option">포도</li>
        <li role="option">...</li>
        ...
    </ul>
</form>

사용자가 "사"를 입력했기 때문에 데이터베이스에서 "사"자로 시작하는 "사과"를 표시할 것이며, 사용자가 아래 화살표 키를 눌렀을 때, "사과"가 activedescendant로 선택되어 스크린리더 사용자에게 음성으로 전달될 것입니다.

 

 

자동완성 UI 상호작용 제공

자동완성은 다음과 같은 UI 상호 작용 이벤트를 제공해야 합니다.

 

목록 항목에 대한 click 이벤트

마우스 사용자는 원하는 단어를 입력하여 나타난 자동완성 목록을 마우스 왼쪽 버튼 클릭으로 선택할 수 있어야 합니다.

 

목록 항목에 대한 키보드 이벤트 제공

자동완성 요소는 다음과 같은 키보드 상호작용을 필수로 제공해야 합니다.

• 위 화살표 키(keycode 38), 아래 화살표 키(keycode 40): 이전/다음 자동완성 목록 항목 탐색
  스크린리더 사용자와 키보드 사용자가 자동완성 항목을 선택할 수 있도록 항목 탐색 단축키를 제공해야 합니다. 마지막 항목에서 다음 항목 탐색 진행 시, 첫 번째 항목으로 순환되어야 하며, 마찬가지로 첫 번째 항목에서 이전 항목 탐색 진행 시 마지막 항목으로 순환되어야 합니다.
• Enter 키(kecode 13)
  자동완성 편집을 종료하고, 목록 상자가 축소되어야 합니다. (검색의 경우, 검색이 진행되어야 합니다.)
• Escape 키(keycode 27)
  ESC 키를 눌러 자동완성 목록 상자를 축소할 수 있어야 합니다.
• Option 요소에 button이나 a 태그와 같은 초점이 있는 요소가 함께 제공되었을 경우, 별도의 초점 처리가 필요합니다.
  a나 button 요소와 같은 기본 초점이 있는 요소가 목록 상자의 옵션 요소 하위에 제공된 경우, 해당 a 요소나 button 요소는 Tab키로 탐색되지 않도록 tabindex="-1"로 제공해야 하며, role="none"으로 해당 요소명을 읽지 않도록 제공해주어야 합니다.

 

국내 웹사이트의 자동완성 요소의 경우, 대부분이 커스텀 요소이기 때문에 이번 아티클에서 다룬 내용을 적용한다면 스크린리더 사용자의 정보접근성 향상을 기대할 수 있습니다.

 

 

콤보상자 예제

https://www.w3.org/WAI/ARIA/apg/example-index/ 

 

 

참고:)

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

WAI-ARIA 바르게 사용하기 8부 – 자동완성 편집창의 올바른 구현방법