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

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

Чего вы должны абсолютно избегать, так это предоставления (неявно) информации только посредством ее визуального форматирования. Например, вычеркивание цен без явного указания где-то, что это исходная цена и что в настоящее время действует скидка, создает проблему доступности для пользователей программ чтения с экрана и тех, кто может плохо видеть зачеркнутый.

Итак, в основном вы на правильном пути, указывая все в текстовом виде.

Теперь, лично по опыту как пользователь программы чтения с экрана, начиная с вашего примера, я бы сказал:

• Сначала укажите цену со скидкой, а затем первоначальную цену, потому что то, что я собираюсь заплатить, - это информация, которую я ищу в первую очередь.
• Будьте умны и дайте полную информацию в одном кратком сообщении. Пример: «7,99 доллара вместо 9,99 доллара, экономия 2 доллара».
• Не стоит экономить в первую очередь, так как это легко может быть воспринято как чрезмерная маркетинговая манипуляция. Пример: «Сэкономьте 20%! 10 долларов вместо 12» vs. «10 долларов вместо 12 - сэкономьте 20%!»

@QuentinC дает несколько хороших советов по порядку информации (самое важное в первую очередь - цена, которую вы собираетесь заплатить), но одна вещь, которая беспокоит меня в OP, - это то, почему пользователь переходит на tab по всем ценам. Цены интерактивны?

Или, возможно, это просто вопрос терминологии. Я думаю, что под tab вы действительно имеете в виду смахивание вправо, чтобы переместить фокус VoiceOver.

Одна вещь, которую следует учитывать, если вы решите сделать это одним большим предложением, - это немного усложняет синтаксический анализ всей этой информации. Пользователь VoiceOver может изменить свой ротор на «слова», а затем смахивать вверх / вниз, чтобы перемещаться по слову за раз, чтобы услышать информацию, но, возможно, это не лучший способ заставить их сделать это. Но тот факт, что вы предоставляете всю эту информацию, действительно важная часть, так что вам спасибо.

Кроме того, VoiceOver останавливается на границах элемента, когда вы проводите вправо, поэтому, если у вас есть что-то вроде:

<div>
  <span>hello</span>
  <s>there</s>
  <span>world</span>
</div>

Вы услышите «привет», swipe right, там, «мир swipe right».

Если вы просто хотите услышать «hello there world» одним движением пальца, тогда вам понадобится «текстовая» роль недокументированный (и, следовательно, официально не поддерживаемая).

<div role = "text">
  <span>hello</span>
  <s>there</s>
  <span>world</span>
</div>

В качестве примечания, хотя <s> и <del> являются семантическими элементами, их значение не передается программам чтения с экрана. Один из способов справиться с этим задокументирован в «Краткое примечание о том, как оставить свой след (более доступно)».

Would the above work, or is there a more standardized way to communicate this?

Не следует отвлекать внимание, вводя в программу чтения с экрана слишком много информации.

Я не говорю, что это стандартное решение, но решение, которое вы должны рассмотреть, - просто игнорировать старую цену с помощью aria-hidden: $7.99 <div aria-hidden = "true">($9.99)</div>

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