Question

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

其中一个屏幕阅读器要求说它应该读出没有任何匹配时没有找到结果。

As＆＃34;未找到任何结果＆＃34;是一个不可操作的元素，理想情况下，tab焦点不应该是那个标签。那么如何表明＆＃34;没有找到结果＆＃34;

的用户

无法使用使用实现它 ARIA标签咏叹调

示例代码： 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';
    }

讲述者应该阅读＆＃34;没有搜索结果＆＃34;如果搜索时没有结果

1 个答案:

HTML

CSS

JS