Контраст — ключевой элемент веб-дизайна, влияющий на доступность контента. Компонент WordPress ContrastChecker помогает разработчикам следовать стандартам WCAG 2.0 AA, автоматически проверяя контраст пользовательских элементов и отображая предупреждения при низком качестве контраста.
Установка и структура блока
Для создания собственного блока с использованием ContrastChecker, начнем с регистрации блока. Вот пример кода с использованием registerBlockType.
import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import {
useBlockProps,
RichText,
ContrastChecker
} from '@wordpress/block-editor';
import './editor.scss';
const BLOCK_NAME = "custom-contrast-checker";
registerBlockType(`my-plugin/${BLOCK_NAME}`, {
apiVersion: 2,
title: __( 'Custom Contrast Checker', 'my-plugin' ),
description: __( 'A block to check contrast between text and background colors.' ),
category: 'design',
icon: 'admin-customizer',
attributes: {
textContent: {
type: 'string',
source: 'html',
selector: 'p',
default: 'Editable text...'
},
textColor: {
type: 'string',
default: '#202020'
},
backgroundColor: {
type: 'string',
default: '#f8f8f8'
}
},
edit: ({ attributes, setAttributes }) => {
const blockProps = useBlockProps({
style: {
color: attributes.textColor,
backgroundColor: attributes.backgroundColor,
}
});
return (
<div { ...blockProps }>
<RichText
tagName="p"
value={ attributes.textContent }
onChange={ ( textContent ) => setAttributes({ textContent }) }
placeholder={ __( 'Write your text...' ) }
/>
<ContrastChecker
{textColor={ attributes.textColor }}
{backgroundColor={ attributes.backgroundColor }}
/>
</div>
);
},
save: ({ attributes }) => {
const blockProps = useBlockProps.save({
style: {
color: attributes.textColor,
backgroundColor: attributes.backgroundColor,
}
});
return (
<div { ...blockProps }>
<RichText.Content tagName="p" value={ attributes.textContent } />
</div>
);
}
});
Использование ContrastChecker
Этот компонент принимает textColor и backgroundColor как обязательные параметры, основываясь на которых он проверяет контраст. Проверка осуществляется автоматически, и если контраст недостаточен, компонент отобразит сообщение об ошибке. Это позволяет легко контролировать соответствие критериям доступности.
Практическое применение
Чтобы улучшить пользовательский интерфейс, вы можете добавить цветовые индикаторы для быстрой смены цветов. Это позволит пользователям более эффективно изменять цвета, сразу видя результат:
import {
Panel,
PanelBody,
ColorPalette
} from '@wordpress/components';
<Panel>
<PanelBody title={ __( 'Color Settings', 'my-plugin' ) }>
<ColorPalette
value={ attributes.textColor }
onChange={ ( textColor ) => setAttributes({ textColor }) }
/>
<ColorPalette
value={ attributes.backgroundColor }
onChange={ ( backgroundColor ) => setAttributes({ backgroundColor }) }
/>
</PanelBody>
</Panel>
Совет: Использование
ColorPaletteпомогает пользователю быстрее выбрать нужный цветовой вариант, мгновенно видя изменения в реальном времени.
Подведение итогов
Компонент ContrastChecker — полезный инструмент для разработчиков, обеспечивающий высокую доступность пользовательского интерфейса. Следование стандартам WCAG с помощью этого компонента гарантирует, что ваш контент будет доступен более широкому кругу пользователей, включая тех, у кого есть нарушения зрения.