자동 완성의 문제점 및 해결 방법

에 대한

자동 완성은 웹사이트를 위한 놀라운 도구입니다. 사용자가 원하는 내용을 모두 입력하고 검색 버튼을 클릭할 때보다 훨씬 빠르게 찾을 수 있도록 도와줍니다.

예를 들어 "Capital Search"라는 수도 검색 엔진을 사용하여 "Nicosia"를 검색하는 경우 전체 이름을 입력하고 검색을 클릭하는 대신 처음 2-3개의 문자("nic")만 입력하면 됩니다. ) 그러면 결과가 텍스트 상자 바로 아래에 표시됩니다. 이제 클릭만 하면 바로 웹사이트로 이동합니다!



Interactive page available on CodePen

그러나 사용자와의 즉각적인 상호 작용에는 작지만 중요한 문제가 있습니다.

자동 완성 코드에 대한 간략한 개요

자동 완성 문제를 살펴보기 전에 현재 코드가 어떻게 생겼는지 살펴보겠습니다. full code is available here . 작동 방식은 매우 간단합니다.

사용자가 입력 필드에 입력합니다

.

사용자가 입력할 때마다 수도 목록이 필터링되어 사용자의 입력 문자열로 시작하는 모든 수도 목록을 가져옵니다. 예를 들어 "n"을 입력하면 "Nassau", "Nicosia", "Nairobi"등의 도시가 검색 결과로 반환됩니다.

결과가 입력 상자 아래에 목록으로 표시됩니다.

항목을 클릭하면 도시의 Wikipedia 페이지로 이동합니다.

문제

자동 완성 문제는 특히 스크린 리더 소프트웨어와 관련이 있습니다. 사용자가 입력 상자에 입력할 때마다 페이지 상태가 변경됩니다. 자동 완성 결과가 업데이트되어 사용자에게 표시됩니다.



그러나 스크린 리더는 이를 사용자에게 알려주는 동작으로 인식하지 않습니다. 헤더("Capital Search")와 입력 상자가 포커스를 받으면 알려 주지만 검색 결과는 알릴 수 없습니다.

개발자는 검색을 입력하는 동안 검색된 결과 수를 화면 판독기 사용자에게 알리기 위해 무언가를 배치해야 합니다.

솔루션: "라이브 영역"

이 문제에 대한 해결책은 우리가 "ARIA live region"이라고 부르는 것입니다. 기본적으로 aria-live 태그를 사용하여 <div> 를 만듭니다. 이 태그가 포함될 때마다 스크린 리더는 해당 콘텐츠에 발생하는 모든 변경 사항을 알립니다. 다음과 같습니다.

<div role="region" aria-live="polite">0 results found</div>

콘텐츠가 "2개 결과 발견됨"으로 변경되면 화면 판독기가 사용자에게 알립니다.

코드 업데이트

이제 라이브 영역을 포함하도록 위의 CodePen 링크에서 코드를 업데이트해야 합니다.

먼저 HTML에 영역을 추가해 보겠습니다.

<div id="page">
  <div id="container">
    <h1>Capital Search</h1>
    <div id="search">
      <div id="autocomplete">
        <input type="text" id="query" onkeyup="respondToSearchboxChange()"/>
        <ul id="results">
        </ul>
      </div>
    </div>
  </div>

</div>
+ <div id="live-region" role="region" aria-live="polite"></div>

이제 검색 결과가 변경될 때마다 라이브 영역을 업데이트하도록 Javascript 코드를 업데이트해야 합니다.

function respondToSearchboxChange(){
  var input = document.querySelector("#query").value

  var searchResults = []


  if(input.length > 0){
    searchResults = capitals.filter((capital) => capital.toLowerCase().startsWith(input))
  }
+  
+  document.querySelector("#live-region").innerHTML = `${searchResults.length} results found`

  document.querySelector("ul#results").innerHTML = searchResults.map((result) =>
    `<li><a href="https://en.wikipedia.org/wiki/${result}" target="_blank" rel="noreferrer">${result}</a></li>`
  ).join("")
}

마지막으로 페이지 자체에 영역이 표시되는 것을 원하지 않으므로 CSS를 사용하여 숨길 것입니다.

#live-region{
    position: fixed;
    top: -100px;
}

Full code available on CodePen

그게 다야! 이제 자동 완성이 준비되었으며 스크린 리더 사용자가 액세스할 수 있습니다. 결과 수가 변경될 때마다 화면 판독기가 사용자에게 알립니다. 대박!

이 자습서를 어떻게 찾았는지 여기 또는 에서 알려주십시오. 자동 완성 기능의 접근성을 높이는 데 도움이 되었습니까?