Quiz input type not accessible

  • Joe Dolson

    (@joedolson)


    9 years ago

    Hi, Takayuki!

    The topic pretty much says it all; but the [quiz] input type, as it’s currently written, can’t be made accessible. Since the question for a quiz input type is part of the user input, it should be easy to automatically have this field labeled appropriately; but as it is, any use of the ‘quiz’ feature will make a form very difficult to submit for a user with a screen reader, since there’s no label element associated with the input field.

    The following seems like it should work:

    On lines 62-66 of quiz.php:

    $html = sprintf(
'<span class="wpcf7-form-control-wrap %1$s"><label for='wpcf7-quiz-%5$s' class="wpcf7-quiz-label">%2$s</label>&nbsp;<input %3$s id='wpcf7-quiz-%5$s' /><input type="hidden" name="_wpcf7_quiz_answer_%4$s" value="%5$s" />%6$s</span>',
 sanitize_html_class( $tag->name ),
 esc_html( $question ), $atts, $tag->name,
wp_hash( $answer, 'wpcf7_quiz' ), $validation_error );

    https://wordpress.org/plugins/contact-form-7/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    9 years ago

    Hi Joe, thank you for pointing out this. Because users can assign their own id attribute to the quiz answer box through the [quiz] form-tag and it will cause conflicts, I changed the markup to this:

    <span class="wpcf7-form-control-wrap %1$s"><label><span class="wpcf7-quiz-label">%2$s</span> <input %3$s /></label><input type="hidden" name="_wpcf7_quiz_answer_%4$s" value="%5$s" />%6$s</span>

    Wrapped <span> and <input> with <label>. This works correctly, right?

    This change will be included in the next release.

    Thread Starter Joe Dolson

    (@joedolson)

    9 years ago

    Yes, that should work too. Self-labeling can cause problems for voice command applications, but having two ids on the input would definitely not be kosher, either!

    Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Quiz input type not accessible’ is closed to new replies.