Специальные возможности: проверка и настройка порядка 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: восстановите предыдущую версию сайта из истории сайта.