Разрыв строки в H1 превращает элемент в группу VoiceOver

Я хотел объединить некоторые комментарии, чтобы их было легче читать.

Но сначала уточнение. Объявление «группы» с VoiceOver на Mac. Вы не слышите слово «группа» при использовании VoiceOver на iOS. У меня нет Mac, чтобы проверить это, но я попробовал это на своем iPhone.

Независимо от «группового» объявления, мое тестирование в основном предназначено для прослушивания заголовка как одного элемента, а не разделенного на два, хотя семантически ваш заголовок состоит из двух элементов, поскольку у вас есть <br>. Это не относится к исходному вопросу, поскольку вы в основном спрашивали, как удалить «групповое» объявление, а не как читать заголовок как один элемент. Тем не менее, вот некоторые результаты тестирования принудительного чтения заголовка как одного. Последний пример может иметь побочный бонус в виде исключения «группового» объявления.

Были предложены следующие идеи:

Оригинальный код:

<h1>This is a <br>headline</h1>

При смахивании вправо с помощью VO на iOS:

• "Это заголовок уровня 1"
• "заголовок, уровень заголовка 1"

NVDA на ПК, используя стрелку вниз для навигации:

• "заголовок уровня 1 Это"
• "заголовок уровня 1"

JAWS на ПК, используя стрелку вниз для навигации:

• "заголовок уровня 1 Это"
• "заголовок уровня 1"

Кроме «группового» объявления на Mac, это то, что я ожидал.

Первое предложение:

<h1 aria-label = "This is a headline">This is a <br>headline</h1>

При смахивании вправо с помощью VO на iOS:

• «Это заголовок, уровень заголовка 1»
• «Это заголовок, уровень заголовка 1»

Поскольку заголовок по-прежнему состоит из двух элементов (из-за <br>), но применяется aria-label (*), вы слышите aria-label для обеих частей заголовка.

(*) Обратите внимание, что aria-label переопределяет дочерние элементы при правильном использовании, что будет рассмотрено ниже после всех этих примеров.

NVDA на ПК, используя стрелку вниз для навигации:

• "заголовок 1 уровня Это заголовок"

В NVDA нет второго элемента, когда применяется aria-label, потому что aria-label заменяет содержимое всех дочерних элементов. См. https://www.w3.org/TR/wai-aria-practices-1.2/#naming_with_aria-label, в частности:

При применении к элементу с одной из ролей, которая поддерживает именование из дочернего контента, aria-label скрывает дочерний контент от пользователей вспомогательных технологий и заменяет его значением aria-label.

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

JAWS на ПК, используя стрелку вниз для навигации:

• "заголовок уровня 1 Это"
• "заголовок уровня 1"

aria-label полностью игнорируется JAWS, и вы получаете тот же результат, что и исходный код.

Второе предложение:

<h1 aria-label = "This is a headline"><span aria-hidden = "true">This is a <br>headline</span></h1>

При смахивании вправо с помощью VO на iOS:

• «Это заголовок, уровень заголовка 1»

Второго элемента нет. aria-label соблюдается, а aria-hidden по существу скрывает внутренний текст самого заголовка. aria-hidden действительно не должен иметь никакого эффекта, потому что aria-label переопределяет все дочерние элементы (*), как указано выше.

(*) Обратите внимание, что aria-label переопределяет дочерние элементы при правильном использовании, что будет рассмотрено ниже после всех этих примеров.

NVDA на ПК, используя стрелку вниз для навигации:

• "заголовок 1 уровня Это заголовок"

Для NVDA разницы нет. aria-hidden не влияет, чего я и ожидал, и поэтому меня смутило, что это повлияло на VoiceOver.

JAWS на ПК, используя стрелку вниз для навигации:

• ""

Ничего не читается, по-видимому, из-за aria-hidden и из-за того, что JAWS не учитывает aria-label в заголовке, который является частью (*) комментария ниже. Поскольку JAWS не видит aria-label, а содержимое заголовка скрыто, читать нечего.

Третье предложение:

<h1><span role = "text">This is a <br>headline</span></h1>

При смахивании вправо с помощью VO на iOS:

• «Это заголовок [пауза], уровень заголовка 1»

Второго элемента нет, потому что role = "text" убирает все дочерние элементы и просто объединяет текст. Однако ВО объявляет его несколько иначе, чем в предыдущем примере, и имеет короткую паузу между «а» и «заголовком», как будто между ними стоит запятая.

NVDA на ПК, используя стрелку вниз для навигации:

• "заголовок уровня 1 Это"
• "заголовок уровня 1"

JAWS на ПК, используя стрелку вниз для навигации:

• "заголовок уровня 1 Это"
• "заголовок уровня 1"

Поскольку role = "text" не является утвержденной ролью, в этом примере нет никакой разницы по сравнению с оригиналом с NVDA или JAWS. Тем не менее, Apple реализовала эту роль, и она отмечена VoiceOver, и иногда она бывает полезна, если вы понимаете, что она не повлияет на другие программы чтения с экрана. Я использовал role = "text" в коде производственного уровня с оговоркой, что поддержка может быть отключена Apple в любое время. Но этот производственный код был написан 10 лет назад и до сих пор прекрасно работает.

(*) комментарий о правильном использовании aria-label

Взгляните на «2.10 Практическая поддержка: aria-label, aria-labelledby и aria-describedby», в частности, 7-й пункт:

Не используйте aria-label или aria-labelledby в элементах заголовков, потому что они переопределяют их в NVDA, VoiceOver и Talkback. **JAWS их игнорирует. **

Поэтому идея использования aria-label в заголовке настоятельно не рекомендуется.

Один из способов, чтобы заголовок читался как одна строка, который поддерживается всеми программами чтения с экрана, И может исключить «групповое» объявление.

<h1>
  <span aria-hidden = "true">
    This is a <br>headline
  </span>
  <span class = "sr-only">
    This is a headline
  </span>
</h1>

У вас по сути два заголовка. Первый предназначен для зрячего пользователя, который игнорируется программой чтения с экрана, а второй — для пользователя программы чтения с экрана, который не будет отображаться для зрячего пользователя.

В классе "sr-only" нет ничего особенного. Это просто обычное название для CSS "только для чтения с экрана". Вы можете увидеть больше об этом на Что такое sr-only в Bootstrap 3?

Я считаю, что этот пример также устранит «групповое» объявление, но у меня нет Mac, чтобы проверить это.