Make EPiServer Forms Input-fields more accessible by adding optio

Make EPiServer Forms Input-fields more accessible by adding optional autofill/autocomplete support

Jonas Carlbaum

Vote:

We are currently doing major accessibility work on our customers sites and Forms is kind of bad in this aspect, since the name and id attributes can't have the values like name, given-name or cc-given-name etc.

The reason why Forms is bad in this aspect is obvious, the generic functionality etc.

There is solutions though, using the extended syntax of autocomplete-attribute.
We can override views and extend original elements, of course, but then it's harder to update Forms when you do updates.

My suggestion would be adding "native support" in Forms by adding editor support of optional selection of autocomplete/autofill values with a select/dropdown for all Form Elements that renders input-tags, a grouped select with the attribute values mentioned here: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

More info here: https://www.w3.org/WAI/WCAG21/Techniques/html/H98

Then you could render:

<input autocomplete="name" name="__field_1285" id="92e4ac48-ec56-4b0a-a5eb-fa9fc94005af" type="text" class="FormTextbox__Input" placeholder="" value="" data-f-datainput="">

If the editor selected name in the grouped select box.

#253697

Edited, Apr 21, 2021 13:03

Jonas Carlbaum

Vote:

It's actually a very "simple" fix for you that would make it possible to put EPiServer Forms on drugs for customers, when using this on the fields where appropriate...

#253698

Apr 21, 2021 13:16

Alexandru Dumitru

Vote:

@Jonas, I have tried this on different input elements in Epi forms, but with a name format like name="__field_1285" it does not work for me. After just switching to name="name" for example it starts to work. Any idea if something changed or what I am missing? Thank you.

Here is an example of my full input code:

#297464

Mar 01, 2023 8:50