Произнесите "DoIT" как "сделай это" для программ чтения с экрана и слабовидящих

Я работаю над интересной проблемой и хотел бы внести свой вклад.

Проблема, таким образом: я работаю над сайтом, который использует аббревиатуру по всем направлениям ("DoIT", произносится "сделай это"). К сожалению, программы чтения с экрана для слабовидящих читают неправильное сокращение ("duh-IT").

Я думаю, что есть одно из двух решений:

  1. найти каждый элемент на сайте (HTML5), который использует "DoIT", и каким-то образом добавить что-то, что говорит программе чтения с экрана, чтобы не читать отображаемый текст, а альтернативный текст, который заменяет "DoIT" на "сделай это" … которого у меня нет Идея, как это будет сделано...

  2. добавьте некоторый тип сценария, который при использовании программы чтения с экрана заменяет слово "DoIT" на "do it" → что-то, чего я не знаю, как сделать.

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

<h3 alt="Test for do it">Test for DoIT</h3>

Мысли? Должен ли я использовать некоторые из тегов (span, label, alt), или уже есть что-то лучшее, что я не смог найти сразу?

Просто ищу место для начала. Великий гугл мало что предлагал...

Источник

2 ответа

Решение

Если "DoIT" является аббревиатурой, вы должны, для начала, отметить его как таковой (мы будем использовать <acronym> но это не рекомендуется в HTML5, поэтому давайте воспользуемся альтернативой: <abbr>DoIT</abbr>).

Тогда вы можете использовать title приписать: а) пометить, что на самом деле означает аббревиатура, или б) пометить, как вы хотите, чтобы он читался (<abbr title="Do it">DoIT</abbr>).

Пользователи программ чтения с экрана обычно могут установить, как они хотят, чтобы их аббревиатуры и аббревиатуры читались им (либо "пытаясь произнести это", буквенно-буквенно, либо по атрибуту заголовка).

Если вы не хотите изменять внешний вид обычного просмотра веб-сайта, просто добавьте правило CSS, например: abbr[title] { border-bottom-width: 0; font-variant: none; }

Источник

Вы можете использовать атрибуту

<h3 aria-label="Test for do it">Test fir Doit</h3>
Источник
Другие вопросы по тегам