Доступность: навигация с помощью стрелки на клавиатуре через два отдельных списка

Question

Я не очень разбираюсь в реализации специальных возможностей: у меня такая ситуация: у меня есть форма поиска с одним

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

когда пользователь начинает вводить текст, offertionContainer, если он заполнен DOM через Ajax-запрос: это результат:

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

Теперь я хочу, чтобы у пользователя была возможность навигации по каждому голосу, но это невозможно, потому что у меня есть два элемента div (ideasGroup)

Есть ли способ рассматривать эти два элемента как единый список с помощью технологии Aria?

Спасибо

Answer 1

Вы правильно используете role="listbox" и role="option", так что это хорошее начало. Я предполагаю, что у вас есть обработчик клавиатуры, чтобы пользователь мог перемещаться вверх / вниз по списку?

Будут ли эти два списка визуально отличаться друг от друга или они будут выглядеть как один список? Если они визуально различимы, я бы не рекомендовал бы, чтобы они выглядели как один список для пользователя программы чтения с экрана. Вам нужен одинаковый опыт для всех пользователей.

Однако, если вы визуально оформите два списка так, чтобы они выглядели как один список, , то вы можете поиграть с ARIA, чтобы они звучали как один список для пользователей программы чтения с экрана. Для этого попробуйте удалить второй role="listbox", чтобы последующие элементы role="option" появились в первом списке. Но поскольку последующие параметры не являются дочерними элементами DOM вашего первого списка, вам также придется использовать aria-owns и создать второй список role="presentation".

Обычно я люблю проверять вещи перед публикацией, но сейчас не могу этого сделать, но думаю, что-то вроде следующего: может работать:

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