Checkbox Aria TagHelper

#aspdotnet #csharp #dotnetcore

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.

Source code

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.

DEV Community