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

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

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

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

<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>
      

<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 вы корректируете код графически на основе правил – они применяются во время рендеринга.

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

  [Заголовок уровня 2] Обзор продукта

  [Параграф] Это доступный текст...

  Пользователи могут легко перемещаться и прослушивать контент благодаря правильному 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

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

  • 

    ISO 40500:2012

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

  • 

    WAI-ARIA

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

  • 

    WHATWG

    Стандарт HTML5

  • 

    WCAG 2.2 AA

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

  • 

    EAA

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

  • 

    BITV 2.0

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

  • 

    ADA

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

  • 

    BFSG

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

  • 

    EAA

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

  • 

    BITV 2.0

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

  • 

    ADA

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

  • 

    BFSG

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

• Надежная основа. Для каждого пользователя.

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

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

  

  

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

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

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

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

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

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

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

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

• Ограниченные возможности настройки: Изменения возможны только в основной обертке блока.
• Нет настройки вложенных элементов: например, ссылка в карточке.
• HTML-теги нельзя изменить: например, div не может быть преобразован в button.
• Нет глобальных правил или динамических переменных: например, нет возможности создать правило для всех кнопок в блоке.
• Нет безопасности: Статические значения сохраняются в контенте и могут вызвать непредсказуемые ошибки при деактивации.

• 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.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

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

• 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

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

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

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

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

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

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

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

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

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

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

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

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

Открыть 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).

Правило 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. Сохраните страницу и протестируйте во внешнем интерфейсе. Если вы не сохраните страницу, правила будут потеряны после выхода из редактора.

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

Для кого подходит плагин Semanticality™?

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

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

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

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

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

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

Что именно делает Semanticality™?

Где я могу увидеть, как используется плагин?

Замедляет ли плагин мой веб-сайт?

Работает ли Semanticality™ с любой темой и всеми плагинами блоков?

Совместим ли Semanticality™ также с Kadence Blocks?

Совместим ли Semanticality™ также с Elementor?

Совместим ли Semanticality™ также с Divi?

Что произойдет, если я сменю тему?

Что, если мои собственные скрипты динамически изменяют атрибуты?

Что произойдет, если я деактивирую плагин?

Что считается "Сайтом" в Semanticality™? Учитываются ли Staging и Localhost?

Какие технические требования (WordPress/PHP) существуют?

Совместим ли Semanticality™ с плагинами кэширования или минификации?

Поддерживает ли Semanticality™ многоязычные веб-сайты (WPML, Polylang)?

Существует ли пользовательская документация для Semanticality™?

Какие критерии успеха WCAG 2.2 я могу выполнить с помощью Semanticality™?

Делает ли Semanticality™ мой веб-сайт автоматически доступным?

Что мне делать, если у моего агентства более 25 веб-сайтов?

Как работает лицензия для клиентских проектов?

Могу ли я перенести лицензию на другой домен или клиенту?

Могу ли я обновить или понизить свой план позже?

Почему Semanticality™ – это подписка, а не одноразовый платеж?

Что включает в себя поддержка, как быстро я получу помощь – и есть ли лимиты на тикеты?

Как использовать 14-дневную гарантию возврата денег?

Как использовать код купона LAUNCH20?

Отправляет ли плагин данные на внешние серверы? Примечание DSGVO

Могу ли я экспортировать свои правила и повторно использовать их в других проектах?

Где я могу посмотреть дорожную карту и как подать запросы на функции?

Как именно работает модель лицензирования?

Что произойдет, если срок действия моей лицензии истечет через год?

Есть ли партнерская или аффилиатная программа?

Является ли плагин Open Source? Почему я тогда плачу?