WordPress : relier correctement les labels implicites aux champs de formulaire avec Contact Form 7

a-lire_wp-cf7-labels.md

WordPress : relier correctement les labels implicites aux champs de formulaire avec Contact Form 7

Si vous utilisez l’extension Contact Form 7 pour WordPress, copiez le contenu du fichier functions.php ci-dessous dans le fichier functions.php de votre thème ou de votre thème enfant.

Le code ci-dessous a été testé avec Contact Form 7 version 5.1.1.

Attention : ce code n’ajoute pas de boutons à l’éditeur TinyMCE de Contact Form 7. Vous devez saisir manuellement les shortcodes concernés.

Exemples de code à saisir dans le champ de saisie de Contact Form 7 une fois les fonctions importées dans votre thème

Cases à cocher accessibles

<fieldset>
	<legend>My accessible checkbox fields</legend>
	[a11ycheckbox checkbox-111 id:foo use_label_element "first choice" "second choice" "third choice"]
</fieldset>

Cases à cocher accessibles dont au moins une est obligatoire

<fieldset>
	<legend>My accessible checkbox fields (you need to select at least one checkbox)</legend>
	[a11ycheckbox* checkbox-999 id:foo use_label_element "first choice" "second choice" "third choice"]
</fieldset>

Boutons radio accessibles

<fieldset>
	<legend>My accessible radio fields</legend>
	[a11yradio radio-999 id:foo use_label_element "first choice" "second choice" "third choice"]
</fieldset>

Impacts utilisateurs

Cf. Identification des champs, des contrôles et des regroupements de formulaires – Formulaires - Défauts d’accessibilité : Impacts sur les utilisateurs.

Références RGAA 3

• Critère 11.1 [A] Chaque champ de formulaire a-t-il une étiquette ?
• Critère 11.5 [A] Dans chaque formulaire, les informations de même nature sont-elles regroupées, si nécessaire ?
• Critère 11.6 [A] Dans chaque formulaire, chaque regroupement de champs de formulaire a-t-il une légende ?
• Critère 11.7 [A] Dans chaque formulaire, chaque légende associée à un groupement de champs de formulaire est-elle pertinente ?

Licence

Code distribué sous la licence GPLv2 ou ultérieure. En savoir plus sur la licence de WordPress.

En savoir plus

Conférence « 8 conseils pour rendre votre thème WordPress plus accessible ! » de Marie Guillaumet.

functions.php

<?php 

if ( ! function_exists( 'wpcf7_add_form_tag_a11ycheckbox_radio' ) ) {
	/**
	 * Customize Contact Form 7 (5.1.1)
	 * Freely adapted from contact-form-7/modules/checkbox.php by Takayuki Miyoshi to include id/for attributes for better accessibility.
	 * These functions create new shortcodes: a11ycheckbox, a11ycheckbox* and a11yradio.
	 * @link https://contactform7.com/2015/01/10/adding-a-custom-form-tag/
	 */
	add_action( 'wpcf7_init', 'wpcf7_add_form_tag_a11ycheckbox_radio' );

	function wpcf7_add_form_tag_a11ycheckbox_radio() {
	    wpcf7_add_form_tag( array( 'a11ycheckbox', 'a11ycheckbox*', 'a11yradio'),
	        'wpcf7_add_form_tag_a11y_handler', 
	        array( 
	        	'name-attr' => true,
	        	'selectable-values' => true,
	        	'multiple-controls-container' => true,
	        ) 
	    );
	}

	function wpcf7_add_form_tag_a11y_handler( $tag ) {
		if ( empty( $tag->name ) ) {
			return '';
		}

		$validation_error = wpcf7_get_validation_error( $tag->name );

		$class = wpcf7_form_controls_class( $tag->type );

		if ( $validation_error ) {
			$class .= ' wpcf7-not-valid';
		}

		$label_first = $tag->has_option( 'label_first' );
		$use_label_element = $tag->has_option( 'use_label_element' );
		$exclusive = $tag->has_option( 'exclusive' );
		$free_text = $tag->has_option( 'free_text' );
		$multiple = false;

		if ( 'a11ycheckbox' == $tag->basetype ) {
			$multiple = ! $exclusive;
		} else { // radio
			$exclusive = false;
		}

		if ( $exclusive ) {
			$class .= ' wpcf7-exclusive-checkbox';
		}

		$atts = array();

		$atts['class'] = $tag->get_class_option( $class );
		$atts['id'] = $tag->get_id_option();

		$html = '';
		$count = 0;

		if ( $data = (array) $tag->get_data_option() ) {
			if ( $free_text ) {
				$tag->values = array_merge(
					array_slice( $tag->values, 0, -1 ),
					array_values( $data ),
					array_slice( $tag->values, -1 ) );
				$tag->labels = array_merge(
					array_slice( $tag->labels, 0, -1 ),
					array_values( $data ),
					array_slice( $tag->labels, -1 ) );
			} else {
				$tag->values = array_merge( $tag->values, array_values( $data ) );
				$tag->labels = array_merge( $tag->labels, array_values( $data ) );
			}
		}

		$values = $tag->values;
		$labels = $tag->labels;

		$default_choice = $tag->get_default_option( null, array(
			'multiple' => $multiple,
		) );

		$hangover = wpcf7_get_hangover( $tag->name, $multiple ? array() : '' );

		foreach ( $values as $key => $value ) {
			if ( $hangover ) {
				$checked = in_array( $value, (array) $hangover, true );
			} else {
				$checked = in_array( $value, (array) $default_choice, true );
			}

			if ( isset( $labels[$key] ) ) {
				$label = $labels[$key];
			} else {
				$label = $value;
			}

			$item_atts = array(
				'type' => str_replace('a11y', '', $tag->basetype),
				'name' => $tag->name . ( $multiple ? '[]' : '' ),
				'value' => $value,
				'checked' => $checked ? 'checked' : '',

				// Add ID to each input
				'id' => $tag->basetype . '_' . '_' . $tag->name . '_' . $key
			);

			$item_atts = wpcf7_format_atts( $item_atts );

			if ( $label_first ) { // put label first, input last
				$item = sprintf(
					'<span class="wpcf7-list-item-label">%1$s</span><input %2$s />',
					esc_html( $label ), $item_atts );
			} else {
				$item = sprintf(
					'<input %2$s /><span class="wpcf7-list-item-label">%1$s</span>',
					esc_html( $label ), $item_atts );
			}

			if ( $use_label_element ) {
				$item = '<label for="'. $tag->basetype . '_' . '_' . $tag->name . '_' . $key .'">' . $item . '</label>';
			}

			$class = 'wpcf7-list-item';
			$count += 1;

			if ( 1 == $count ) {
				$class .= ' first';
			}

			if ( count( $values ) == $count ) { // last round
				$class .= ' last';
			}

			$item = '<span class="' . esc_attr( $class ) . '">' . $item . '</span>';
			$html .= $item;
		}

		$atts = wpcf7_format_atts( $atts );

		$html = sprintf(
			'<span class="wpcf7-form-control-wrap %1$s"><span %2$s>%3$s</span>%4$s</span>',
			sanitize_html_class( $tag->name ), $atts, $html, $validation_error );

		return $html;
	}

	/* Validation filter for the newly created radio and checkbox fields */

	add_filter( 'wpcf7_validate_a11ycheckbox', 'wpcf7_a42_checkbox_validation_filter', 10, 2 );
	add_filter( 'wpcf7_validate_a11ycheckbox*', 'wpcf7_a42_checkbox_validation_filter', 10, 2 );
	add_filter( 'wpcf7_validate_a11yradio', 'wpcf7_a42_checkbox_validation_filter', 10, 2 );

	function wpcf7_a42_checkbox_validation_filter( $result, $tag ) {
		$name = $tag->name;
		$is_required = $tag->is_required() || 'a11yradio' == str_replace('a11y', '', $tag->type);
		$value = isset( $_POST[$name] ) ? (array) $_POST[$name] : array();

		if ( $is_required and empty( $value ) ) {
			$result->invalidate( $tag, wpcf7_get_message( 'invalid_required' ) );
		}

		return $result;
	}
}