Атрибуты доступности тестирования с Divi 5

Атрибуты доступности теперь полностью совместимы с Divi 5, что дает вам бесконечный способ добавления ролей ARIA, меток и других помощников для чтения экрана прямо внутри строителя. Если вы работаете с Divi 5, это самый простой способ построить доступ к вашему сайту без изменения вашего рабочего процесса или дизайна.

Поскольку Европейский закон о доступности вступит в силу 28 июня, и Google все больше благоприятствует передовой практике доступности, сейчас самое время продвинуться вперед. Вот как работает атрибуты доступности и как он помогает вашему сайту соответствовать современным стандартам доступности!

Атрибуты доступности для Divi 5

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

Например, если вы используете текстовый модуль для визуального стиля заголовка или модуля кнопки для создания призывного к действию, читатели экрана не поймут их роли. Роли и ярлыки ARIA позволяют определить, что такое каждый элемент и как вспомогательные технологии должны интерпретировать его, не изменяя визуальный дизайн. Это помогает гарантировать, что ваш сайт Divi 5 является одновременно доступным и гибким.

После установки плагина он автоматически добавляет пользовательские поля ввода в ваши разделы, строки, модули и другие элементы Divi. (Чтобы получить доступ к полям ARIA, нажмите на любой элемент и перейдите на его вкладку «Дополнительно» .)

Теперь вы можете определить роли, добавить меток ARIA и улучшить поддержку считывателя экрана для каждого элемента непосредственно от Builder Divi. Атрибуты доступности плавно вписываются в ваш рабочий процесс Divi и стоит всего 19 долларов в год. Он предлагает вам простой, доступный способ создания доступных веб -сайтов.

Получите атрибуты доступности

Почему доступность больше не является обязательной

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

Если ваш сайт недоступен, вы не только позади - вы рискуете. Вот почему:

• Юридические меры растут: с 28 июня 2025 года Европейский Закон о доступности будет применен. Если ваш сайт недоступен, и люди в ЕС используют его, вы можете столкнуться с штрафами или другими штрафами. Закон относится к большинству предприятий с более чем 10 сотрудниками и зарабатывает более 2 миллионов евро в год, но более мелким также рекомендуется следовать за ним, потому что…
• Доступность может повлиять на ваш рейтинг: хотя доступность не является фактором ранжирования, многие доступные функции могут косвенно повлиять на ваш SEO. Такие вещи, как Alt Text, правильные структуры заголовка и описательные этикетки, облегчают понимание вашего сайта как для пользователей, так и для поисковых систем. Так что, если ваш сайт трудно ориентироваться, вы можете спокойно отставать в результатах поиска.
• Недоступные сайты отталкивают пользователей: если ваш сайт недоступен, люди с ограниченными возможностями могут не использовать его. Когда они быстро уходят, это может сигнализировать о плохом пользовательском опыте поисков и повредить ваш рейтинг. Изменения, такие как четкая структура, читаемые шрифты и простая навигация по клавиатуре делают ваш сайт полезным для всех.

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

Настройка атрибутов доступности в Divi 5

В этом разделе вас проходит через инструменты установки и доступа к атрибутам доступности на ваших веб -сайтах Divi 5.

Установка плагина

После покупки атрибутов доступности вы получите zip -файл плагина. Загрузите его в плагины WordPress> Добавить плагин> загрузить плагин.

Теперь добавьте ZIP -файл и нажмите «Установить сейчас».

Наконец, активируйте это.

После активации вы заметите дополнительные поля ARIA, добавленные на вкладку «Усовершенствованный элемент».

Теперь вы можете легко добавить эти атрибуты доступности к каждому элементу на вашей странице, непосредственно от Divi Builder. Мы рассмотрим это через минуту. Перед этим давайте быстро рассмотрим все варианты, которые у вас есть, на панели панели Accessbite Attributes.

Атрибуты доступности

После того, как плагин будет активен на вашем сайте Divi, вкладка «Доступность» будет добавлена ​​на вашу боковую панель WordPress. Нажмите на него, чтобы получить доступ к панели панели, которая имеет четыре вкладка: администратор, модули, элементы и продукты.

Давайте рассмотрим параметры каждой вкладки:

Вкладка администратора

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

Вкладка модулей

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

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

Чтобы исключить модуль, введите модуль слизь (например, ET_PB_IMAGE) в разделе совместимости . Это говорит плагину пропустить его при добавлении полей ARIA и фокусируется только на модулях, которые действительно нуждаются в поддержке доступности.

Вкладка «Элементы»

Некоторые части вашего сайта не построены с модулями Divi. Они могут исходить из вашей темы, других плагинов или простого HTML. Вкладка «Элементы» позволяет добавлять атрибуты ARIA в эти части вашего сайта, используя селекторы CSS. Возможно, вы захотите включить глобальные элементы, такие как меню, иконки, кнопки и поля форм, не созданные в Divi Builder.

• Aria Main: рассказывает читателям экрана, где начинается ваш основной контент, чтобы они могли пропустить меню или боковой панели.
• Ария скрыта: скрывает декоративные элементы, чтобы вспомогательные технологии не читали их вслух.
• Ссылка ARIA: отмечает кликабельные элементы, которые не являются реальными ссылками в качестве ссылок. Это помогает читателям экрана идентифицировать их правильно.
• Кнопка ARIA: добавляет роли кнопок для переключения значков или стилизованных текстовых ссылок, которые действуют как кнопки.
• Ария требуется: отмечает поля пользовательских форм по мере необходимости, даже если HTML не говорит об этом.
• Индекс TAB: делает важные элементы, достижимые с помощью клавиши TAB, что полезно для навигации только для клавиатуры.

Каждая настройка позволяет добавлять или удалить эти роли, используя селекторы CSS. Если вы не уверены, с чего начать, Aria Main и Aria Button - это хорошие первые выборы, их часто пропускают и легко настроить.

На вкладке «Продукты» есть другие продукты от одного и того же создателя.

Использование атрибутов доступности внутри Divi 5

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

1. Назначьте роли элементам с роли ARIA

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

Как и в этом случае ниже, эта реклама включает в себя кнопку.

Чтобы добавить роль ARIA, включить опцию и назначить эти значения:

• Тип роли ARIA как роли виджетов (это категория, где живут интерактивные элементы, такие как кнопки и ползунки.)
• Арийская ролевая ценность как кнопка
• Селектор ролей ARIA как .et_pb_button (это класс Divi использует для модулей кнопок.)

2. Добавить четкие этикетки для считывателей экрана с Aria Label

В то время как роль ARIA рассказывает вспомогательные технологии, что такое элемент, лейбл ARIA объясняет , что она делает . Это особенно полезно, когда элемент не имеет видимого текста, как значок, настраиваемая кнопка или что-либо, предназначенное для того, чтобы выглядеть интерактивно, но не так громко. Давайте разберем его, используя тот же пример.

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

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

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

3. Предоставьте дополнительный контекст с описанием ARIA

Описание ARIA дает считывателям экрана более подробную информацию о элементе, чем может объяснить этикетка. В то время как этикетка говорит, что что -то такое, описание объясняет, почему это важно.

Например, скажем, у вас есть несколько кнопок «пожертвовать сейчас» на одной странице, каждая из которых расположена по разным делу, таким как очистка прибрежных районов, морское образование или восстановление среды обитания. Пользователь чтения экрана может приземлиться прямо на кнопку и пропустить ближайший контент. Здесь помогает описание Арии.

Давайте возьмем первую карту: прибрежную очистку. Чтобы добавить больше контекста, вы можете добавить описание, например, «Это пожертвование поддерживает очистку океана и защиту дикой природы» в качестве текста описания ARIA.

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

4. Скрыть декоративные элементы от читателей экрана

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

Например, возьмите предварительное изображение предварительного просмотра, как фотография чаек. Он поддерживает дизайн, но не добавляет никакой новой информации, помимо того, что уже находится в заголовке или описании. Здесь вы можете использовать Aria Hidden, чтобы скрыть ее от читателей экрана.

5. Ссылка на дополнительную информацию с деталями ARIA

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

Давайте возьмем раздел морского образования. Предположим, вы хотите, чтобы текст абзаца описывал кнопку «Пожертвовать сейчас». Вы можете связать кнопку с параграфом, используя детали ARIA.

Во -первых, добавьте уникальный идентификатор в абзац. Нажмите на текстовый модуль, который содержит описание, и перейдите в Advanced> CSS ID & Classes . Введите свой уникальный идентификатор в поле CSS ID. Давайте войдем в Морской Эдус.

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

Далее мы добавляем атрибут деталей ARIA в кнопку. Нажмите на кнопку модуля и перейдите к его расширенной информации> АРИА. Введите Marine-Edu в поле ID.

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

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

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

Получите атрибуты доступности

Дополнительные инструменты доступности Divi-модулы для Divi 5

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

1. Доступность боковой панели

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

2. Доступность настройки

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

Проверьте пакет доступности

Сделайте ваши сайты Divi 5 доступными сегодня

Атрибуты доступности дают вам простой, визуальный способ сделать ваш сайт Divi более инклюзивным. Нет кодирования, нет обходных путей - просто подходящие инструменты, встроенные непосредственно в строитель.

Он полностью совместим с Divi 5, активно поддерживается, и теперь 50% скидка до 28 июня. Пока предложение выполняется, вы можете получить полный пакет доступности, включая боковую панель и настройки, всего за 36 долларов в год. Если вы готовы сделать свой сайт лучше для всех, это самый простой способ начать.

Получите комплект доступности 50%