Introduction
Learn how to initialize all check inputs that reside in an ASP.NET Core page using a custom TagHelper.
The TagHelper evaluates the checked attribute value on page load and adds and sets the aria-checked attribute. This is important for screen readers to assist people with limited or no vision.
How to use
In an ASP.NET Core project, create a folder in Solution Explorer named TagHelpers, and add the following class.
using Microsoft.AspNetCore.Razor.TagHelpers;
[HtmlTargetElement("input", Attributes = "asp-for")]
public class CheckboxAriaTagHelper : TagHelper
{
public override void Process(TagHelperContext context, TagHelperOutput output)
{
if (!output.Attributes.TryGetAttribute("type", out var type) || type.Value.ToString() != "checkbox") return;
var isChecked = output.Attributes.TryGetAttribute("checked", out var chk);
output.Attributes.SetAttribute("aria-checked", isChecked);
}
}
Next, add the following to Pages\_ViewImports.cshtml. Replace CheckedListBox with the current project namespace.
@addTagHelper *, CheckedListBox
Handling check change
Set up check inputs; the following is included in the source code.
@for (var index = 0; index < Model.CheckModels.Count; index++)
{
<div class="row">
<div class="col-6 ms-3">
<!-- Hidden Id -->
<input asp-for="CheckModels[index].Id" type="hidden" />
<div class="form-check">
<!--
This is where the CheckboxAriaTagHelper runs
-->
<input asp-for="CheckModels[index].Checked"
type="checkbox"
class="form-check-input js-aria-checkbox" />
<!-- Hidden Name to bind back on post -->
<input asp-for="CheckModels[index].Name" type="hidden" />
<label asp-for="CheckModels[index].Checked" class="form-check-label">
@Model.CheckModels[index].Name
</label>
</div>
</div>
</div>
}
Next, add a JavaScript event for the change event on the page.
@section Scripts {
<script>
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll("input.js-aria-checkbox[type='checkbox']").forEach(function (cb) {
// Update aria-checked whenever the checkbox changes
cb.addEventListener("change", function () {
this.setAttribute("aria-checked", this.checked ? "true" : "false");
});
});
});
</script>
}
Test
Testing can be done by displaying the page, opening Developer Tools, selecting a check input, and toggling the check state, which will be displayed in Developer Tools.
Summary
The TagHelper makes it easy to set up aria-check attribute which provides a better user experience for those visiting a site where the visitor has vision disabilities.