umbraco forms failing wcag21 accessibility checks - Umbraco Forms

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Jonathan Roberts 409 posts 1063 karma points

Jan 04, 2019 @ 14:07
0

Umbraco Forms - failing WCAG 2.1 accessibility checks
Hi,

We need all our sites to pass WCAG2.1 and a lot of our sites use Umbraco Forms.

These forms are failing our checks as the Input controls have an invalid name attribute or do not have a label.

for example:
```
<input type="hidden" name="50a7c4d5-35e0-4f4f-f6fd-ef4b333d26fd"
                                           id="50a7c4d5-35e0-4f4f-f6fd-ef4b333d26fd"
                                           class="datepickerfieldshadow" value="" />

<input type="text" name="50a7c4d5-35e0-4f4f-f6fd-ef4b333d26fd" id="50a7c4d5-35e0-4f4f-f6fd-ef4b333d26fd_1"
                                           class="datepickerfield" value="" />
```
This only happens to DateTimePickers - as the visible Id is appended with a _1 to prevent duplicate Ids with the Hidden Input. - can we swap the _1 to the hidden input?

Is there something that we can do to update the input controls so that this can pass the Total validator checks?

Thanks for all your help Jon
Copy Link
Tom van Enckevort 107 posts 429 karma points

Jan 07, 2019 @ 16:58
1
Hi Jonathan,

You can override the markup of the form fields and make the necessary changes there to be compliant.

Depending on which version of Umbraco Forms you are using there are two different ways:
- Forms v6+: you can use Themes to create a custom theme and override the FieldType views you want to change as described here.
- Forms v5 or older: you can change the default FieldType views in the Views\Partials\Forms folder as described here. The drawback of this older version is that your changes might be overridden when Forms gets upgraded to a newer version (hence why themes were introduced in v6).
Copy Link
Jonathan Roberts 409 posts 1063 karma points

Jan 08, 2019 @ 08:40

0

Hi,

Thanks for this - its really helpful and exactly what we are looking for.

Can I double check the ID of the Datepicker? it seems to be appending a _1 to the ID. Is it OK to swap this ID with the Hidden field or does the ID of the visible "input" field need to be the one with the Underscore? The reason for this is that the Label For Id has nothing to reference to and Total validator is throwing an accessibility error.

Thanks Jon

Copy Link
Tom van Enckevort 107 posts 429 karma points

Jan 08, 2019 @ 08:51

0

Hi Jonathan,

Yes, I think it does use it to set the hidden field value when the date changes. Have a look in the Views\Partials\Forms\DatePicker.cshtml view.

But I guess you could change that bit of code to append the _1 part instead, if you decide to swap the IDs round?

Copy Link

Hynek Kvapil 2 posts 93 karma points

Jul 24, 2019 @ 23:35

Hello,

so I have modified Form.cshtml to change label instead of input view and accessibility pass the test

@if (!f.HideLabel)
                            {

                                    //accessibility fix umbraco forms bug 
                                    // cannot modify input so modify label instead
                                    //https://our.umbraco.com/forum/umbraco-forms/95191-umbraco-forms-failing-wcag21-accessibility-checks
                                    var fId = (f.FieldTypeName.ToLower() == "date") ? (f.Id) + "_1" : f.Id;

                                <label for="@fId" class="col-12 control-label umbraco-forms-label">
                                    @f.Caption 
                                    @if (f.ShowIndicator)
                                    {
                                        <sup class="umbracoForms-Indicator">@Model.Indicator</sup>
                                    }
                                </label>
                            }

Copy Link

is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

Umbraco Forms - failing WCAG 2.1 accessibility checks