의미 있는 HTML과 오류 연결로 키보드·보조기기 사용을 지원합니다.
React에서도 접근성의 출발점은 label, button, fieldset 같은 올바른 HTML입니다. 오류 메시지를 입력과 연결하고 색 외의 정보로 상태를 전달합니다.
클릭 가능한 div보다 button을 사용해 키보드, 이름, disabled 동작을 기본 제공받습니다.
검증 실패 시 aria-invalid와 aria-describedby로 원인을 연결합니다.
ARIA를 많이 붙이는 것이 네이티브 HTML보다 자동으로 더 접근 가능한 것은 아닙니다.
로컬 프로젝트에서 확인해보세요이메일 입력과 형식 오류를 추가하세요.
import { useId, useState } from "react";
export default function App() {
const id = useId();
const [name, setName] = useState("");
const error = name.length > 0 && name.length < 2;
return (
<main>
<label htmlFor={id}>이름</label>
<input
id={id}
value={name}
onChange={(e) => setName(e.target.value)}
aria-invalid={error}
aria-describedby={error ? id + "-error" : undefined}
/>
{error && (
<p id={id + "-error"} role="alert">
두 글자 이상 입력하세요.
</p>
)}
<button disabled={!name || error}>등록</button>
</main>
);
}