Если я правильно понимаю, то, что вы пытаетесь выяснить, это как сказать программе чтения с экрана, что будет делать нажатие на A / B, и, возможно, последствия нажатия на A / B.
Как@slugolicious указал, что aria-controls вроде бы это делает, но это не очень хорошо поддерживается программами чтения с экрана.Вместо этого вам нужно предоставить программе чтения с экрана достаточно контекста, чтобы понять, на что он будет влиять, а затем объявить об изменениях, вызванных щелчком мыши (в противном случае нажатие на него приведет к тишине, и будет выглядеть так, будто она сломана)..
Например, кнопка A могла бы сказать «Счетчики приращения B».Это будет достаточно контекстной информации для программы чтения с экрана, чтобы понять, что будет делать кнопка.Если по какой-то причине вы не хотите показывать полный текст (таким образом, он будет отображать «нажмите меня» визуально), вы можете скрыть дополнительную информацию только для визуальных пользователей, таким образом читая как «нажмите меня»увеличить счетчики b "только для программ чтения с экрана.
Чтобы объявить об изменениях в контенте, вы можете добавить aria-live="polite" aria-atomic="true" к элементу контейнера счетчиков. aria-live указывает программе чтения с экрана объявлять о любых изменениях содержимого (polite означает следующее для удобства чтения с экрана).Однако по умолчанию он только объявляет об измененной части содержимого (поэтому, если до обновления это было «Счет - 24», а затем после «Счет - 25»), программа чтения с экрана сообщала бы только «5», поскольку это та часть, котораяизменено).Мы можем использовать aria-atomic = "true" , чтобы заставить программу чтения с экрана объявить весь контент, даже если он не изменился.
<div class="cont">
<a href="#" id="a">Increment B counters</a>
<div aira-live="polite" aria-atomic="true">
<span>Count - <span class="count" id="a-count-1"></span></span>
<span>Count - <span class="count" id="a-count-2"></span></span>
<span>Count - <span class="count" id="a-count-3"></span></span>
</div>
</div>
Если вы считаете, что счетчикидлинный список и, таким образом, будет перегружать пользователя программы чтения с экрана слишком большим количеством информации, другой тактикой будет просто объявить об увеличении счетчиков, но не перечислить их текущие значения.
Вместо того, чтобы ставить aria-polite и aria-atomic вокруг счетчиков, вы можете создать визуально скрытый элемент, единственная задача которого - сообщать пользователю что-то.Поскольку div теперь действует как сообщение о состоянии, вы также захотите поместить в него атрибут role="status", чтобы программа для чтения с экрана знала.Затем при нажатии кнопки измените текстовое содержимое элемента статуса, чтобы объявить о действии.
<div role="status" aria-live="polite" aria-atomic="true" id="statusMsg"></div>
<script>
let statusEl = document.getElementById('statusMsg');
document.getElementById('a').addEventListener('click', () => {
statusEl.textContent = 'B counters incremented';
});
</script>