입력 필드에 두 개의 레이블이있을 수 있습니까?

메리는 작은 형태를 가지고 있었고 그 분야는 그렇게 표시되어 있습니다.
오류가 발생할 때마다 혼란 스러울 것입니다.

각 입력 필드에 대한 레이블이 있습니다 ... 꽤 표준적인 문제입니다. 양식의 유효성을 검사 한 후 양식 상단에 누락되거나 잘못된 정보를 자세히 설명하는 유용한 작은 단락을 표시합니다.

동일한 입력 필드에 대해 두 개의 레이블을 가질 수 있습니까? 하나는 올바른 형식이고 다른 하나는 유효성 검사 알림 텍스트입니까? 내가 이것을해서는 안되는 이유가 있습니까?

이 질문은 HTML 양식에 관한 것입니다. 로부터 사양 :

LABEL 요소는 정보를 컨트롤에 첨부하는 데 사용될 수 있습니다. 각 LABEL 요소는 정확히 하나의 양식 제어와 연관됩니다.

따라서 각 양식 컨트롤은 여러 레이블로 참조 될 수 있지만 각 레이블은 하나의 컨트롤 만 참조 할 수 있습니다. 따라서 컨트롤에 대한 두 번째 레이블을 갖는 것이 의미가 있다면 (그리고 설명하는 상황에서는) 두 번째 레이블을 자유롭게 추가하십시오.

HTML은 합법적이며 작동합니다 (레이블을 클릭하면 해당 필드로 포커스가 이동 됨).

접근성 이유로 올바르게하는 것이 조금 까다 롭습니다.

"공통적 인"접근 방식이 아니며, 하나 이상의 공용 화면 판독기 (NVDA로 테스트 한)는 필드로 포커스를 이동할 때 첫 번째 레이블 만 읽습니다. 동일한 필드에 대한 추가 레이블은 무시합니다.

따라서 오류 메시지가 페이지 상단에있는 경우 필드를 탭하는 시각 장애인 또는 시력이 약한 사용자는 해당 필드에 착륙 할 때 옆에 "실제"레이블이 아닌 오류 메시지 만 들립니다.

따라서 오류 메시지를 올바르게 표현하면 좋은 결과가 될 수 있습니다 (유효하지 않은 필드를 빨간색으로 강조 표시하는 것보다 낫습니다).

예, 동일한 양식 컨트롤에서 여러 레이블을 가리킬 수 있습니다. 이것은 완벽하게 합법적입니다 .

<label for="fname">First name</label>
<label for="fname">Enter your info</label>
<label for="fname">Why not a third label</label>
<input type="text" id="fname" name="fname">

이것은 단지 예일뿐입니다. 일반적으로이 줄들은 서로 가깝기 때문에 하나의 레이블로 묶습니다.