체크박스 Aria TagHelper

Source: Dev.to

소개

ASP.NET Core 페이지에 존재하는 모든 체크박스 입력을 사용자 정의 TagHelper를 사용해 초기화하는 방법을 배웁니다.
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. aria-checked를 동기화하는 JavaScript 추가하기
   스크립트를 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 속성을 간편하게 설정할 수 있어 시각 장애가 있는 사용자에게 더 나은 경험을 제공합니다.