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

Question

best/recommended 指示表单字段在您不填写时将具有特定默认值的方法是什么？我特别考虑基于其他字段的动态字段，并希望它可以正确访问。

想想 URL 鼻涕虫。创建帐户时，如果您填写该字段就可以了。如果您不这样做，将根据您的用户名生成一个值。但它不会与您的用户名相同，只是从中生成。

实际上设置表单字段似乎很糟糕，因为它使它不太明显，您可以自己更改它。

我不确定占位符文本是否适用于此处，但我认为不会。我可以做一个 aria-labelledby 指向显示“默认值：xyz”的内容，但我不确定这是否有效，或者屏幕阅读器对它的理解程度如何 - 特别是如果它自动更改时。

干杯

Answer 1

执行此操作的最佳方法是填充输入并公开它是通过标签自动填充的事实作为额外信息。

一旦您关注相关输入，就会读取输入上的标签。

因此，我们可以“即时”生成标签以包含我们想要的任何内容。

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

在标签中，我们添加了解释为何已填写此输入的说明。

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

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

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

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

html

accessibility

wai-aria

uiaccessibility

wcag2.0