Best accessible way to show a default for a form field

Question

What's the best/recommended way to indicate a form field will have a particular default value if you don't fill it out? I'm especially thinking about fields that are dynamic based on other fields, and wanting it to be correctly accessible.

Think a URL slug. When creating an account, if you fill the field out then that's fine. If you don't, a value will be generated based on your username. But it won't be the same as your username, just generated from it.

Actually setting the form field seems bad because it makes it less obvious you can change it yourself.

I'm not sure if placeholder text works here, but I assume not. I could do an aria-labelledby pointing to something that says "Default value: xyz" but I'm not sure if that will work, or how well it will be understood by screen readers - especially if it's changing automatically.

Cheers

use the label to explain and pre-populate the field. Something along the lines of "user url (you can change this if you want, we have set it as *your.name*)" where `your.name` is dynamically generated. If space allows include the whole phrase in a visible way, if not then use a visually hidden span -> https://stackoverflow.com/a/62109988/2702894 — GrahamTheDev, Jun 20 '20 at 12:38
And doing that such that the label text changes dynamically won't cause problems for screen readers? I've not tried it out yet, but I'm concerned about it either not reading out the change at all, or reading it out too often and making things too complicated to follow along. — Graham, Jun 20 '20 at 12:47
The label shouldn't change more than once (maybe twice if they change their username) as you generate it from the username. Labels that are dynamically generated will be read when an input is focused but not if you update the label while the input has focus. — GrahamTheDev, Jun 20 '20 at 13:03
I have added an "answer" to show what I mean in principle, will fix it into a proper answer if it makes sense. — GrahamTheDev, Jun 20 '20 at 13:12
Aha - I was worried it would read it out immediately on it changing, and getting confused. If it only does so on focus that makes it much less of a concern. — Graham, Jun 20 '20 at 13:56
Just thought I would see if you resolved this and whether the answer below covers everything, or whether you need more info. — GrahamTheDev, Jun 26 '20 at 06:29
I think this will be it but I've not yet had time to try it out. — Graham, Jun 26 '20 at 11:51

GrahamTheDev · Accepted Answer · 2020-06-20T14:14:49.120

The best way to do this is to populate the input and expose the fact that it was automatically filled in via the label as an extra bit of information.

Labels on inputs are read once you focus the related input.

For this reason we can generate labels "on the fly" to contain whatever we want.

As such the best option here would be to generate the label on blur of the first input that the second input depends on.

Within the label we add the instructions that explain why this input is already filled in.

We then auto populate the second input based on the input of the first.

In the below example I have appended "URL" to the first input value in order to simulate some sort of transformation from username to URL.

I also remove the explanation in parenthesis if the user has changed the second input value.

$('#iUsername, #iUserURL').on('blur', function(){
  var ElUserName = $('#iUsername');
  var ElUserURL = $('#iUserURL');
  
  if(ElUserURL.val() == ""){
  
    ElUserURL.val(ElUserName.val() + "URL");
      $('label[for="iUserURL"]').text("user url (you can change this if you want, we have set it as " + $('#iUsername').val() + "URL)");
      
    }else if(ElUserURL.val() != ElUserName.val() + "URL"){  
        $('label[for="iUserURL"]').text("user url");
        
    }
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="iUsername">User Name</label><br/>
<input id="iUsername" /><br/>
<hr/>
<label for="iUserURL">User URL</label><br/>
<input id="iUserURL" /><br/>
<hr/>
<label for="itest">I have added this third input just so you have something to tab too, it does not add anything to the fiddle</label><br/>
<input id="itest" />

Best accessible way to show a default for a form field

1 Answers1