Accessibilty: navigate with keyboard arrow trough two separate list

Question

I'm not very expert with accessibility implementation: I have this situation: I have a search form with one

    <div id="siteHeader-search" class="siteHeader-search">




    <form action="/Search/Index" class="textSearch">
        <!-- text search input fields -->
                <div class="fieldLabel">
                    <label for="searchInput">Type to search</label>
                </div>


        <input type="text" id="searchInput" autocomplete="off" placeholder="Type here..." aria-expanded="false">
        <input type="hidden" name="textsearch" data-ytos-text-search="" value>
        <input type="hidden" name="siteCode" value="siteCode">

        <!-- required hidden fields -->
                <input type="hidden" name="season" value="A,P,E">
                <input type="hidden" name="department" value="llctlg">


            <input type="hidden" name="gender" value="U">

            <button type="submit">Search</button>


    <div id="suggestionContainer" style="display: none;"></div>
</form> 

when the user start typing, the suggestionContainer if filled with DOM via Ajax request: this is the result:

<div id="suggestionContainer" style="display: block;">
   <span class="is-vHidden" id="initInstr">&lrm;6&lrm; results found with the word: "&lrm;&lrm;". Use up and           down arrows to review and enter to select.</span>
   <div class="suggestionsGroup">
     <div class="suggestionTitle">Title</div>
     <ul class="suggestions" role="listbox">
       <li aria-selected="false" role="option">
         <a href="link">Link Text</a>
       </li>
        <li aria-selected="false" role="option">
         <a href="link">Link Text</a>
       </li>
       ...
     </ul>
   </div> 
   <div class="suggestionsGroup">
     <div class="suggestionTitle">Title</div>
     <ul class="suggestions" role="listbox">
       <li aria-selected="false" role="option">
         <a href="link">Link Text</a>
       </li>
        <li aria-selected="false" role="option">
         <a href="link">Link Text</a>
       </li>
       ...
     </ul>
   </div> 
 </div>

Now, I want that the user have the possibility of navigate though each voice, but this is not possible because i have two div's(suggestionsGroup)

There is a way to treat this two divs as a single list with Aria technology?

Thanks

Answer 1

You are correctly using role="listbox" and role="option", so that's a good start. I assume you have a keyboard handler so that the user can arrow up/down through the list?

Will the two lists be visually distinct from each other or do they look like they're one list? If they're visually distinct, then I would not recommend them appearing like one list for the screen reader user. You want the same experience for all users.

However, if you visually style your two lists so that they look like one list, then you can play with ARIA to make them sound like one list for screen reader users. To do that, try removing the second role="listbox" so that the subsequent role="option" items will appear in the first list. But since the subsequent options are not child DOM elements of your first list, you'll also have to use aria-owns too, and make the second listbox role="presentation".

I usually like to test things before posting but I can't do that at the moment, but I think something like the following might work:

<div id="suggestionContainer" style="display: block;">
  <span class="is-vHidden" id="initInstr">&lrm;6&lrm; results found with the word: "&lrm;&lrm;". Use up and down arrows
    to review and enter to select.</span>
  <div class="suggestionsGroup">
    <div class="suggestionTitle">Title</div>
    <ul class="suggestions" role="listbox" aria-owns="id1 id2"> <!-- add aria-owns -->
      <li aria-selected="false" role="option">
        <a href="link">Link Text</a>
      </li>
      <li aria-selected="false" role="option">
        <a href="link">Link Text</a>
      </li>
      ...
    </ul>
  </div>
  <div class="suggestionsGroup">
    <div class="suggestionTitle">Title</div>
    <ul class="suggestions" role="presentation">        <!-- change role="listbox" to role="presentation" -->
      <li aria-selected="false" role="option" id="id1"> <!-- add an ID -->
        <a href="link">Link Text</a>
      </li>
      <li aria-selected="false" role="option" id="id2"> <!-- add an ID -->
        <a href="link">Link Text</a>
      </li>
      ...
    </ul>
  </div>
</div>