复选框 Aria TagHelper

Source: Dev.to

介绍

了解如何使用自定义 TagHelper 初始化 ASP.NET Core 页面中所有的复选框输入。
TagHelper 在页面加载时评估 checked 属性的值，并添加/设置 aria-checked 属性。这对于屏幕阅读器来说非常重要，可帮助视力受限或失明的用户。

使用方法

1. 创建 TagHelper
   在 ASP.NET Core 项目中，创建一个名为 TagHelpers 的文件夹并添加以下类：

   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);
       }
   }

2. 注册 TagHelper
   在 Pages/_ViewImports.cshtml 中添加以下行。将 CheckedListBox 替换为你项目的根命名空间。

   @addTagHelper *, CheckedListBox

3. 在页面中添加复选框输入
   以下示例演示如何渲染绑定到模型 (CheckModels) 的复选框列表。TagHelper 会在每个 type="checkbox" 的 <input> 上运行。

   @for (var index = 0; index 
               
               
               
               
               
                   
                   
                   
                       @Model.CheckModels[index].Name
                   
               
           
       
   }

4. 添加 JavaScript 以保持 aria-checked 同步
   将脚本放在 Scripts 区段（或任何合适的位置），确保在 DOM 加载后执行。

   @section Scripts {
       
           document.addEventListener("DOMContentLoaded", () => {
               document.querySelectorAll("input.js-aria-checkbox[type='checkbox']").forEach(cb => {
                   // Update aria-checked whenever the checkbox changes
                   cb.addEventListener("change", function () {
                       this.setAttribute("aria-checked", this.checked ? "true" : "false");
                   });
               });
           });
       
   }

测试

1. 在浏览器中运行该页面。
2. 打开开发者工具。
3. 选中一个复选框输入并切换其状态。
4. 观察 aria-checked 属性是否相应地更新为 "true" 或 "false"。

TagHelper 简化了 aria-checked 属性的设置，为视障用户提供了更好的使用体验。