提问者:小点点

显示表单字段默认值的最佳可访问方式


如果不填写表单字段,最好的/推荐的方法是什么? 我特别考虑的是基于其他字段的动态字段,并希望它能够正确地访问。

想想一个URL鼻涕虫。 当创建一个帐户时,如果你填写了这个字段,那就很好了。 如果没有,将根据您的用户名生成一个值。 但它不会与您的用户名相同,只是从它生成的。

实际上,设置表单字段似乎不太好,因为它不太明显,您可以自己更改它。

我不确定占位符文本在这里是否有效,但我假设不是。 我可以做一个aria-labelledby,指向“default value:xyz”的内容,但我不确定这样做是否有效,或者屏幕阅读器对它的理解程度如何--尤其是在它自动改变的情况下。

干杯


共1个答案

匿名用户

最好的方法是填充输入,并将其作为额外的信息通过标签自动填充的事实公开。

一旦您聚焦相关输入,就会读取输入上的标签。

因此,我们可以“动态”生成标签,以包含我们想要的任何内容。

因此,这里最好的选择是在第二个输入所依赖的第一个输入的blur上生成标签。

在标签中,我们添加说明,解释为什么已经填写了这个输入。

然后,我们根据第一个输入自动填充第二个输入。

在下面的示例中,我将“url”附加到第一个输入值,以便模拟从用户名到URL的某种转换。

如果用户更改了第二个输入值,我还删除了括号中的说明。

null

$('#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" />