Replies: 0
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!