javascript - 如果搜索时没有结果，讲述人应读取 "no search results"

Question

我的 html 页面中有一个搜索框。按下回车键 - 它会过滤掉下面显示的数据列表。

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

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

无法使用 using 来实现它咏叹调标签咏叹调直播

示例代码:HTML :

<input tabindex="1" type="text" id="textIn" />
 <div tabindex="1" id="searchContent" style="width:100px;height:50px;" aria-live="assertive">

 </div>

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);
     }

Answer 1

这ARIA alert support文章介绍讲述人支持。它引用了 alert test page这样您就可以尝试这些选项。

我做了一个CodePen from the two examples that work in Narrator .代码可以优化很多，但它展示了如何将 role="alert" 与 JS 和 CSS 结合使用来完成您需要的事情。

HTML

    <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>

CSS

    .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;
    }

JS

    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';
    }