Is ASP.NET MVC's Checkbox Implementation Accessible / Screen Reader-Friendly?

1
votes

If you've ever looked at what ASP.NET MVC actually renders when you use @Html.CheckBoxFor, then you've seen that each checkbox you request to be rendered actually results in the emission of not one but two input tags. One is the "true" value checkbox, and the other is for "false." The latter input is of type "hidden".

Generally this doesn't cause problems if you're using ASP.NET MVC correctly. You wouldn't notice the input doubling unless you tried to, for example, do something directly with Request.Form(e.g. Why does ASP.NET MVC Html.CheckBox output two INPUTs with the same name?)

My question, though, is how screen readers deal with this. For example, can they be relied upon to correctly report only the visible checkbox to the site user?

2
asp.net-mvcaccessibility
Do you have an example? The URL you use is just another question but does not show the output. If, as @SLaks says below, one is type="hidden" then there is no issue. If, as you say, they are both type="checkbox" then I would want to see their ids and how they are labeled next. - aardrian
Finally did find an example, at davidweekleyhomes.com/contact. Inspect the checkbox near the bottom right corner of the form and you'll see what I'm talking about. Also, I've edited my post to correct a mistake: one of the inputs is not actually a checkbox. - user1172763

2 Answers

2
votes

Screen readers will ignore hidden inputs.

1
votes

Given the example you cite in your comment, it returns this code:

<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>

Right off the bat there is a problem here because the <label> is not associated with the control, and the visible text that is next to the checkbox is not associated with the field.

When I access the field in NVDA, all it says is "checkbox checked". There is no accessible name at all.

But to your question…

Your question was related to the <input type="hidden">. As @SLaks said, screen readers ignore <input type="hidden">. The fact that they have the same name value is no problem. If they had the same id value, then you would have a problem (how it would manifest in a screen reader depends on things and stuff).