Целевые читатели экрана и избегать дублирования контента

Question

Я слышал о @media speech, aural, screen, но когда я пытаюсь поиграть с ними, чтобы NVDA прочитала фрагмент HTML так, как я хочу, он не работает .

Практический пример: в списке расширений я хочу, чтобы программа чтения с экрана произносила «ogg» при чтении «ogg» (потому что иначе это звучит как «ag»), но я не хочу визуального пользователи могут читать длинный список сокращений заглавными буквами (что звучит лучше всего), потому что его сложнее читать.

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

<abbr>
    <span aria-hidden="true">oga</span>
    <span class="screen-reader-only">OGA</span>
</abbr>

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

Вместо этого я хотел бы сделать следующее

<abbr>oga</abbr>

@media speech {
  abbr {
     text-transform: uppercase;
  }
}

или

abbr {
  text-transform: uppercase;
}

@media screen{
  abbr {
     text-transform: lowercase;
  }
}

(кстати, я не уверен, является ли @media screen условием, которое проверяет, имеет ли устройство экран или позволяет ли оно набору инструкций быть направленным на механизм рендеринга)

I также попробовал следующее, которое менее многословно

<abbr aria-label="OGA">oga</abbr>

<span aria-label="OGA">oga</span>

но ни один из этих работ.

Answer 1

Вам не нужно ничего делать.

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

Например, в NVDA они будут нажимать NVDA + . , чтобы прочитать следующее письмо по одному за раз.

Существуют сотни хаков, которые вы можно использовать (обернуть каждую букву в тег <p> и сделать так, чтобы он отображался в строке), но все они заканчиваются беспорядком совершенно бесполезного HTML, который семантически неверен.

Если вы абсолютно ДОЛЖНЫ контролировать речь .

В вашем примере лучший способ добиться этого - дублировать ваш список с одним для программ чтения с экрана и одним для визуального представления.

Я бы «порекомендовал» (я не рекомендую его вообще, но это лучший вариант, если вы действительно должны) этот подход, потому что: -

1. Гораздо проще поддерживать.
2. Такое же количество узлов (ну + 1 для дополнительно <ul>) например, <li>, <abbr>, <span>, <span> VS <li>, <abbr>, умноженные на два.
3. Проще отображать для браузера (если это было 10000 элементов Вы заметите разницу).
4. Меньший вес страницы - экономит около 40 байт за единицу.
5. Очистить HTML без сотен атрибутов aria.
6. Другие решения, такие как использование CSS медиазапросов и т. Д. c. может не работать со старыми программами чтения с экрана (это надежное решение).

Пример

.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 */
}

<ul aria-hidden="true">
    <li>
         <abbr>oga</abbr>
    </li>
    <li>
         <abbr>abc</abbr>
    </li>
</ul>
<ul class="visually-hidden">
    <li>
         <abbr>OGA</abbr>
    </li>
    <li>
         <abbr>ABC</abbr>
    </li>
</ul>

Редактировать

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

Затем вы можете использовать JavaScript для заглавных букв (вместо HTML, CSS заглавные буквы не являются надежными для программ чтения с экрана, поскольку некоторые игнорируют это), если кто-то предпочел это, хотя это всего лишь идея оставить разметку чистой. Вы должны проверить это.

Answer 2

Вы можете использовать пробел нулевой ширины : ​, чтобы отделить каждый символ, без каких-либо визуальных различий

Use the "o​g​g" extension

• aria-label не будет работать для текстовых элементов .
• speech и aural media type не поддерживают
• Нет гарантии, что прописные слова будут читаться иначе, чем строчные. Это зависит от синтезатора