Hondo

Improve the accessibility of ConvertKit forms

ConvertKit is a great way to connect with your customers, readers, or simply, fans through email. Their default form embeds come with a few accessibility errors though. Correcting those errors is very easy though.

Here is a complete example of a ConvertKit form embed.

<div class="ck_form_container ck_inline" data-ck-version="6">
  <div class="ck_form ck_naked">
  <div class="ck_form_fields">
    <div id="ck_success_msg" style="display:none;">
      <p>Success! Now check your email to confirm your subscription.</p>
    </div>

    <!--  Form starts here  -->
    <form id="ck_subscribe_form" class="ck_subscribe_form" action="{{REDACTED}}" data-remote="true">
      <input type="hidden" value="{&quot;form_style&quot;:&quot;naked&quot;}" id="ck_form_options">
      <input type="hidden" name="id" value="{{REDACTED}}" id="landing_page_id">
      <input type="hidden" name="ck_form_recaptcha" value="" id="ck_form_recaptcha">
      <div class="ck_errorArea">
        <div id="ck_error_msg" style="display:none">
          <p>There was an error submitting your subscription. Please try again.</p>
        </div>
      </div>
      <div class="ck_control_group ck_email_field_group">
        <label class="ck_label" for="ck_emailField" style="display: none">Email Address</label>
        <input type="text" name="first_name" class="ck_first_name" id="ck_firstNameField" placeholder="First Name">
        <input type="email" name="email" class="ck_email_address" id="ck_emailField" placeholder="Email Address" required>
      </div>
      <div class="ck_control_group ck_captcha2_h_field_group ck-captcha2-h" style="position: absolute !important;left: -999em !important;">
        <input type="text" name="captcha2_h" class="ck-captcha2-h" id="ck_captcha2_h" placeholder="We use this field to detect spam bots. If you fill this in, you will be marked as a spammer.">
      </div>


      <button class="subscribe_button ck_subscribe_button btn fields" id="ck_subscribe_button">
        Subscribe
      </button>
    </form>
  </div>

</div>

</div>

The accessibility issues in this form have to do with the labels on the inputs. Web accessibility standards require labels for each form control on a page.

<div class="ck_control_group ck_email_field_group">
  <label class="ck_label" for="ck_emailField" style="display: none">Email Address</label>
  <input type="text" name="first_name" class="ck_first_name" id="ck_firstNameField" placeholder="First Name">
  <input type="email" name="email" class="ck_email_address" id="ck_emailField" placeholder="Email Address" required>
</div>

The main inputs to collect first name and email are set with a single label. This label is hidden via inline styles. This prevents screen readers from properly identifying the fields as it won’t be spoken by the screen reader. An opposite problem occurs with the honeypot field that comes later.

<div class="ck_control_group ck_captcha2_h_field_group ck-captcha2-h" style="position: absolute !important;left: -999em !important;">
  <input type="text" name="captcha2_h" class="ck-captcha2-h" id="ck_captcha2_h" placeholder="We use this field to detect spam bots. If you fill this in, you will be marked as a spammer.">
</div>

A honeypot field is a text input field that is not hidden using the display property of CSS, but rather uses some CSS trickery to visually hide the field from users. Both of these issues are easy to correct. Here is how to improve the accessibility of the ConvertKit embed.

For the primary fields, adding a label for each input and displaying them will resolve the accessibility errors. This can be handled with the following HTML:

<div class="ck_control_group ck_email_field_group">
  <label class="ck_label" for="ck_firstNameField">First Name</label>
  <input type="text" name="first_name" class="ck_first_name" id="ck_firstNameField" placeholder="First Name">
  <label class="ck_label" for="ck_emailField">Email Address</label>
  <input type="email" name="email" class="ck_email_address" id="ck_emailField" placeholder="Email Address" required>
</div>

In the example above, the label will be displayed for users in the browser. Since this may not be ideal for many, a class called visually-hidden is added to the labels to hide them in an accessible manner. Here is an example:

<div class="ck_control_group ck_email_field_group">
  <label class="ck_label visually-hidden" for="ck_firstNameField">First Name</label>
  <input type="text" name="first_name" class="ck_first_name" id="ck_firstNameField" placeholder="First Name">
  <label class="ck_label visually-hidden" for="ck_emailField">Email Address</label>
  <input type="email" name="email" class="ck_email_address" id="ck_emailField" placeholder="Email Address" required>
</div>
<style>
  .visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
</style>

For the honeypot field, using the similar pattern will help clarify the fields purpose.

<div class="ck_control_group ck_captcha2_h_field_group ck-captcha2-h visually-hidden">
  <label class="ck_label" for="ck_captcha2_h">We use this field to detect spam bots. If you fill this in, you will be marked as a spammer.</label>
  <input type="text" name="captcha2_h" class="ck-captcha2-h" id="ck_captcha2_h">
</div>

With the visually-hidden class, the parent container be hidden to remove the label and field. Screen readers will now properly identify the honeypot field and some extra inline style cruft can be cleaned up as well.

Now that your ConvertKit form is free of accessibility errors, make sure to subscribe to my weekly newsletter for more front end development goodies.

There was an error submitting your subscription. Please try again.
Get my latest posts and links about development and moonlighting delivered every Sunday at 8pm.