Как сделать процесс оформления заказа ADA-совместимым

  • Автор темы vasyaKonn
  • Дата начала

Выкуп купонов GainStorm в любых объемах

V

vasyaKonn


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


Что такое соответствие ADA?
ADA означает Закон об инвалидах в США, который был принят с поправками, запрещающими дискриминацию по признаку инвалидности и требующим от предприятий соблюдения стандартов доступности. Хотя веб-сайты электронной коммерции не являются физическими местами общественного пользования, было решено, что они также должны соответствовать стандартам соответствия ADA, поскольку частные предприятия открыты для широкой публики. Но это не просто вопрос юридических проблем, если ваш интернет-магазин не соответствует требованиям - вы также рискуете оттолкнуть и не приспособить клиентов с ограниченными возможностями, которым необходимо использовать инструменты специальных возможностей для навигации в Интернете. Это приведет к снижению продаж и серьезному ухудшению пользовательского опыта в вашем магазине.
К счастью, нетрудно убедиться, что ваш интернет-магазин и его процесс оформления заказа соответствуют требованиям ADA, чтобы любой ваш клиент мог легко ими пользоваться. Давайте рассмотрим, как сделать процесс оформления заказа доступным.

Сделайте вашу кассу доступной
Хотя вам следует работать над изменениями, чтобы сделать свой веб-сайт совместимым с ADA , важно сосредоточиться на одном из самых важных моментов на пути к покупке: на процессе оформления заказа. Когда покупатель оформляет заказ, его просят ввести много важной информации, необходимой для выполнения его заказа. Этот процесс нелегок для каждого клиента, поэтому давайте рассмотрим, что нужно вашему сайту, чтобы сделать процесс оформления заказа простым для любого пользователя.
Правильно помеченные элементы
Большая часть того, чтобы сделать процесс оформления заказа и веб-сайт доступными для людей с ограниченными возможностями, - это надлежащая маркировка всех необходимых элементов на странице. Поскольку многие клиенты с ограниченными возможностями используют программы чтения с экрана для навигации по веб-сайтам и совершения покупок в Интернете, в процесс оформления заказа должен быть включен код, отформатированный для этих инструментов. В противном случае программы чтения с экрана не будут правильно передавать клиентам информацию, необходимую для совершения покупки.
Теги ARIA
Спецификации ARIA, сокращение от Accessible Rich Internet Applications инициативы Web Accessibility Initiative , представляют собой ролевые теги, разработанные для того, чтобы сделать веб-страницы более доступными для таких инструментов, как программы чтения с экрана. Теги ARIA, которые выглядят как [aria- *] , работают, указывая атрибут elements, чтобы помочь ему правильно переводить для API вспомогательных технологий. Эти теги ARIA могут сообщать вспомогательным технологиям, что определенные части страницы являются «активными», то есть они будут немедленно проинформированы при изменении элементов. Теги ARIA в основном используются для описания определенных элементов на странице; в случае оформления заказа они используются для обозначения полей, которые необходимо заполнить, например информации для выставления счета, и флажков для «того же адреса, что и для выставления счета». Чтобы быть полностью доступными, теги ARIA ваших страниц должны:
  • Сопоставьте их атрибуты с их ролями
  • Используйте допустимые значения
  • Не допускайте ошибок в написании
Кнопки
Все кнопки на странице оформления заказа, включая кнопки «Применить» для кодов купонов и кнопку «Оформить заказ», должны быть правильно помечены тегами, чтобы программы чтения с экрана могли правильно прочитать их пользователям. Если кнопка не помечена, программа чтения с экрана просто объявит ее как «кнопку», что не дает пользователю важной информации.
Атрибут языка
Чтобы программа чтения с экрана могла понимать и правильно передавать язык страницы оформления заказа, HTML-код вашего сайта должен иметь атрибут [lang] с допустимым языковым значением в его заголовке. Это определяет язык вашей страницы; без этого программа чтения с экрана будет считать, что страница находится на языке по умолчанию, который пользователь выбрал при настройке программы. Если ваша страница не использует этот язык по умолчанию, программы чтения с экрана могут неправильно передавать текст и элементы страницы.
Альтернативный текст
Поскольку слабовидящие пользователи не могут видеть изображения на вашей странице, как задумано, вам необходимо приспособиться к инструментам специальных возможностей, которые они используют для их понимания. Добавив атрибут [alt] к вашему изображению, программы чтения с экрана могут прочитать этот замещающий текст и описать пользователю, что это за изображение. Если элемент изображения информативен и важен для понимания пользователем, обязательно добавьте небольшой описательный замещающий текст. Однако, если элемент является чисто декоративным и не добавляет необходимого содержания для понимания пользователем процесса оформления заказа, вы можете добавить пустой атрибут alt, который программы чтения с экрана будут игнорировать. Для страниц оформления заказа убедитесь, что изображения миниатюр продуктов имеют правильный замещающий текст.
Списки
Страницы оформления заказа часто используют форматы списков, особенно в раскрывающихся меню для выбора страны и штата. Чтобы программы чтения с экрана правильно понимали и объявляли эти списки для пользователей с ограниченными возможностями, они должны содержать только элементы <li> и элементы поддержки сценария ( <script> и <template> ). Без этой структуры покупатели не смогут полностью разобраться в списке и выбрать необходимые параметры.

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

Удобная корзина для покупок
Прежде чем процесс оформления заказа может начаться, покупатели должны иметь возможность легко добавлять , удалять и редактировать товары в своей корзине. Клиентам также может потребоваться покинуть корзину, чтобы продолжить покупки на вашем сайте, и в конечном итоге покинуть корзину, чтобы завершить покупку и оформить заказ.
По сути, тележки для покупок состоят из веб-форм, состоящих из таблиц данных и данных форм. Эти данные должны быть созданы с учетом доступности, чтобы ваш процесс оформления заказа соответствовал требованиям ADA. Именно тогда для вас становится важным:
  • Явно пометьте все поля ввода формы
  • Включите открытый текст на все кнопки, объясняющий их действия
  • Сделайте текст машиночитаемым
  • Добавьте организованные данные, которые подходят для программ чтения с экрана.
Оптимизированный процесс оформления заказа
Когда пользователь переходит на страницу оформления заказа, он должен иметь возможность просматривать товары в корзине, предоставлять информацию о доставке и оплате и получать подтверждение заказа. Клиентам также может потребоваться войти в свою учетную запись, зарегистрировать учетную запись или предоставить пользовательские данные - все это должно быть необязательным во время оформления заказа.
Просмотр корзины
Раздел корзины на странице оформления заказа должен включать в виде таблицы все продукты, которые покупатель намеревается приобрести. Он должен включать четкий список важной информации, такой как название продукта, артикул, описание, цена, количество единиц и общая стоимость товара. Форматирование этого раздела должно помочь пользователям программ чтения с экрана быстро понять, что именно находится в их корзине, прежде чем переходить к информации о доставке и оплате.
Ввод информации о доставке и оплате
При вводе информации о доставке и оплате может потребоваться заполнить некоторые поля, чтобы покупка прошла должным образом. В процессе оформления заказа необходимо четко указать, какие поля необходимы, чтобы программы чтения с экрана могли передать эту информацию покупателю.
Кроме того, вы должны включить функциональность, которая позволяет отправлять формы с помощью мыши или клавиатуры ; программы чтения с экрана используют клавиатуру для навигации по странице, поэтому кнопки нельзя запускать исключительно одним щелчком мыши.
Если ввод пользователя приводит к ошибке из-за неверной информации о доставке или платежных реквизитов, тогда ошибка должна отображать четкие инструкции о том, что необходимо сделать, чтобы исправить ошибку. Поля, которые необходимо ввести повторно, например, очищенные пароли или поля номера кредитной карты, также должны быть четко помечены.
Подтверждение заказа
Сразу после подтверждения платежа покупатели должны получить на экране подтверждение покупки . Это подтверждение должно включать в себя полную отправленную оплату и обзор товаров, приобретенных в заказе. В дополнение к этому экранному подтверждению, которое должно быть отформатировано соответствующим образом, чтобы программы чтения с экрана могли передавать клиентам, вам следует отправить электронное письмо с подтверждением последующего заказа . Также полезно предлагать клиентам альтернативные способы связи и подтверждения заказа, такие как телефонный звонок.

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

Заключение
Если вы пишете код для своего интернет-магазина с нуля, может показаться, что вам придется потрудиться, чтобы сделать процесс оформления заказа полностью совместимым с ADA. К счастью, многие платформы электронной коммерции, такие как Shift4Shop, включают страницы оформления заказа , которые уже оптимизированы для обеспечения доступности, поэтому вам не нужно беспокоиться о добавлении какого-либо дополнительного кода для обеспечения соответствия. Но это не значит, что вы не должны знать о других способах сделать ваш интернет-магазин и кассу доступными для всех. Обучая свою команду должным образом обслуживать клиентов с ограниченными возможностями и создавая свой веб-сайт с учетом доступности, ни один покупатель не будет чувствовать себя обделенным, делая покупки в вашем интернет-магазине.
 
Верх