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

Question

У меня есть следующий абзац:

<p>Random text that has <span class="font--bold">some bold text</span> and continues on...</p>

Я использую расширение ChromeVox , чтобы обеспечить доступность моего сайта. В зависимости от типа используемого шрифта, мне нужно использовать отдельный элемент <span class="font--bold">, чтобы этот текст был жирным.

Моя проблема в том, что когда я перехожу к этому абзацу с помощью Chromevox, он фокусируется и читаеттекст перед <span>, затем текст внутри <span>, а затем остальная часть абзаца.

Результат:

• Я перехожу к элементу <p>.
• Chromevox фокусируется и читает: «Случайный текст, который имеет».
• Я перехожу к следующему пункту.
• Chromevox фокусируется и читает: «какой-то жирный текст».
• Я перехожу к следующему пункту.
• Chromevox фокусирует и читает оставшийся текст в <p>.

Желаемый результат:

• Навигация по элементу абзаца.
• Chromevox фокусирует весь абзац и читает его вслух.

---

Нет проблем, если этот формат используется внутри тегов заголовка (например, <h2><span class="font--bold">My</span> title</h2>. Chromevox считывает это как один раздел.

Я пытался добавить role="text" aи tabindex="-1" в элемент <span>, но это не сработало. Любая помощь будет высоко ценится. Спасибо.

Answer 1

role = "text" tag

Иногда самые простые ответы самые лучшие, вы ищете role="text"

<p>Random text that has <span class="font--bold" role="text">some bold text</span> and continues on...</p>

Примечание

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