커스텀 Input 컴포넌트의 라벨 연결 오류 와 해

<BaseInput> 같은 커스텀 컴포넌트에서는 Vue의 구조 특성상 <label for="..."> 구조가 잘못되기 쉽습니다.

 

스크린리더는 이 input이 어떤 필드인지 알 수 없습니다.

 

<!-- 문제 있는 코드 -->
<template>
  <div>
    <label>{{ label }}</label>
    <input :value="modelValue" />
  </div>
</template>

 

 

<!-- 개선 포인트 -->

1. input과 label 연결을 위한 id 생성
   <template>
     <div>
       <label :for="inputId">{{ label }}</label>
       <input
         :id="inputId"
         :value="modelValue"
         @input="$emit('update:modelValue', $event.target.value)"
       />
     </div>
   </template>
   
   <script setup>
   const inputId = `input-${Math.random().toString(36).substr(2, 9)}`;
   </script>
2. aria-labelledby 대체 방식
   시각적으로 라벨을 숨겨야 할 경우:
   <label :id="labelId" class="sr-only">{{ label }}</label>
   <input :aria-labelledby="labelId" ... />
   
   
3. v-model 호환 개선
   defineProps(['modelValue', 'label']);
   defineEmits(['update:modelValue']);
   
   

QA 도구(Axe, Lighthouse, NVDA) 모두에서 라벨 오류가 사라졌으며, 해당 방식은 이후 전체 입력 컴포넌트에 공통 적용되어 코드 품질 및 접근성 준수도를 동시에 끌어올릴 수 있었습니다.