Как добавить атрибуты ARIA в Gutenberg блоках WordPress для улучшения доступности

Доступность веб-сайтов — важный аспект, особенно для сайтов на WordPress, которые должны быть удобны для всех пользователей, включая людей с ограниченными возможностями. В этой статье рассмотрим, как добавить ARIA (Accessible Rich Internet Applications) атрибуты в ваши кастомные и стандартные блоки Gutenberg, чтобы улучшить восприятие контента с помощью вспомогательных технологий, таких как экранные читалки.

Что такое ARIA атрибуты и зачем они нужны в Gutenberg блоках

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

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

Примеры ARIA атрибутов: aria-label, aria-labelledby, aria-hidden, role, aria-live и другие.

Добавление ARIA атрибутов в кастомные Gutenberg блоки

Чаще всего кастомные блоки создаются с помощью функции registerBlockType в JavaScript. Чтобы добавить ARIA атрибуты, можно использовать функцию save блока и добавить нужные атрибуты в корневой элемент или внутрь.

Пример: добавление aria-label и role в кастомный блок

const { registerBlockType } = wp.blocks;
const { useBlockProps } = wp.blockEditor;

registerBlockType('wpblock/accessibility-example', {
    title: 'ARIA Example',
    icon: 'universal-access-alt',
    category: 'widgets',
    attributes: {
        label: {
            type: 'string',
            default: 'Дополнительная информация',
        },
    },
    edit({ attributes, setAttributes }) {
        const blockProps = useBlockProps({
            role: 'region',
            'aria-label': attributes.label,
        });
        return (
            <div {...blockProps}>
                <input
                    type="text"
                    value={attributes.label}
                    onChange={(e) => setAttributes({ label: e.target.value })}
                    placeholder="Введите ARIA label"
                />
                <p>Контент с ARIA атрибутами</p>
            </div>
        );
    },
    save({ attributes }) {
        const blockProps = useBlockProps.save({
            role: 'region',
            'aria-label': attributes.label,
        });
        return (
            <div {...blockProps}>
                <p>Контент с ARIA атрибутами</p>
            </div>
        );
    },
});

В этом примере блок получает роль region с описанием через aria-label, которое можно менять в редакторе.

Добавление ARIA атрибутов в стандартные блоки через фильтры PHP

Если вы хотите добавить ARIA атрибуты в стандартные блоки, например, в блок core/button, можно использовать фильтр render_block в PHP для модификации HTML перед выводом.

Пример: добавление aria-pressed в кнопку

add_filter('render_block', 'wpblock_add_aria_to_button', 10, 2);
function wpblock_add_aria_to_button($block_content, $block) {
    if ($block['blockName'] === 'core/button') {
        // Добавляем aria-pressed="false" к кнопке
        $block_content = str_replace('<a', '<a aria-pressed="false"', $block_content);
    }
    return $block_content;
}

Такой подход позволяет не менять JS-код блоков, а внедрять атрибуты на сервере.

Использование плагина Clearfy Pro для автоматического добавления ARIA атрибутов

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

Clearfy Pro позволяет включать дополнительные настройки для SEO и доступности без необходимости писать код.

Рекомендации и лучшие практики при работе с ARIA в Gutenberg

• Используйте только необходимые атрибуты: избыточное добавление ARIA может запутать вспомогательные технологии.
• Проверяйте семантику HTML: по возможности используйте семантические теги (section, nav, article), чтобы уменьшить зависимость от ARIA.
• Тестируйте с экранными читалками: NVDA, VoiceOver и другие инструменты помогут понять, как воспринимается ваш блок.
• Добавляйте ARIA динамически: если контент блоков меняется, используйте атрибуты aria-live для уведомления пользователей об изменениях.

Пример использования aria-live в динамическом блоке

const { useState, useEffect } = wp.element;
const { registerBlockType } = wp.blocks;
const { useBlockProps } = wp.blockEditor;

registerBlockType('wpblock/aria-live-example', {
    title: 'ARIA Live Example',
    icon: 'update',
    category: 'widgets',
    edit() {
        const [message, setMessage] = useState('Статус: готово');
        const blockProps = useBlockProps({ 'aria-live': 'polite' });

        useEffect(() => {
            const timer = setTimeout(() => {
                setMessage('Статус обновлен');
            }, 5000);
            return () => clearTimeout(timer);
        }, []);

        return <div {...blockProps}>{message}</div>;
    },
    save() {
        return <div aria-live="polite">Статус: готово</div>;
    },
});

Этот блок через 5 секунд обновит сообщение, а экранные читалки уведомят пользователя.

Заключение

Добавление ARIA атрибутов в Gutenberg блоки — важный шаг в создании доступных сайтов на WordPress. Используйте возможности JavaScript и PHP, чтобы внедрять эти атрибуты как в кастомные, так и в стандартные блоки. Для упрощения задач можно использовать плагины, например, Clearfy Pro, который интегрируется с вашим сайтом.

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