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
    Jonathan Roberts

    Umbraco Forms - failing WCAG 2.1 accessibility checks


    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"
                                               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

  • Tom van Enckevort 107 posts 429 karma points
    Jan 07, 2019 @ 16:58
    Tom van Enckevort

    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).
  • Jonathan Roberts 409 posts 1063 karma points
    Jan 08, 2019 @ 08:40
    Jonathan Roberts


    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

  • Tom van Enckevort 107 posts 429 karma points
    Jan 08, 2019 @ 08:51
    Tom van Enckevort

    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?

  • Hynek Kvapil 2 posts 93 karma points
    Jul 24, 2019 @ 23:35
    Hynek Kvapil


    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
                                        var fId = (f.FieldTypeName.ToLower() == "date") ? (f.Id) + "_1" : f.Id;
                                    <label for="@fId" class="col-12 control-label umbraco-forms-label">
                                        @if (f.ShowIndicator)
                                            <sup class="umbracoForms-Indicator">@Model.Indicator</sup>
Please Sign in or register to post replies

Write your reply to: