自动完成的问题及其解决方法

关于

自动完成功能对于您的网站来说是一款非常棒的工具。它可以帮助您的用户找到他们想要的内容，比他们输入所有内容并点击搜索按钮要快得多。

例如，如果我使用名为“首都搜索”的首都城市搜索引擎搜索“尼科西亚”，无需输入全名并点击“搜索”，只需输入前2-3个字母（“nic”），结果就会显示在文本框下方。现在我只需点击它，就能直接进入网站！

CodePen 上提供的交互式页面

然而，与用户的这种即时互动会带来一个小而重要的问题。

自动完成代码的快速概览

在探讨自动完成的问题之前，我们先来看看当前的代码是什么样的。完整代码可以在这里找到。它的工作原理非常简单：

用户在输入字段中输入
每次用户输入内容时，都会过滤掉一个首都列表，从而得到以用户输入字符串开头的所有首都列表。例如，如果我输入“n”，搜索结果中就会返回“拿骚”、“尼科西亚”、“内罗毕”等城市。
结果以列表形式显示在输入框下方。
点击某个项目就会将用户带到该城市的维基百科页面。

问题

自动完成功能的问题与可访问性有关，特别是与屏幕阅读器软件的可访问性有关。每次用户在输入框中输入内容时，页面状态都会发生变化：自动完成的结果会更新并呈现给用户。

然而，屏幕阅读器无法将此识别为告知用户的操作。当标题（“Capital Search”）和输入框获得焦点时，它会读出它们，但不会读出搜索结果。

作为开发人员，您需要采取一些措施来告诉屏幕阅读器用户在输入搜索内容时找到了多少个结果。

解决方案：“实时区域”

解决这个问题的方法是我们所说的“ARIA 实时区域”。我们基本上是使用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;
}

完整代码可在 CodePen 获取

就这样！你的自动完成功能现已准备就绪，屏幕阅读器用户可以访问。每次结果数量发生变化时，屏幕阅读器都会通知用户。太棒了！

请在这里或在 Twitter 上告诉我你觉得这个教程怎么样。它是否帮助你让自动完成功能更易于使用？

文章来源：https://dev.to/savvasstephnds/the-problem-with-autocomplete-and-how-to-fix-it-2ill