Заставьте программу чтения с экрана читать разделы по-разному

Question

У меня есть вложенная трехуровневая навигация, которая выглядит так в HTML:

<ul class="level-0 top">
  <li>
    <a>Link</a>
    <ul class="level-1 column">
      <li>
        <a>Header</a>
        <ul class="level-3 row">
          <li>
            <a>Link</a>
          </li>
          <li>
            <a>Link</a>
          </li>
          <li>
            <a>Link</a>
          </li>
        </ul>
  <!-- more 1st, 2nd, and 3rd levels that look like the above -->
</ul>

Это стилизовано под мегаменю:

                             *Link1* Link2 Link 3
 ________________________________________________
| Header |  Header  |  Header  |  Random Content |
| Link   |  Link    |  Link    |                 |
| Link   |  Link    |  Link    |                 |
| Link   |  Link    |          |                 |
|        |  Link    |  Header  |                 |
| Header |  Link    |  Link    |                 |
| Link   |          |  Link    |                 |
| Link   |  Header  |  Link    |                 |
|        |  Link    |  Link    |                 |
|        |  Link    |          |                 |
|        |  Link    |          |                 |
'------------------------------------------------'

Первый уровень - это ссылки вверху, которые открывают раскрывающееся меню. Второй уровень - это «столбцы» в мегаменю. Третий уровень - это «строки» внутри каждого столбца, каждый из которых содержит список ссылок. Хороший способ представить макет - подумать о «кладке» в Pinterest.

Теперь при перемещении программы чтения с экрана в меню (второй уровень), естественно, он будет читать «регион с двумя элементами» (или какой-то вариант этого всплывающего окна в зависимости от вашего читателя), потому что он видит два списка в каждом столбце. Затем он будет читать каждый список третьего уровня, выходить из списка, выходить из первого столбца и повторяться для остальных столбцов.

Это логично, когда вы читаете HTML и программу чтения с экрана. Вы опускаетесь на уровень, читаете сводку предметов, достигаете каждого предмета, повторяете.

Однако ...

                             *Link1* Link2 Link 3
 ________________________________________________
| Header    Header     Header  |  Random Content |
| Link      Link       Link    |                 |
| Link      Link       Link    |                 |
| Link      Link               |                 |
|           Link       Header  |                 |
| Header    Link       Link    |                 |
| Link                 Link    |                 |
| Link      Header     Link    |                 |
|           Link       Link    |                 |
|           Link               |                 |
|           Link               |                 |
'------------------------------------------------'

Меню разработано таким образом, что первые 3 столбца не похожи на столбцы . Вместо этого столбцы с первого по третий рассматриваются как одна большая область с 6 списками ссылок (представьте, что первые три столбца имеют одинаковый фон, а случайный контент - разноцветный фон).

Есть ли способ заставить программу чтения с экрана читать столбцы с первого по третий как «один регион с 6 элементами», даже если HTML определен в столбцах и строках? Или он уже читает его в соответствии с правилами?

Answer 1

Вы могли бы заставить программу чтения с экрана читать ее так, как вы хотите, но я не думаю, что это необходимо для вашего примера.То, что вы делаете так, чтобы это выглядело как одна группа с шестью группировками, не означает, что это нужно читать таким образом.В ваших визуальных эффектах нет никакого дополнительного значения.

Но если вы действительно хотите это сделать, вот простой пример:

<ul>
  <li>a</li>
  <li>b</li>
</ul>
<ul>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ul>

Это читается как два отдельных списка, один сдва предмета и еще один с тремя предметами.Если вы хотите, чтобы они читались как один список из пяти элементов (по сути, то, что вы просите), вам нужно было бы использовать роли для этого.

<div role="list">
  <ul role="presentation">
    <li role="listitem">a</li>
    <li role="listitem">b</li>
  </ul>
  <ul role="presentation">
    <li role="listitem">c</li>
    <li role="listitem">d</li>
    <li role="listitem">e</li>
  </ul>
</div>

Вам понадобится <div> в качестве контейнера для списка, и вы должны удалить «список» <ul>, указав role="presentation".Однако, поскольку role="presentation" в родительском элементе будет распространяться вниз до «принадлежащих» элементов (элементов

), вам необходимо восстановить «элемент списка» элементов <li>, добавив role="listitem".

См. https://www.w3.org/TR/wai-aria/#presentation

Когда явная или унаследованная роль представления применяется к элементу с неявной семантикой роли WAI-ARIA, для которой требуются собственные элементы, кроме тогок элементу с явной ролью представления пользовательский агент ДОЛЖЕН применить унаследованную роль представления к любым принадлежащим элементам, для которых не определена явная роль.

Теперь у вас есть один список с пятью элементами.