Form label in parent producing a11y issue

  • Resolved kwhiteb

    (@kwhiteb)


    4 years, 10 months ago

    I’m working to fix some issues on a WP site that I inherited, and I’ve noticed that a couple of my browser accessibility audit tools (axe, lighthouse) can’t seem to find the input label for my site’s CC email sign up form, which is causing it to register a11y violations. I’ve also confirmed inconsistent behavior on Safari’s VoiceOver tool.

    Everything about the label itself is fine — it’s properly tied to the input using the for attribute — but the CC plugin is handling layout/position by nesting the label within a span that gets a class like position-top or position-bottom. Since the label is nested within a span and not sitting as an adjacent sibling to the input element, screenreader software (and other automated systems like lighthouse) are having trouble finding the label.

    Here’s what it looks like (forgive any formatting issues):

    
<p class="ctct-form-field ctct-form-field-email ctct-form-field-required">? 
  <span class="ctct-label-top">
    <label for="email___5555555">Email <abbr title="required">*</abbr></label>? 
  </span>? 
  <input required="" type="email" name="email___5555555" id="email___5555555" 
 value="" placeholder="Enter Your Email Address" class="ctct-email ctct-label-top">
</p>

    The code that produces the markdup can be found in /includes/class-display.php (view source).

    I wonder if this could be modified so that the $label_placement_class is attached to the label itself, instead of a parent span. This might require minor changes to the CSS, but it should make the form compliant with WCAG. Thanks in advance for your help!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Constant Contact

    (@constantcontact)

    Hi @kwhiteb

    Thanks for this feedback and information. We definitely want to make sure the plugin is as accessible as can be so this is good information to know.

    Just to be certain, would moving that closing span to be after the input also work for this case?

    Regardless will pass this info along to our developers to look into and see what we can do to help.

    Thread Starter kwhiteb

    (@kwhiteb)

    Ack! I figured it out. There was a custom stylesheet down the stack that was overriding the defaults and setting the display of the label to none rather than visually hiding it. Fixing that cleared the a11y alerts, so all good. My apologies for the false alarm! Thanks for the super speedy reply. Greatly appreciated!

    Plugin Author Constant Contact

    (@constantcontact)

    You’re welcome, glad it was a simple fix for this case. If you end up seeing or finding any other accessibility issues, feel free to let us know, we’re more than happy to fix them.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Form label in parent producing a11y issue’ is closed to new replies.

Tags