Skip to content

Instantly share code, notes, and snippets.

@access42
Last active Mar 20, 2019
Embed
What would you like to do?
WordPress : relier correctement les labels implicites aux champs de formulaire avec Contact Form 7

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.

Access42

<?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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment