Установите для текста программы чтения с экрана (и текста метаинформации) значение, отличное от видимого текста

Question

Я имею дело с веб-сайтом, на котором автор хочет, чтобы несколько ключевых заголовков / заголовков были посвящены большому искусству ASCII.Например, если заголовок говорит «sandwitch», он будет отображаться как:

 .::::::.   :::.   :::.    :::.:::::::-.  .::    .   .::::::::::::::::::  .,-:::::   ::   .:
;;;`    `   ;;`;;  `;;;;,  `;;; ;;,   `';,';;,  ;;  ;;;' ;;;;;;;;;;;'''',;;;'````'  ,;;   ;;,
'[==/[[[[, ,[[ '[[,  [[[[[. '[[ `[[     [[ '[[, [[, [['  [[[     [[     [[[        ,[[[,,,[[[
  '''    $c$$$cc$$$c $$$ "Y$c$$  $$,    $$   Y$c$$$c$P   $$$     $$     $$$        "$$$"""$$$
 88b    dP 888   888,888    Y88  888_,o8P'    "88"888    888     88,    `88bo,__,o, 888   "88o
  "YMmMY"  YMM   ""` MMM     YM  MMMMP"`       "M "M"    MMM     MMM      "YUMMMMMP"MMM    YMM

И код будет просто:

<div class="head" id="a">
   .::::::.   :::.   :::.    :::.:::::::-.  .::    .   .::::::::::::::::::  .,-:::::   ::   .:
  ;;;`    `   ;;`;;  `;;;;,  `;;; ;;,   `';,';;,  ;;  ;;;' ;;;;;;;;;;;'''',;;;'````'  ,;;   ;;,
  '[==/[[[[, ,[[ '[[,  [[[[[. '[[ `[[     [[ '[[, [[, [['  [[[     [[     [[[        ,[[[,,,[[[
    '''    $c$$$cc$$$c $$$ "Y$c$$  $$,    $$   Y$c$$$c$P   $$$     $$     $$$        "$$$"""$$$
   88b    dP 888   888,888    Y88  888_,o8P'    "88"888    888     88,    `88bo,__,o, 888   "88o
    "YMmMY"  YMM   ""` MMM     YM  MMMMP"`       "M "M"    MMM     MMM      "YUMMMMMP"MMM    YMM
</div>

Теперь я лично считаю, что это ужасный выбор и делает вещи действительно трудными для чтения без какой-либо выгоды.Но в конечном итоге это был не мой звонок, и он застрял.Это создало две дополнительные проблемы, которые я пытаюсь решить:

1. Включив искусство ASCII в буквальный исходный код страницы, программы чтения с экрана не могут прочитать заголовок и вместо этого пытаютсяпрочитайте это несоответствие знаков препинания и случайных букв.
2. Поскольку эти буквы являются заголовками разделов веб-страницы, поисковая система не сможет увидеть, что этот текст должен быть словом.

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

Итак, есть ли способ, который я могу сказать и читателям экрана, и искатьдвигатели, что должен сказать этот беспорядок текста (если бы они могли смотреть на это как человек), а не просто как беспорядок пунктуации?Что-то вроде alt текста, но для div может быть?

Answer 1

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

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

Но, как бы то ни было, если это то, чего хочет клиент, тогда иди с этим.Это легко сделать доступным.

<div aria-hidden="true">
  <!-- ascii art here -->
</div>

<h2 class="sr-only">Sandwich</h2>

Таким образом, ascii art виден зрячим пользователям, но скрыт от экранных ридеров.Заголовок виден читателям экрана (и SEO), но скрыт от зрячих пользователей.

Вы можете искать класс «sr-only» (иногда называемый «визуально скрытым» классом). Вот один пример .Он в основном выталкивает текст с экрана или делает его высотой в один пиксель.

Если вы говорите о еде, просто убедитесь, что «бутерброд» правильно написан в ascii art: -)

Answer 2

Теперь я лично считаю, что это ужасный выбор

Это ужасный выбор

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

Поскольку они являются заголовками, будет легче

<h1 aria-label="your label">
   <!-- your text -->
</h1>

Но это не поможет 99% людей, например тем, кто использует экранные лупы.