htmlFor vs describedBy

htmlFor vs aria-describedbyhtmlFor:aria-describedby:

htmlFor vs aria-describedby

htmlFor:

UI와 상호작용 요소를 직접적으로 연결함. 주로 form 요소에서 쓰이며, label을 클릭해도 input 등 상호작용 요소가 동작하도록 물리적으로 UI를 연결함.
  • UI 상호작용을 위한 직접적인 연결
    • 즉 하나의 요소로 동작하도록 만들기 위함
  • label을 클릭하면 직접적으로 input 필드와 연결되어 포커스가 가거나 동작하도록 설정.
  • 주로 폼 요소에 사용되고, 사용자 인터페이스에서 실제 동작을 연결합니다.
<label htmlFor="email">Your Email</label>
<input
  type="email"
  id="email"
  name="email" // 폼 제출 시 값의 key로 사용할 이름.
/>

aria-describedby:

접근성을 위한 추가 정보 제공 목적
이 요소를 추가적으로 디테일하게 설명해주는 요소와 연관짓기 위해 사용되고, 두 요소간에 연결되어 있고 설명 관계라는 것을 AT에 알려줘서 올바르게 연관지어서 설명해줄 수 있도록 하기 위함.
  • 접근성(Accessibility)을 위해 추가적인 설명을 제공하는 속성.
  • input 요소와 관련된 설명 텍스트나 추가 정보를 스크린 리더에게 제공.
  • 주로 시각적으로 설명을 제공할 수 없거나, 추가적인 정보를 제공할 필요가 있을 때 사용됩니다.
<label htmlFor="email">Your Email</label>
<input
  type="email"
  id="email"
  name="email"
  aria-describedby="email-help"
/>
<small id="email-help">We will never share your email with anyone else.</small>