Accessibility Issues

General Discussion
1

I ran a few of my Blocs-built sites through Wave recently to check accessibility and readability issues. I noticed that the forms in Blocs don’t have their labels and input fields associated with each other. Whilst the forms work just fine, this apparent “disconnect” can affect SEO page ranking. Although this isn’t an issue that is unique to Blocs sites, I was wondering if there was a way to correct this issue. The usual way to overcome this issue is by using code similar to below:

<input name="_checkbox" type="checkbox" id="checkbox1" required="" class="input3">
<label for="checkbox1" class="f8">
    We can send you product updates and offers via email. It is possible to opt-out at any time.
    </label>

The above is a checkbox form control that is correctly associated with its label (not from a Blocs Form)

In Blocs, the form control looks like this:

<input class="form-check-input" type="checkbox" id="optin" data-validation-minchecked-message="You must agree to this before we can take your information." data-validation-minchecked-minchecked="1" name="optin">

<label class="form-check-label">
We can send you product updates and offers via email. It is possible to opt-out at any time.
</label>
2

I was just wondering about this myself to try and see what could be done. It’s partly about Seo but I believe there is also a question of accessibility from a legal standpoint. This is becoming a big topic in the US with A11Y/Aria.

3

This thread was opened a year and a half ago and it doesn’t look like much has changed. When I test the form on my site I get an accessibility error for every form field / label. I know this probably gets (unfairly) said about a lot of issues, but it seems like a relatively easy fix to associate the ID with the label.

Any chance this is on a list of upcoming changes?

4

You can link the label to the input field using Custom Attributes.

Screen Shot 2021-12-21 at 7.42.32 PM

I guess the issue here is that the labels and input fields are seperate elements you can add to create forms. Blocs doesnt have a way of knowing what label belongs to what input field.

For the moment anyway, you can easily add your own.

By the way @PaulB, I really like your website. Excellent.

1 Like
5

Awesome, thanks @PeteSharp! That did the trick. I tend to forget about custom attributes.

Thanks, I’m glad you like my site. :slight_smile:

1 Like