Javascript 叙述者应该读到；“没有搜索结果”；如果搜索时没有结果

我的html页面中有一个搜索框。 按enter键-过滤出下面显示的数据列表

屏幕阅读器的一个要求是，当没有匹配的结果时，它应该读出没有找到任何结果

因为“未找到结果”是一个不可操作的元素，理想情况下，选项卡焦点不应出现在该标签上。那么，如何表示“未找到结果”的用户

无法使用实现它 咏叹调标签 阿里亚现场

示例代码： HTML:

Javascript

$("#textIn").on('keydown', function (e)  {
         if(e.keyCode == '13') {
             shout();
         }
     })

     function shout() {
         var searchContent = $('#searchContent');
         var noResults = document.createElement('div');
         noResults.innerHTML = '<label class="">No Results found</label>';
         searchContent.append(noResults);
     }

$（“#textIn”）.on（'keydown'，函数（e）{
如果（e.keyCode=='13'）{
呼喊（）；
}
})
函数（）{
var searchContent=$（“#searchContent”）；
var noResults=document.createElement（'div'）；
noResults.innerHTML='未找到任何结果'；
searchContent.append（noResults）；
}

这篇文章介绍了叙述者支持。它引用了一个选项，因此您可以使用这些选项

我发了一封信。代码可以进行大量优化，但它展示了如何将

role=“alert”

与JS和CSS结合使用来完成您需要的任务

HTML JS

---

您是否有要测试的功能页面？我在这里看到了一些让我停顿的事情，例如在两种情况下不正确地使用了

tabindex

，以及不正确地使用了

，因此我希望看到完整的页面以了解可能发生的其他情况。@aardrian无法共享完整的代码。请你分享一下，我们如何处理这类问题。这里有textbox，按enter键将根据textbox中的当前值获取结果。我们想让屏幕阅读器告诉我们，当什么都没有得到时，就找不到结果。因为焦点仍然在文本框上。所以它会读出搜索到的字符串。我的问题陈述清楚吗？谢谢@aardrian。这是因为其他一些屏幕阅读器修复程序添加了一个aria hidden=trueAh。有趣。根据我的经验，这种情况的发生比你想象的要多。这也是为什么我总是要求测试一个功能页面，而不仅仅是一些代码示例的原因。很高兴你把它整理好了。根据你对其他屏幕阅读器修复的评论，我会先检查一下。或者代码笔示例会重复两次？

$("#textIn").on('keydown', function (e)  {
         if(e.keyCode == '13') {
             shout();
         }
     })

     function shout() {
         var searchContent = $('#searchContent');
         var noResults = document.createElement('div');
         noResults.innerHTML = '<label class="">No Results found</label>';
         searchContent.append(noResults);
     }

    <h2>Method 3: display error by Changing CSS display:none to inline</h2>
    <p><input type="submit" value="Method 3 alert - display" onclick="displayError()"></p>

    <h2>Method 4: display error by adding text using createTextNode()</h2>
    <p><input type="submit" value="Method 4 alert - display" onclick="addError()"></p>

    <div id="displayerror" class="display">
      <div class="alert" id="displayerror1" role="alert">alert via display none to block</div>
    </div>

    <div id="display2" role="alert"><span id="add1"></span></div>

    .display {
      position: absolute;
      top: 5px;
      left: 200px;
      height: 30px;
      width: 200px;
    }

    #display2 {
      position: absolute;
      top: 5px;
      left: 400px;
      height: 30px;
      width: 200px;
      clip: rect(0px, 0px, 0px, 0px);
      border: 1px dashed red;
      text-align: center;
      padding: 5px;
      background: #ffff00;
      font-weight: bold;
    }

    function displayError() {
      var elem = document.getElementById("displayerror");
      document.getElementById('displayerror1').style.display = 'block';
    }

    function addError() {
      var elem1 = document.getElementById("add1");
      elem1.setAttribute("role", "alert");
      document.getElementById('display2').style.clip = 'auto';
      alertText = document.createTextNode("alert via createTextnode()");
      elem1.appendChild(alertText);
      elem1.style.display = 'none';
      elem1.style.display = 'inline';
    }