Возникла необходимость сделать форму связи с поддержкой инвалидности (accessibility) — для слабовидящих.

У нас есть замечательный плагин Contact Form 7.

По умолчанию, если включить скрин-ридер, после отправки формы, ридер не зачитывает ошибки и вообще никак не реагирует. Он говорит Alert — и на этом сообщение заканчивается.

Итак, к нашему плагину Contact Form 7 нужно добавить еще два (бесплатных):

Contact Form 7: Accessible Defaults

Contact form 7 Custom validation

Первый добавляет поддержку инвалидности. После его установки уже готовые формы Контакт Форм 7 не изменятся, вам нужно будет создать новые. В новых добавятся изменения, вот такие:

Изменение дефолтной формы:

<p>Your Name (required)<br />
[text* your-name] </p>
><p>Your Email (required)<br />
[email* your-email] </p>
<p>Subject<br />
[text your-subject] </p>
<p>Your Message<br />
[textarea your-message] </p>
<p>[submit "Send"]</p>

на такую:

[response]
<fieldset>
<label for="name">Name (required)</label>
[text* your-name id:name]
<label for="e-mail">Email address (required)</label>
[email* your-email id:e-mail]
</fieldset>
[submit "I want your newsletter"]

Хорошо еще добавить небольшие изменения. В папке с главным плагином Contact Form 7 найдите основной файл плагина wp-contact-form-7.php, откройте его и измените строки (с true на flase):

define( 'WPCF7_AUTOP', false ); // no extra <p>
define( 'WPCF7_LOAD_JS', false );  // disables JavaScript
define( 'WPCF7_LOAD_CSS', false ); // disables the default CSS

Эти изменения позволят обновлять страницу и выставлять фокус наверху — чтобы ридер сразу начал читать ошибки.

Переходим ко второму плагину.

Дело в том, что по требованиям инвалидности каждое сообщение об ошибке должно иметь свой собственный текст. По умолчанию Контакт Форм 7 для незаполненных полей выдает «The field is required». Выходит, что человек получает от скрин-ридера несколько одинаковых сообщений — «поле пустое», но не знает — какое именно?

Для этого нам и нужен плагин кастомных сообщений об ошибке. Их несколько, но все объединяет одно — они устарели. «Вылечить» я смогла только один — Contact form 7 Custom validation.

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

Вордпресс начинает ругаться на строки с определением ключа, например, строки 23 и 43 в файле cf7-custom-validation.php:

$vals = sanitize_text_field($_POST[$key]);

$vals = sanitize_text_field($_POST[$key]);

Замените sanitize_text_field на isset. У вас получится:

$vals = isset($_POST[$key]);

и

$vals = isset($_POST[$key]);

Далее. Наверху будет сообщение об ошибке:

wpcf7_add_shortcode is deprecated

И совет использовать вместо него scan_form_tags.

В том же файле плагина cf7-custom-validation.php запустите поиск по слову wpcf7_add_shortcode.

И просто замените его на scan_form_tags.

Сохраните файлы и загрузите на сервер в соответствующие папки плагинов.

Должно заработать!

Небольшая добавка — как найти поля для кастомных сообщений. Если у вас форма стандартная, на поля: your-name и e-mail, то вам нужно заменить их имена. Хотя бы даже и так: your-name2 и e-mail2. Потом пройдите на дефолтную вкладку сообщений (Messages) и запустите там поиск через Ctrl+F, введите имя вашего нового поля. Оно подсветится, и вы сможете вбить туда свое сообщение!

Подробнее почитать и посмотреть видео можно здесь: https://wp-kama.ru/id_8362/contact-form-7-custom-validation.html.

Да, кстати — для быстрого тестирования сайта со скрин-ридером советую ChromeVox — это расширение на Google Chrome, то есть — не требует устанавливать никаких программ. Быстро и сердито.