如果在搜索时没有结果，讲述人应阅读 "no search results"

Question

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

其中一个屏幕 reader 要求说它应该读出没有匹配项时找不到结果。

因为 "no result found" 是不可操作的元素，理想情况下选项卡焦点不应位于该标签上。那么如何指示 "No results found"

的用户

无法使用 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 article addresses Narrator support. It references an 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';
    }

如果在搜索时没有结果，讲述人应阅读 "no search results"

Narrator should read "no search results" if there is no result while searching

html

javascript

accessibility

screen-readers

wai-aria

HTML

CSS

JS