Специальные возможности: проверка и настройка порядка DOM на сайте
6 мин.
Порядок DOM — это последовательность, в которой программы чтения с экрана и клавиша Tab выделяют и (или) «читают» контент на странице. Он должен быть логичным, чтобы посетители могли максимально удобно перемещаться по сайту и изучать его содержимое.
Важно:
Эта статья посвящена оптимизации порядка DOM для сайтов, созданных в редакторе Wix и Редакторе Studio. Для получения информации о работе с порядком DOM в Редакторе Wix Harmony, нажмите здесь.
Порядок DOM на сайтах
DOM сайта — это порядок загрузки и чтения элементов на страницах сайта. Wix автоматически устанавливает порядок DOM на основе визуального порядка элементов. При разработке инструментов специальных возможностей мы тестируем наши продукты с помощью следующих программ чтения с экрана:
- Windows + Firefox или Chrome: NVDA (Бесплатный читатель)
- iOS + Safari: Voiceover (Встроенный читатель)
Это означает, что мы создали автоматический порядок DOM сайта с учетом функций вышеуказанных приложений.
Почему важен порядок DOM
Некоторые посетители могут использовать программы чтения с экрана и другие вспомогательные технологии для навигации. Эти технологии помогают пользователям с нарушениями зрения, сканируя контент сайта и зачитывая его вслух.
Посетители, использующие программы чтения с экрана, а также люди с нарушениями моторики, могут использовать клавишу Tab для навигации по контенту. Поэтому порядок DOM важен для таких пользователей, так как им необходимо перемещаться по сайту в логической последовательности.
Например, сначала должно идти меню сайта, затем остальные элементы в хедере, заголовок страницы, содержимое страницы и так далее. Если порядок DOM неверен, программа чтения с экрана или клавиша Tab могут пропускать части контента или перескакивать между ними.
Хотите проверить порядок DOM на сайте?
Вы можете протестировать автоматический порядок DOM сайта Wix с помощью клавиши Tab на клавиатуре или программы чтения с экрана в опубликованной версии сайта.
Автоматический порядок DOM в Помощнике по специальным возможностям
При открытии Помощника по специальным возможностям в Редакторе Studio может появиться параметр товара для автоматической организации порядка DOM. Мы рекомендуем выбрать этот параметр товара, так как это гарантирует правильность сканирования и последующих задач помощника.
Не видите этот чекбокс?
Параметр товара для организации DOM сайта не отображается, если:
- Сайт был создан после начала ноября 2024 года.
- Вы ранее упорядочивали DOM сайта с помощью Помощника по специальным возможностям.
- Вы отключили автоматический DOM на сайте.
Изменение порядка DOM сайта вручную
Если вы заметили, что порядок DOM на сайте нелогичен, вы можете настроить его вручную, чтобы сделать сайт удобнее для посетителей.
Используйте Помощник по специальным возможностям и панель слоев, чтобы изменить DOM на сайтах в редакторе Wix. Если вы создаете сайт в Редакторе Studio, вы можете настроить порядок на панелях слоев и страниц сайта.
Важно:
Если порядок табуляции на сайте логичен, вам ничего не нужно делать. Изменение порядка, когда он уже правильный, может создать проблемы для посетителей, использующих программы чтения с экрана и (или) клавишу Tab.
Чтобы изменить порядок DOM:
Редактор Wix
Редактор Studio
Поскольку Wix автоматически устанавливает порядок DOM для сайта, вам необходимо отключить его в Помощнике по специальным возможностям. После этого вы сможете вручную настроить порядок DOM для элементов на панели слоев сайта по мере необходимости.
Чтобы настроить порядок DOM вручную:
- Перейдите в редактор.
- Нажмите Настройки в верхней части и выберите Помощник по специальным возможностям.
- Выберите Сканировать сайт в помощнике справа.
- Перейдите на вкладку Обнаруженные проблемы.
- Выберите Уровень сайта.
- Нажмите Упорядочить DOM.
- Выберите Вручную.
- Нажмите Применить.
- Нажмите Слои
внизу слева в редакторе. - Проверьте список и удалите все лишние элементы. Сюда относятся дубликаты, которые не используются на сайте и могут запутать пользователей программ чтения с экрана.
- Перетащите оставшиеся элементы в нужном порядке.
Следующий шаг:
Откройте мобильный редактор и повторите те же шаги.
Примечания:
- Навигация по сайту с помощью клавиши Tab позволяет перемещаться только по интерактивным элементам, а не по статическим, таким как текст. Если вы хотите протестировать программу чтения с экрана на статическом контенте, следуйте инструкциям в центре поддержки вашей программы о том, как правильно перемещаться по сайту с помощью клавиатуры.
- Закрепленные элементы автоматически помещаются в конец последовательности табуляции. Если вы хотите, чтобы они выбирались раньше, мы рекомендуем открепить элемент и поместить его в хедер.
Что дальше?
Вернитесь к контрольному списку специальных возможностей, чтобы продолжить работу над специальными возможностями сайта.
Язык сайта и DOM
В разных языках разное направление чтения (например, в английском — слева направо, а в иврите — справа налево). Если вы изменили язык сайта на язык с другим направлением чтения, визуальный порядок и порядок DOM элементов могут перестать совпадать.
Мы рекомендуем включить автоматический порядок DOM в Помощнике по специальным возможностям, чтобы порядок элементов соответствовал направлению чтения языка сайта.
Важно:
Если на сайте есть контент на языках с письмом как слева направо, так и справа налево, мы рекомендуем настроить порядок DOM вручную.
Чтобы включить автоматический порядок DOM в помощнике:
- Просканируйте сайт с помощью Помощника по специальным возможностям.
- Перейдите на вкладку Обнаруженные проблемы.
- Выберите Уровень сайта.
- Нажмите Упорядочить DOM.
- Выберите Автоматически (рекомендуется).
- Нажмите Применить.
- (Необязательно) Проверьте визуальное отображение элементов сайта, чтобы убедиться, что они выровнены.
Примечания:
- Этот параметр товара может изменить визуальное отображение элементов, поэтому мы рекомендуем проверить изменения, чтобы убедиться, что сайт выглядит так, как вы задумали.
- Эта функция поддерживает не все компоненты сайта, и вам может потребоваться вручную настроить направление их чтения.
Передумали?
Вы можете отменить автоматический порядок DOM в редакторе:
- Редактор Wix: нажмите на иконку Отменить
в верхней панели редактора.
Примечание: этот вариант применим только в том случае, если последним выполненным действием была автоматическая реорганизация DOM. - Редактор Studio: восстановите предыдущую версию сайта из истории сайта.