WCAG и средства чтения с экрана - пометьте <section>тегом <h>и не читайте ярлык дважды

Question

Я привел некоторые сайты в соответствие WCAG 2.1 AA.Для удобства навигации я разделил содержимое страницы на соответствующие теги

, а также предоставил тег , чтобы программы чтения с экрана могли перемещаться как по ориентирам, так и по заголовкам.Затем я использую в качестве метки для

, используя aria-labelledby.Проблема, по крайней мере, в Chrome с NVDA, при навигации по ориентирам или заголовкам считывает метку дважды.Если я удаляю aria-labelledby из

, он пропускает раздел.

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

Я мог бы переместить вниз

, а затем NVDA просто читает первую строку фактического контента.Это будет своего рода работа, но я не люблю структурировать DOM таким образом.(Кроме того, программы чтения с экрана сталкиваются с заголовком внизу, что сбивает с толку.)

Есть ли способ, чтобы метка читалась только один раз, когда это первая часть контента в

, это маркировка?

Answer 1

То есть у вас что-то вроде этого?

<section aria-labelledby="h2id">
  <h2 id="h2id">hello</h2>
  <!-- other stuff -->
</section>

Когда я перемещаюсь по ориентирам с помощью NVDA ( D клавиша), и Chrome и Firefox скажут "привет область, привет, уровень заголовка 2"

Аналогично, если я перемещаюсь по заголовкам (клавиша H ), я услышу то же самое.

Странно.

Если я проверю дерево доступности в devtools Chrome,

покажет:

Name: "hello"
  aria-labelledby: "hello"
  aria-label: Not specified
  title: Not specified
Role: region
Labeled by: 

Так что это выглядит правильно.Доступное имя ориентира - просто «привет», и это именно то, что говорит « Доступное имя и описание для вычисления 1.1 ».Я не уверен, почему заголовок также читается.

Та же проблема существует с VoiceOver на iOS.И регион, и заголовок читаются, когда я перемещаюсь по ориентирам или заголовкам (через ротор).

У меня нет JAWS, но если у вас есть к нему доступ, попробуйте там тоже.

Я бы оставил это в покое.HTML кажется правильным.Небольшое дополнительное многословие, вероятно, хорошо, учитывая преимущество навигации по ориентирам и заголовкам.