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 320 posts 902 karma points
    Jan 04, 2019 @ 14:07
    Jonathan Roberts
    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

  • Tom van Enckevort 85 posts 355 karma points
    Jan 07, 2019 @ 16:58
    Tom van Enckevort
    0

    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 320 posts 902 karma points
    Jan 08, 2019 @ 08:40
    Jonathan Roberts
    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

  • Tom van Enckevort 85 posts 355 karma points
    Jan 08, 2019 @ 08:51
    Tom van Enckevort
    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?

Please Sign in or register to post replies

Write your reply to:

Draft