Перейти к основному содержимому

Плагин Semanticality™ для WordPress-Gutenberg.

Возьмите под контроль HTML-теги и атрибуты ваших блоков WordPress-Gutenberg и реализуйте изменения разметки, связанные с WCAG/EAA, во время рендеринга за часы – вместо того, чтобы тратить месяцы на переработку кода темы.

Почему настоящая доступность в WordPress так сложна?

У Вас точно такое было: клиенту нравится дизайн его новой премиум-темы, но HTML-код, сгенерированный WordPress, – это семантическое минное поле. Здесь в игру вступает Semanticality™.

Для чего существует Semanticality™? – Демо-видео

В этом коротком видео вы узнаете, как Semanticality™ помогает вам контролировать семантику HTML ваших блоков WordPress-Gutenberg и быстро и легко реализовать изменения разметки, связанные с WCAG/EAA.

Настоящая доступность возникает благодаря правильному, семантическому HTML-коду – но именно здесь разработчики WordPress быстро сталкиваются с ограничениями: почти нет возможностей настроить код, не перепрограммировав тему полностью.

Сравнение несемантического и семантического HTML

Классический блок WordPress-Gutenberg с неправильной семантикой

  • Нет семантического HTML и WAI ARIA.
  • Нет возможности быстро пропустить блоки с помощью программы чтения с экрана.
  • Неясно, что здесь заголовок, а что простой текст.
  • Нарушение критериев успеха WCAG 2.2 1.3.1, 2.4.4, 2.4.10 и 4.1.2. → Соответствие EAA не достигнуто***.

<div class="wp-block-card">
  <div class="wp-block-card__title">Мой заголовок</div>
  <div class="wp-block-card__content">Тут находится Ваше содержание</div>
  <div class="wp-block-card__link" onclick="location.href='/mehr'">Узнать больше</div>
</div>
      

HTML после настройки с помощью плагина Semanticality™

  • Карточка помечена как article.
  • Помечена как ориентир с помощью aria-labelledby.
  • Иерархия контента установлена через h3 и p.
  • Критерии успеха WCAG 2.2 1.3.1, 2.4.4, 2.4.10 и 4.1.2 выполнены → Соответствие EAA достигнуто***.

<article class="wp-block-card" aria-labelledby="wp-block-card__title-1">
  <h3 class="wp-block-card__title" id="wp-block-card__title-1">Мой заголовок</h3>
  <p class="wp-block-card__content">Тут находится Ваше содержание</p>
  <a href="/mehr" class="wp-block-card__link" aria-label="Mehr über 'Mein Kartentitel' lesen">Узнать больше</a>
</article>
      

Особенно в контексте нового EAA это незаменимо для выполнения законодательных требований. Semanticality™ идеально подходит для реализации мер, связанных с HTML, после аудита EAA за считанные часы, а не месяцы*.

  • Техническая основа вашей работы

    С Semanticality™ вы работаете непосредственно над структурой HTML, которая лежит в основе Объектной модели доступности (AOM). В Gutenberg Block Editor вы корректируете код графически на основе правил – они применяются во время рендеринга.

    Представление веб-сайта с ошибочной структурой, которая корректируется правилами в Semanticality™ во время рендеринга.
    Веб-сайт

    Вы корректируете ошибочный HTML-код с помощью Semanticality™, прежде чем он будет преобразован в древовидную структуру узлов с правильными подсказками.

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

    Пользователи могут легко перемещаться и прослушивать контент благодаря правильному AOM.

    Пользователь
    Схема процесса AOM: С помощью Semanticality™ вы изменяете HTML-код, прежде чем он будет преобразован в древовидную структуру узлов (AOM), которую могут читать программы чтения с экрана.
  • Стандарты доступности, которые вы выполняете

    С помощью Semanticality™ вы создаете техническую основу для центральных требований WCAG 2.2 / EN 301 549 / BITV 2.0 / EAA – там, где требуется семантический HTML-код и ARIA – полностью без переделки темы**.

    • ISO 40500:2012

      Международный стандарт доступности

    • WAI-ARIA

      Технология для реализации доступности

    • WHATWG

      Стандарт HTML5

    • WCAG 2.2 AA

      Международные рекомендации по доступности веб-сайтов

    • EAA

      Требования для компаний D2C / B2C в ЕС

    • BITV 2.0

      Требования для государственных учреждений в Германии

    • ADA

      Американское законодательство о доступности

    • BFSG

      Реализация EAA в Германии

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

    Адаптируйте свои блоки Gutenberg в кратчайшие сроки и оптимизируйте свой веб-сайт для доступности** и соответствия EAA*** за часы, а не месяцы*.

    Начать работу с Semanticality™ сейчас
    Недоступный веб-сайт, который не использует семантические HTML-теги и не применяет атрибуты WAI-ARIA, остается недоступным для программ чтения с экрана.
    Доступный веб-сайт с семантическими HTML-тегами и правильно размеченными атрибутами WAI-ARIA доступен для программ чтения с экрана – результат работы Barrierenlos℠.
    Сравнение недоступного веб-сайта (вверху) и доступного веб-сайта (внизу) показывает, как работа Barrierenlos℠ улучшает доступность веб-сайтов для людей с ограниченными возможностями.

Больше, чем просто плагин атрибутов. Гранулярный контроль. Над каждым блоком Gutenberg.

Другие плагины часто позволяют добавлять только простые атрибуты к основному обертке блока Gutenberg.

Semanticality™ идет дальше и предоставляет вам гранулярный контроль над каждым отдельным элементом в ваших блоках WordPress-Gutenberg.

    Оверлей-виджеты

    Оверлей-виджеты обещают доступность одним нажатием кнопки, но являются лишь временным решением. Они не меняют основной код и, как правило, недостаточны для настоящей доступности или соответствия требованиям[1].

    • Нет семантической коррекции: div, который выглядит как кнопка, остается div – бесполезен для программ чтения с экрана и не фокусируем.
    • Юридическая неопределенность: Поскольку основные недостатки остаются, оверлеи не дают гарантии соблюдения законов, таких как EAA. Вы рискуете соответствием своих клиентов.
    • Производительность и конфликты: Дополнительный JavaScript замедляет страницу, вызывает конфликты скриптов и ухудшает пользовательский опыт.

    Другие плагины (например, Attributes for Blocks)

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

    • Ограниченные возможности настройки: Изменения возможны только в основной обертке блока.
    • Нет настройки вложенных элементов: например, ссылка в карточке.
    • HTML-теги нельзя изменить: например, div не может быть преобразован в button.
    • Нет глобальных правил или динамических переменных: например, нет возможности создать правило для всех кнопок в блоке.
    • Нет безопасности: Статические значения сохраняются в контенте и могут вызвать непредсказуемые ошибки при деактивации.
Скриншот Semanticality™ Rules Editor в Gutenberg Block Editor
    • 1.1.1 (A) WCAG 2.2

      Предоставили ли Вы осмысленный текстовый альтернативный текст для всего нетекстового контента?

    • 1.3.1 (A) WCAG 2.2

      Убедились ли Вы, что информация и ее взаимосвязи могут быть программно распознаны?

    • 1.3.2 (A) WCAG 2.2

      Представлен ли контент в логичной последовательности, сохраняющей смысл?

    • 1.3.3 (A) WCAG 2.2

      Не зависят ли инструкции исключительно от сенсорных характеристик?

    • 1.3.4 (AA) WCAG 2.2

      Не ограничен ли контент одной единственной ориентацией?

    • 1.3.5 (AA) WCAG 2.2

      Может ли цель каждого поля ввода быть программно определена?

    • 1.4.1 (A) WCAG 2.2

      Не используется ли цвет как единственное средство передачи информации?

    • 1.4.2 (A) WCAG 2.2

      Можете ли Вы управлять (приостанавливать или останавливать) автоматически воспроизводимыми аудиофайлами?

    • 1.4.3 (AA) WCAG 2.2

      Обеспечили ли Вы достаточное контрастное соотношение между текстом и фоном?

    • 1.4.4 (AA) WCAG 2.2

      Можно ли увеличить текст до 200% без потери контента?

    • 1.4.5 (AA) WCAG 2.2

      Не представлен ли текст ненужным образом в виде изображения?

    • 1.4.10 (AA) WCAG 2.2

      Адаптируется ли контент гибко к различным размерам экрана без потери информации?

    • 1.4.11 (AA) WCAG 2.2

      Имеют ли нетекстовые элементы (иконки, кнопки) достаточное контрастное соотношение?

    • 1.4.12 (AA) WCAG 2.2

      Выбраны ли интервалы между текстом так, чтобы текст оставался хорошо читаемым даже при адаптированном отображении?

    • 1.4.13 (AA) WCAG 2.2

      Не скрывается или не перекрывается ли нежелательным образом дополнительный контент, который появляется при наведении или фокусе?

    • 2.1.1 (A) WCAG 2.2

      Можете ли Вы управлять всеми функциями Вашего веб-сайта исключительно с помощью клавиатуры?

    • 2.1.2 (A) WCAG 2.2

      Можете ли Вы покинуть фокус клавиатуры с каждого элемента?

    • 2.1.4 (A) WCAG 2.2

      Активны ли комбинации клавиш только тогда, когда соответствующий элемент находится в фокусе, или их можно отключить?

    Отрывок: Критерии WCAG 2.2, которые вы можете решить с помощью Semanticality™ через семантический HTML и ARIA.

    Плагин Semanticality™ для WordPress-Gutenberg

    С Semanticality™ вы получаете гранулярный контроль над HTML-выводом каждого блока Gutenberg – динамически, безопасно и на стороне сервера. Вы определяете правила, Semanticality™ автоматически реализует их в коде. Вот полный список функций:

    • Обращение к элементам через CSS-селектор.
    • Изменение HTML-тегов (например, div на button).
    • Атрибуты добавлять и удалять.
    • Расширять атрибуты (добавлять, изменять, ставить перед, заменять).
    • Глобальные правила для типов блоков.
    • Локальные правила для отдельных блоков.
    • Возможность определять правила для дочерних блоков в родительских блоках (например, создавать правило для всех параграфов в группе).
    • Копирование и вставка правил между блоками.
    • Доступ к Word­Press-метаполям.
    • Случайные ID генерироваться.
    • Живой предпросмотр сгенерированного кода прямо в редакторе блоков.

    Результат: Вплоть до 10 раз более быстрая реализация проекта*, прогнозируемые расходы и четкое конкурентное преимущество для вас и ваших клиентов.

    Начать работу с Semanticality™ сейчас

Подходит ли Semanticality™ для вашего проекта?

Все, что выходит за рамки структуры и семантики HTML, должно быть решено в дизайне, контенте или JS, а не в разметке, и, следовательно, не с помощью Semanticality™.

Для чего плагин Semanticality™ не предназначен:

  • Не замена для работы с контентом: Осмысленные Alt-тексты, понятный язык, тексты ошибок, понятные формулировки и информационную архитектуру вы должны предоставить редакционно.
  • Нет настроек цвета/контраста: Значения контраста и нетекстовые контрасты (например, 1.4.3, 1.4.11) требуют CSS/дизайна.
  • Нет внешнего вида фокуса как такового: Видимый фокус и внешний вид фокуса (2.4.7, 2.4.11–2.4.13) требуют CSS/логики взаимодействия.
  • Нет управления макетом/перетеканием: Адаптивное перетекание, интервалы текста, размер цели (1.4.10, 1.4.12, 2.5.8) – это вопросы стилизации.
  • Нет управления динамическими взаимодействиями: Устранение ловушек клавиатуры, альтернативы Drag/Drop, логика горячих клавиш, поведение оверлеев (например, 2.1.2, 2.5.7) требуют JS.
  • Не генерирует альтернативы медиа: Субтитры/AD/транскрипты для медиа, основанных на времени (1.2.x), вы должны предоставить.
  • Нет контроля над автоматическим аудио/таймерами: Управление автовоспроизведением аудио/таймерами, паузы, таймауты и анимации (1.4.2, 2.2.x, 2.3.x) находятся вне HTML-блока.

1. Ваш проект использует блоки Gutenberg (не Elementor/Divi)?

Semanticality™ вмешивается в окончательный HTML-вывод блоков Gutenberg на стороне сервера. Page-Builder, такие как Elementor/Divi, не совместимы.

Semanticality™ – это швейцарский нож для семантики вашего веб-сайта. Он помогает вам решить многие важные критерии WCAG 2.2, которые основаны на правильном HTML и ARIA**.

Пример: Из несемантического div в доступный раздел.

За несколько кликов вы преобразуете чисто визуальный контейнер в семантически корректный раздел с ориентиром в соответствии с техниками WCAG 2.2 ARIA11 и ARIA13.

Это улучшает ориентацию для пользователей программ чтения с экрана и достаточно для выполнения критериев успеха WCAG 2.2 1.3.1 "Информация и взаимосвязи" и 2.4.1 "Обход блоков"***.

Кнопка Semanticality™ Rules Editor в Gutenberg Block Editor

Открыть Semanticality™ Rules Editor для блока

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

  1. Выберите раздел в Gutenberg Block Editor, который вы хотите настроить.
  2. Нажмите на кнопку Semanticality™ в панели инструментов блока.

Правило 1: div → section

Сначала вы преобразуете обертку блока из div в section. Справа в Live Code Preview вы сразу увидите изменение.

  1. На вкладке Local Block Rules нажмите + Add Rule. Если вы хотите сохранить правило для всех блоков этого типа на всем веб-сайте, вы можете создать его на вкладке Global Block Rules.
  2. Выберите Change Tag как Action.
  3. Определите CSS-селектор обертки блока (например, .wp-block-group с Mode на First).
Semanticality™ Rules Editor с правилом изменения div на section
Semanticality™ Rules Editor с правилом присвоения ID заголовку

Правило 2: ID заголовка

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

  1. Снова нажмите + Add Rule, чтобы добавить еще одно правило.
  2. В качестве Action на этот раз выберите Modify Attribute.
  3. Определите CSS-селектор заголовка (например, h2 с Mode на First).
  4. Выберите id в качестве атрибута в поле Attribute Name.
  5. В поле Insertion выберите Add / Replace.
  6. В поле Value вы вводите ID. Вы можете использовать статический ID, такой как hero-title, или динамический ID, такой как {{ id_dein_label }}.

Правило 3: aria-labelledby

Наконец, вы добавляете атрибут aria-labelledby к обертке блока, который ссылается на ID заголовка.

  1. Снова нажмите + Add Rule, чтобы добавить еще одно правило.
  2. В качестве Action на этот раз выберите Modify Attribute.
  3. Определите CSS-селектор раздела (например, section с Mode на First. Нижние правила всегда предполагают, что верхние уже применены. Поэтому здесь вы можете просто выбрать section).
  4. Выберите aria-labelledby в качестве атрибута в поле Attribute Name.
  5. В поле Insertion выберите Add / Replace.
  6. В поле Value вы вводите ID, который вы дали заголовку.
  7. Нажмите Save Block Local Rules, чтобы сохранить правила и применить их к блоку.
  8. Сохраните страницу и протестируйте во внешнем интерфейсе. Если вы не сохраните страницу, правила будут потеряны после выхода из редактора.
Semanticality™ Rules Editor с правилом присвоения атрибута aria-labelledby разделу

Результат: Программы чтения с экрана распознают именованный ориентир, навигация теперь более осмысленна, и вы выполняете WCAG 2.2: 1.3.1, 2.4.1 на уровне разметки - полностью без переделки темы.

  • Действуйте сейчас!

    Semanticality™ – это прагматичное решение, чтобы сделать веб-сайты WordPress-Gutenberg ваших клиентов доступными на уровне разметки и защитить их от штрафов до 550 000 евро за нарушения EAA***.

    Начать работу с Semanticality™ сейчас

    28.06.2025

    Вступление в силу EAA
  • Для кого подходит плагин Semanticality™?

    Мы разработали Semanticality™ для себя как экспертов по доступности и успешно использовали во многих проектах. Теперь мы хотим поделиться этим инструментом с другими разработчиками.

    Выберите свой план Semanticality™ – все функции, сгруппированные по количеству сайтов и поддержке.

    Инвестиция, которая окупается сразу. Сравните стоимость годовой лицензии с почасовой ставкой разработчика (около 100 €). Уже после 2-3 сэкономленных часов Semanticality™ окупается на весь год*!

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

    Обзор лицензий Semanticality™ - Пояснительное видео

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

    Тестируйте Semanticality™ 14 дней 100% без риска: Если вы не убеждены, вы получите свои деньги обратно – без всяких "если" и "но"*****. Получите сейчас до 30 ноября 2025 года с кодом LAUNCH20 Launch-скидку 20% на первый год.

    Лицензия Solo

    Для фрилансеров, побочных проектов и отдельных веб-сайтов.

    • Лицензионный ключ для 1 одновременной активации веб-сайта (включая Prod + Staging).
    • Гибкая передача: лицензии в любое время со старого на новый проект.
    • Все функции: Переключение тегов, правила атрибутов, глобальные и локальные правила, Live-Preview, метаполя, генератор ID.
    • Руководство пользователя и документация для разработчиков.
    • После истечения срока → плагин остается функциональным, но без обновлений и поддержки****.
    • 1 год обновлений и стандартная поддержка (ответ, как правило, ≤ 3 рабочих дней).
    • Квота поддержки: макс. 2 тикета/месяц (неиспользованные тикеты сгорают в конце месяца).
    • Область применения поддержки: Установка, базовая настройка, использование, а также основные вопросы о цифровой доступности (WCAG/EAA) в контексте плагина. Нет индивидуальной консультации по проекту или юридической консультации, нет исправлений сторонних поставщиков.
    • Обновление/понижение плана возможно в любое время.
    • 14 дней гарантия возврата денег, без всяких "если" и "но".
    • Доступ к партнерской программе с 20% повторяющейся комиссии за рекомендацией (например, вашим клиентам).

    Alter Preis: 119 € / год, neuer Preis: 95,20 € / год

    Лицензия Studio

    Для небольших команд и агентств с несколькими проектами.

    • Лицензионный ключ для 5 одновременных активаций веб-сайтов (включая Prod + Staging).
    • Гибкая передача: лицензий в любое время со старых на новые проекты.
    • Все функции: Переключение тегов, правила атрибутов, глобальные и локальные правила, Live-Preview, метаполя, генератор ID.
    • Руководство пользователя и документация для разработчиков.
    • После истечения срока → плагин остается функциональным, но без обновлений и поддержки****.
    • 1 год обновлений и Приоритетная поддержка (ответ, как правило, ≤ 1 рабочий день).
    • Квота поддержки: макс. 5 тикетов/месяц (неиспользованные тикеты сгорают в конце месяца).
    • Область применения поддержки: Установка, базовая настройка, использование, а также основные вопросы о цифровой доступности (WCAG/EAA) в контексте плагина. Нет индивидуальной консультации по проекту или юридической консультации, нет исправлений сторонних поставщиков.
    • Обновление/понижение плана возможно в любое время.
    • 14 дней гарантия возврата денег, без всяких "если" и "но".
    • Доступ к партнерской программе с 20% повторяющейся комиссии за рекомендацией (например, вашим клиентам).

    Alter Preis: 249 € / год, neuer Preis: 199,20 € / год

    Лицензия Agency

    Для агентств с активным потоком проектов.

    • Лицензионный ключ для 25 одновременных активаций веб-сайтов (включая Prod + Staging).
    • Гибкая передача: лицензий в любое время со старых на новые проекты.
    • Все функции: Переключение тегов, правила атрибутов, глобальные и локальные правила, Live-Preview, метаполя, генератор ID.
    • Руководство пользователя и документация для разработчиков.
    • 1× 60-мин вводный звонок для команды.
    • После истечения срока → плагин остается функциональным, но без обновлений и поддержки****.
    • 1 год обновлений и Приоритетная поддержка (ответ, как правило, ≤ 1 рабочий день) с путем эскалации.
    • Квота поддержки: макс. 10 тикетов/месяц (неиспользованные тикеты сгорают в конце месяца).
    • Область применения поддержки: Установка, базовая настройка, использование, а также основные вопросы о цифровой доступности (WCAG/EAA) в контексте плагина. Нет индивидуальной консультации по проекту или юридической консультации, нет исправлений сторонних поставщиков.
    • Обновление/понижение плана возможно в любое время.
    • 14 дней гарантия возврата денег, без всяких "если" и "но".
    • Доступ к партнерской программе с 20% повторяющейся комиссии за рекомендацией (например, вашим клиентам).

    Alter Preis: 499 € / год, neuer Preis: 399,20 € / год

    Лицензия Enterprise

    Для организаций с более чем 50 сайтами и формальными требованиями SLA (поддержка, аудит безопасности, согласование с DPO).

    • Лицензионный ключ для 50+ сайтов (включая Prod + Staging).
    • Опциональные приватные сборки.
    • Индивидуальный пакет поддержки и SLA по договоренности.
    • Индивидуальное предложение и объемные цены.

    Preis: по договоренности

    Консультация для Enterprise

    Примечание: Обработка платежей и выставление счетов осуществляется нашим партнером Freemius, Inc. (США), который выступает в качестве торгового посредника (Merchant of Record). Договорной стороной для плагина остается Дмитрий Дугарев (barrierenlos.com). Автоматическое продление ежегодно по полной цене без скидки. Отмена возможна в любое время до даты продления. Цены без НДС, если применимо.

    В восторге от Semanticality™? Рекомендуйте его дальше!

    Получите 20% комиссии с первой покупки и всех продлений ваших привлеченных клиентов – без минимального оборота или обязательств. Просто зарегистрируйтесь → рекомендуйте → зарабатывайте.

    У вас еще есть вопросы?