범례 요소 내에 레이블 요소를 감싸십시오

StackOverflow https://stackoverflow.com/questions/238996

  •  04-07-2019
  •  | 
  •  

문제

나는 전설 요소 내에 라벨 요소를 넣을 이유가 없었습니다 (실제로 그것에 대해 생각하지 않았거나 그것을 본 적이 없습니다). 그러나 내가 구현하고있는 디자인으로서 그렇게하고 싶은 유혹이 있습니다.

내가 유혹하고 싶은 일은 다음과 같습니다.

<fieldset>
<legend><label for="formInfo">I would like information on</label></legend>
<select id="formInfo">
    <option value="Cats">Cats</option>
    <option value="Dogs">Dogs</option>
    <option value="Lolz">Lolz</option>
</select>
</fieldset>

Firefox3, Safari, Opera 및 IE6/7에서 예상대로 (레이블을 클릭하면 해당 입력에 중점을 둡니다) 유효성 검사를 통과하지만 알려진 이유가 있는지 궁금합니다 (접근성? 시맨틱? 브라우저 문제) 이것은 끝나지 않아야합니다

도움이 되었습니까?

해결책

당신은 어디에 있습니다 </fieldset>?

의미 적으로, legend a fieldset, 그냥 label 단일 필드를 설명합니다.

필드 세트는 의미 적으로 관련된 필드를 함께 그룹화하는 데 사용되어야합니다 (예 : "주소"필드는 거리, 도시 및 국가에 대한 입력 필드가있을 수 있음).

필드 세트에 하나 이상의 필드가 있다고 가정하면 제안하는 것을 의미 적으로 의미가 없습니다. 필드 셋을 설명하는 별도의 범례 텍스트를 만들어 각 필드의 레이블을 작성해야합니다.

필드가 하나만 있다면 필드 세트 나 전설이 필요하지 않습니다.

따라서 기본적으로, 당신은 당신이하고있는 일을해서는 안됩니다.

CSS 규칙 또는 JavaScript 이벤트를 첨부하는 추가 요소가있는 경우 일반 요소와 같은 일반 요소를 사용하는 것이 좋습니다. div 그리고 span 그것은 텍스트 음성 연사 및 기타 비 시각 사용자 에이전트를 혼동하지 않습니다.

즉, a div 또는 span 접근성/의미론 측면에서 효과적으로 중립적이며 (아무것도 의미하지 않음) 의미 론적 요소 (이 경우와 같이 약간만 있더라도)를 잘못 사용하는 것과 관련이 있으며, 이는 잠재적으로 오해의 소지가 있습니다. 심지어 상상해보십시오 최고의 사례 텍스트 음성 브라우저에서 레이아웃의 시나리오 : 텍스트는 한 번 전설로 한 번, 라벨로 한 번 큰 소리로 읽습니다. 왜 누군가가 "I Wave Inform"이라는 문구를 원합니까? 특히 그것은 선택의 맥락에서만 의미가 있기 때문에 select 제어.

다른 팁

글쎄, 레이블 요소 자체는 괜찮아 보인다 - 그것은 "forminfo"요소에 대한 설명이므로 걱정할 필요가 없습니다. 그러나 의미 적으로,이 말은 legend 요소? 전체 필드 세트의 캡션이어야합니다 ....

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top