Доступность: считывание нескольких диапазонов в div как одно предложение

Question

У меня какая-то дилемма.

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

Я бы хотел, чтобы они читались в одном предложении.

---

Ниже приведен мой минимальный вариант кода:

<div>
  <span>My special coffee is</span>
  <b class="heading">Cappuccino</b>
  <span>. I can drink it all day</span>
</div>

---

После включения role="text" для родительского элемента он работает хорошо, но text отсутствует в списке поддерживаемых ролей .

aria-describedby здесь также не работает.

Я использую программное обеспечение для чтения с экрана NVDA для windows.

Какой стандартный подход рекомендуется использовать здесь?

Answer 1

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

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

Answer 2

Как вы можете сделать это (но не должны) вы не можете использовать хак role="text", который мы часто используем в этом сценарии, тогда вам придется прибегнуть к добавлению отдельной текстовой версии, удобной для чтения с экрана, которая является визуально скрытой , а затем скрыть оригинальный текст, используя aria-hidden="true". Пример в конце моего ответа. Это связано с его собственными проблемами, потому что aria-hidden не поддерживается на 100% всеми комбинациями браузеров и программ чтения с экрана (но поддержка хорошая), поэтому некоторые пользователи слышат это раздел дважды. На мой взгляд, это хуже, чем небольшая пауза между словами, но иногда клиенты не слушают причину, поэтому я понимаю, если вам в конечном итоге придется это сделать. Мои советы

Используйте взлом role="text", как предложил @ Quentin C, это стандартная практика в области доступности из-за определенных ограничений.

Либо это, либо оставьте это в покое, и примите тот факт, что если это Наихудшая проблема доступности на вашем сайте, никто не будет возражать против этого вообще. Использование aria-hidden для правильного чтения не является хорошей практикой (во время написания они могут в конечном итоге реализовать это).

Просто чтобы вы знали Deque / Axe собирается добавить это как исключение кажется, так что это должно дать вам некоторую уверенность в том, что многие люди согласны с методом role="text" .

Пример

.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}

<div aria-hidden="true">
  <span>My special coffee is</span>
  <b class="heading">Cappuccino</b>
  <span>. I can drink it all day</span>
</div>
<p class="visually-hidden">My special coffee is Cappuccino. I can drink it all day</p>