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

Question

Мы работаем над тем, чтобы сделать наш сайт электронной коммерции доступным для программ чтения с экрана, и у нас возникли проблемы с ценами. В наших категориях и на страницах продуктов указана сумма в нескольких долларах США, когда продукт продается со скидкой:

1. Первоначальная цена (в зачеркнутом виде)
2. Цена со скидкой (что клиент фактически заплатит)
3. Экономия (ориг. - со скидкой)

Существует ли какой-либо стандартный способ передачи всей этой информации пользователям с нарушениями зрения? Мы не хотим ничего опускать, но также хотим, чтобы список товаров не занимал слишком много времени.

В настоящее время VoiceOver читает нашу цену как «цена, $ 9,99» [TAB] », $ 7,99« [TAB] », $ 2»

Мы рассматриваем возможность переименования всего этого в одно утверждение, чтобы пользователю не приходилось просматривать каждую цену. "был $ 9,99, теперь в продаже за $ 7,99, сэкономьте $ 2"

Сработает ли вышеперечисленное или существует более стандартизированный способ сообщить об этом?

Answer 1

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

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

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

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

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

Вы услышите "привет" проведите пальцем вправо"там" проведите пальцем вправо"мир".

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

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

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

Answer 2

Сработает ли вышеперечисленное или есть более стандартизированный способ сообщить об этом?

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

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

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

Answer 3

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

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

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

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

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