네이티브 HTML과 반응형 오류 상태로 접근 가능한 입력을 만듭니다.
label, button, aria-describedby를 올바르게 연결하고 오류를 색뿐 아니라 텍스트로 제공합니다. Vue directive는 접근성 의미를 자동으로 보장하지 않습니다.
조건부 오류가 생길 때 입력의 aria-invalid와 설명 id를 함께 갱신합니다.
제출 후 첫 오류로 포커스를 이동하는 정책도 실제 폼에서 검토합니다.
클릭 가능한 div는 키보드와 disabled 동작을 직접 재구현해야 합니다.
로컬 프로젝트에서 확인해보세요이메일 형식 검증을 추가하세요.
<script setup>
import { ref, computed } from "vue";
const name = ref("");
const error = computed(() => name.value.length > 0 && name.value.length < 2);
</script>
<template>
<main>
<label for="name">이름</label
><input
id="name"
v-model="name"
:aria-invalid="error"
:aria-describedby="error ? 'name-error' : undefined"
/>
<p v-if="error" id="name-error" role="alert">두 글자 이상 입력하세요.</p>
<button :disabled="!name || error">등록</button>
</main>
</template>