Помощь
Войти

Доступность тем

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

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

На этой странице

Доступность текста

Важно, чтобы текст в вашем интернет-магазине был читабельным для клиентов со слабым зрением или тех, кому трудно читать большие блоки текста.

Контрастность цветов

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

В приведённом ниже примере текст имеет коэффициент контрастности 2,4:1 по отношению к фону, и некоторым клиентам его трудно читать.

Блок светло-серого текста на сплошном белом фоне.

В следующем примере текст имеет коэффициент контрастности 4,8:1, и многим клиентам его легче читать.

Блок тёмно-серого текста на сплошном белом фоне.

Проверяйте контрастность всего текста, включая основной текст, заголовки, ссылки и поля форм. Используйте следующие рекомендации:

  • Цвет основного текста и текста на кнопках должен иметь коэффициент контрастности не менее 4,5:1 по отношению к фону.
  • Цвет заголовков и другого крупного текста (размер шрифта 24 пикселя и более) должен иметь коэффициент контрастности не менее 3:1 по отношению к фону.
  • Цвет всего текста поверх изображений, включая слайд-шоу, баннеры и видео, должен иметь достаточный коэффициент контрастности по отношению к фону. Для крупного текста (размер шрифта 24 пикселя и более) контрастность должна быть не менее 3:1. Для текста меньшего размера контрастность должна быть не менее 4,5:1.
  • Цвет нетекстовых элементов, включая рамки полей ввода и значки, должен иметь коэффициент контрастности не менее 3:1 по отношению к фону.

Текстовые заголовки

При добавлении заголовков на страницу с помощью редактора форматированного текста важно сохранять их последовательный порядок (1–6). Заголовки используются ассистивными технологиями для передачи информации об организации контента на странице. Пропуск уровней, например, когда за заголовком второго уровня следует заголовок четвёртого уровня, может сбить пользователей с толку. Следуйте этой рекомендации:

  • Заголовки используются в последовательном порядке, без пропуска уровней.

Размер и выравнивание текста

При редактировании настроек типографики темы убедитесь, что текст достаточно крупный, чтобы его было удобно читать клиентам.

Также для удобства чтения в тексте должны быть одинаковые межсловные и межбуквенные интервалы. В приведённом ниже примере текст выровнен по ширине, из-за чего межсловные интервалы становятся неравномерными.

Блок текста с выравниванием по ширине. Каждая строка текста занимает всю ширину, что приводит к неравномерным интервалам между словами для подгонки.

В следующем примере текст выровнен по левому краю, что создаёт одинаковые интервалы между словами.

Блок текста с выравниванием по левому краю. Интервалы между всеми словами одинаковые.

При настройке размера и выравнивания текста следуйте этим рекомендациям:

  • Минимальный размер шрифта для основного текста эквивалентен 16 пикселям.
  • Текст не выровнен по ширине. Выровненный по ширине текст создаёт неравномерные интервалы между словами.

Текстовые ссылки

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

Текстовые ссылки должны открываться в той же вкладке. Ссылки, которые открываются в новой вкладке или окне, могут сбивать с толку, особенно на мобильных устройствах, где старое окно не видно. Это создаёт неудобства для некоторых клиентов, например для тех, кто использует экранную лупу или менее технически подкован.

Если вы редактируете таблицу стилей темы, убедитесь, что вы не удаляете стили текстовых ссылок. Придерживайтесь следующих рекомендаций:

  • Текстовые ссылки подчёркнуты или имеют другое визуальное отличие (помимо цвета), чтобы клиенты могли отличать их от обычного текста.
  • При нажатии текстовые ссылки открываются в той же вкладке.

Альтернативный текст для изображений

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

Вы можете добавить альтернативный текст к изображениям товаров в панели администратора Shopify. Добавить альтернативный текст к другим изображениям в теме можно в редакторе тем.

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

Двое друзей с рюкзаками обнявшись смотрят на океан

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

Если у вас туристическое агентство, то примером неудачного альтернативного текста будет: «Два человека на фоне океана». Для того же агентства примером удачного текста может быть: «Двое друзей путешествуют по Лагушу (Португалия) и в солнечный день смотрят на песчаную бухту Прайя-ду-Камилу».

Доступность слайд-шоу и видео

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

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

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

Слайд-шоу

При добавлении слайд-шоу в интернет-магазин придерживайтесь следующих рекомендаций:

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

Видео

При добавлении видео в интернет-магазин придерживайтесь следующих рекомендаций:

  • Видео не воспроизводятся автоматически.
  • Если видео воспроизводятся автоматически, их звук отключён.
  • Для видео со звуком: видео должно быть полностью видимым и не перекрываться другими элементами страницы. Это позволяет сохранить видимость скрытых субтитров.
  • Для видео с диалогами должны быть доступны текстовые расшифровки. Они размещаются либо на самой странице, либо по ссылке на отдельной странице.

Эти рекомендации также относятся к видео в слайд-шоу.

Поддержка клавиатуры

Клиенты с нарушениями зрения или моторики могут использовать клавиатуру для навигации и выполнения задач в интернете. Они полагаются на визуальный индикатор, чтобы понимать, где на веб-странице находится фокус клавиатуры. В приведённом ниже примере поле «Эл. почта» имеет визуальный индикатор фокуса:

Экран входа клиента в интернет-магазине с полями «Эл. почта» и «Пароль». Поле «Эл. почта» обведено синей рамкой.

Если вы редактируете таблицу стилей темы, убедитесь, что вы не удаляете стиль фокуса клавиатуры ни с каких элементов страницы. Придерживайтесь следующей рекомендации:

  • Все интерактивные элементы страницы имеют чёткий визуальный индикатор, когда на них установлен фокус клавиатуры. К таким элементам относятся ссылки, кнопки и поля форм.

Ресурсы

Чтобы узнать больше о веб-доступности по темам, затронутым в этой статье, обратитесь к следующим ресурсам.

Ресурсы по контрастности цветов

  • «Цвета с хорошей контрастностью» — статья от Инициативы по веб-доступности (Web Accessibility Initiative).
  • Contrast Ratio — онлайн-инструмент для определения коэффициента контрастности между двумя цветами.
  • Color Contrast Analyzer — приложение для скачивания от Paciello Group для определения коэффициента контрастности.

Ресурсы по работе с текстом

Ресурсы по альтернативному тексту

Ресурсы по слайд-шоу и видео

Ресурсы по поддержке клавиатуры

В этом разделе