Accessibility issue because labels and forms controls are not associated

  • Resolved yann1ck

    (@ja4st3r)


    2 years, 11 months ago

    Hi Aurovrata,

    another report, sorry for keeping your busy.

    I like to use CF7 because its easy to create an accessible form if done right. For that it is vital to have labels associated with a field, so in CF7 I would use the <label> element as a container:

    
<label>
  Your name [text* your-name]
</label>

    (I could also use aria labels to build an association)

    If I use https://wave.webaim.org/ to check the accessibility of a from created with your plugin I get “Missing form label” or “Select missing label” errors, depending on the form control. I am not an expert on web accessibility (far from it actually, I had to read this tutorial to figure out whats going on). Looking at the html structure the <label> element is not a container for the form control and there is no explicit association with aria-labelledby.

    
[...]
<label>Test field<em>*</em></label>
<span class="wpcf7-form-control-wrap test">
    <select name="test" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false">
        <option value="Test 1">Test 1</option>
        <option value="Test 2">Test 2</option>
    </select>
</span>
[...]

    I am not sure if screen readers can successfully connect the label with the form controls, but I am sure it is not best practice.

    I tried to manually change the HTML markup of a form from this 

    
<div class="field textarea"><label>test field</label>[textarea x5 textarea-794]

    to

    
<div class="field textarea"><label>test field[textarea x5 textarea-794]</label>

    and it fixes the accessibility issues raised by the WebAIM tool, but I havent tested thoroughly. I can fix it manually for my forms but I think it would be great to have a accessible defaults for the Smart Grid plugin.

    • This topic was modified 2 years, 11 months ago by yann1ck.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter yann1ck

    (@ja4st3r)

    Correction: Just moving the closing `<label>′ in the HTML breaks the admin user interface. If I do that the form-tag becomes part of the label text in the interface.

    • This reply was modified 2 years, 11 months ago by yann1ck.
    Plugin Author Aurovrata Venet

    (@aurovrata)

    To encapsulate the field tags into your label, you can change the html markup use for field cells using provided hooks.

    Haven’t fully tested this, but built it in initially in anticipation of such scenario.

    However, field encapsulation using label is not the recommended way. The html std recommends using the label for attribute along with the input field id attribute… But the CF7 plugin does not render id attributes

    Thread Starter yann1ck

    (@ja4st3r)

    Thanks for your response. I have missed that hook to change the html markup. I will check it out.

    I know that field encapsulation is not the recommended way, but it works and as you said it is the only way that works with CF7. So its the best option available.

    Plugin Author Aurovrata Venet

    (@aurovrata)

    Thanks for your response. I have missed that hook to change the html markup. I will check it out.

    let me know how it goes.

    I know that field encapsulation is not the recommended way, but it works and as you said it is the only way that works with CF7.

    I plan to fix this as part of my ongoing re-write of the CF7 plugin. The CF7 plugin is poorly designed as it initially had to overcome a lack of extension functionality with the early WP versions.

    I am also strugling with this (ie input:placeholder-shown+label is not possible) , any workaround to fix the label like this?:

    NOW:
    <label for=”company”>Bedrijfsnaam * </label>
    <span class=”wpcf7-form-control-wrap” data-name=”your-name”>
    <input type=”text” name=”your-name” value=”” size=”40″ class=”wpcf7-form-control wpcf7-text wpcf7-validates-as-required” id=”company” aria-required=”true” aria-invalid=”false” placeholder=”Bedrijfsnaam B.V.”>
    </span>

    PROPOSED:
    <span class=”wpcf7-form-control-wrap” data-name=”your-name”>
    <label for=”company”>Bedrijfsnaam * </label>
    <input type=”text” name=”your-name” value=”” size=”40″ class=”wpcf7-form-control wpcf7-text wpcf7-validates-as-required” id=”company” aria-required=”true” aria-invalid=”false” placeholder=”Bedrijfsnaam B.V.”>
    </span>

    please also see https://stackoverflow.com/questions/56927311/how-to-place-label-inside-the-span-element-wpcf7-form-control-wrap

    Plugin Author Aurovrata Venet

    (@aurovrata)

    @noahmaes can you kindly start a new thread on this. It is WordPress forum policy to have your own thread for your issue, even if related. thanks. I will follow up with you on that thread…you can also link your new thread here so that other may find it while reading this one.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Accessibility issue because labels and forms controls are not associated’ is closed to new replies.