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

Posted 2023-03-12

【中文标题】显示表单字段默认值的最佳可访问方式

【英文标题】：Best accessible way to show a default for a form field

【发布时间】：2020-06-20 11:56:19

【问题描述】：

如果您不填写表单字段，那么表明表单字段将具有特定默认值的最佳/推荐方式是什么？我特别考虑基于其他字段的动态字段，并希望它可以正确访问。

想想一个 URL slug。创建帐户时，如果您填写该字段，那很好。如果不这样做，将根据您的用户名生成一个值。但它不会与您的用户名相同，只是从中生成的。

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

我不确定占位符文本在这里是否有效，但我认为不是。我可以使用aria-labelledby 指向“默认值：xyz”的内容，但我不确定这是否可行，或者屏幕阅读器对它的理解程度如何——尤其是在它自动更改的情况下。

干杯

【问题讨论】：

使用标签来解释和预填充字段。类似于“用户 url（您可以根据需要更改，我们已将其设置为 your.name）”的内容，其中 your.name 是动态生成的。如果空间允许以可见的方式包含整个短语，如果不允许，则使用视觉隐藏的 span -> ***.com/a/62109988/2702894

并且这样做使得标签文本动态变化不会给屏幕阅读器带来问题？我还没有尝试过，但我担心它要么根本没有读出变化，要么经常读出它，使事情变得太复杂而无法跟进。

当您从用户名生成标签时，标签不应更改一次以上（如果他们更改了用户名，则可能更改两次）。动态生成的标签将在输入获得焦点时被读取，但如果您在输入获得焦点时更新标签，则不会被读取。

我添加了一个“答案”来说明我的原则意思，如果有意义，我会将其修正为正确的答案。

啊哈 - 我担心它会在它发生变化时立即读出它，并且变得混乱。如果它只关注焦点，那么它就不那么令人担忧了。

【参考方案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" />