ASP.NET MVC 的复选框实现可访问/屏幕阅读器友好吗？答案

【问题标题】：Is ASP.NET MVC's Checkbox Implementation Accessible / Screen Reader-Friendly?ASP.NET MVC 的复选框实现可访问/屏幕阅读器友好吗？
【发布时间】：2019-07-27 04:52:56
【问题描述】：

如果您曾经查看过使用 @Html.CheckBoxFor 时 ASP.NET MVC 实际呈现的内容，那么您会看到您请求呈现的每个复选框实际上会导致发射不是一个，而是两个 input 标签。一个是“真”值复选框，另一个是“假”。后一个输入是“隐藏”类型的。

如果您正确使用 ASP.NET MVC，这通常不会导致问题。除非您尝试直接使用Request.Form（例如Why does ASP.NET MVC Html.CheckBox output two INPUTs with the same name?）进行操作，否则您不会注意到输入加倍

不过，我的问题是屏幕阅读器如何处理这个问题。例如，是否可以依靠他们正确地仅向站点用户报告可见复选框？

【问题讨论】：

你有例子吗？您使用的 URL 只是另一个问题，但不显示输出。如果，正如@SLaks 下面所说，一个是type="hidden"，那么就没有问题。如果，正如你所说，他们都是type="checkbox"，那么我想看看他们的ids 以及他们接下来是如何标记的。
终于找到了一个例子，davidweekleyhomes.com/contact。检查表单右下角附近的复选框，您会看到我在说什么。另外，我编辑了我的帖子以纠正一个错误：其中一个输入实际上不是一个复选框。

标签： asp.net-mvc accessibility

【解决方案1】：

屏幕阅读器将忽略隐藏的输入。

【讨论】：

【解决方案2】：

鉴于您在评论中引用的示例，它会返回以下代码：

<div class="col pure-u-xl-1-3 pure-u-lg-1-3 pure-u-md-1 pure-u-sm-1 pure-u-xs-1">
  <label>Home Club Newsletter</label>
  <input checked="checked" … id="newsletter" name="JoinHomeClub" type="checkbox" value="true">
  <input name="JoinHomeClub" type="hidden" value="false">
  <span class="checkbox-label">Yes, please sign me Up!</span>
</div>

这里有一个问题，因为<label> 没有与控件关联，并且复选框旁边的可见文本与该字段没有关联。

当我访问 NVDA 中的字段时，它只显示“复选框已选中”。根本没有可访问的名称。

但是对于你的问题……

您的问题与<input type="hidden"> 有关。正如@SLaks 所说，屏幕阅读器会忽略<input type="hidden">。它们具有相同的name 值这一事实没有问题。如果它们具有相同的 id 值，那么您就会遇到问题（它在屏幕阅读器中的显示方式取决于事物和内容）。

【讨论】：