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

1
votes

I have a search box in my html page. On enter key press - it filter out the data list to be shown below.

One of the screen reader requirement says that it should read out that No results are found when nothing matches.

As "no result found" is a non actionable element and ideally tab focus should not go that label. So how indicate that user of "No results found"

Not able to implement it using using aria-label aria-live

Sample Code : 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);
     }
1
javascripthtmlaccessibilitywai-ariascreen-readers
Do you have a functional page to test? I see some things here that give me pause, such as incorrect use of tabindex in two cases and incorrect used of <label>, so I would like to see the full page to understand what else might be happening. – aardrian
@aardrian Wont be able to share full code. Can you please share, how do we approach these kind off issues. Where we have textbox and on enter keypress fetches the result based on the current value in textbox. We want screen reader to say That No results are found when nothing is fetched. Since the focus is still on the textbox. So it reads out the string searched for. Is my problem statement clear? – Rohit Kumar

1 Answers

2
votes

This ARIA alert support article addresses Narrator support. It references an alert test page so you can play around with the options.

I made a CodePen from the two examples that work in Narrator. The code can be optimized a lot, but it shows how role="alert" can be used in conjunction JS and CSS to do what you need.

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