양식 레이블 지정의 의미

Question

나는 기능상의 목적을 벗어난 ID를 사용하려고 시도하는 경향이 있습니다. 어느 것이 내 질문에, 양식에 항목을 표시 할 때 여러 가지 방법이 있습니다. 나는 항상 ID를 피하기 위해이 방법을 사용했다. 그러나, 대체 방법의 프로와 콘은 무엇입니까? 편도는 다른 브라우저보다 브라우저에 더 의미 론적 의미가 있습니까? 접근성이 어떻게 그것에서 역할을합니까? 구현의

내 일반적인 방법

<form role="form" action="#" method="post" name="form" novalidate> 
    <label> 
    <span>Search</span> 
    <input role="search" type="search" placeholder="Search" name="s"> 
    </label> 
    <button role="button" type="submit" name="s-btn">Search</button> 
</form> 

그러나, 당신은 또한 for=""을 사용하고 해당 필드에 대한 ID 레이블을 지정할 수 있습니다. 어느 쪽이 분명히 type="radio"과 type="checkbox"에 더 잘 맞았지만 위의 의미 값보다 더 나은 의미 값을 가지고 있습니까?

<form role="form" action="#" method="post" name="form" novalidate> 
    <label for="s">Search</label> 
    <input role="search" type="search" id="s" placeholder="Search" name="s"> 
    <button role="button" type="submit" name="s-btn">Search</button> 
</form> 

그리고 당신도이이 for=""과 응집력 사용되어야한다, ID의와뿐만 아니라 라벨 WAI-ARIA를 사용하거나 그것은 독립 실행 형 라벨링 방법?

<form role="form" action="#" method="post" id="Form" novalidate> 
    <label id="s" for="sf">Search</label> 
    <input role="search" aria-labelledby="s form" id="sf" type="search" placeholder="Search" name="s"> 
    <button role="button" aria-labelledby="form" type="submit" name="s-btn">Search</button> 
</form> 

이 질문 인해 유지 관리, 최적화, 의미, 그리고 접근성을 균형의 끝없는 추구에 데려 같아요.

Answer 1

컨트롤을 라벨에 겹치게하고 (암시 적으로) ID를 사용하고 속성에 (명시 적으로) 서로 다른 긍정적 인 것과 부정적인 것을 두 가지 방법으로 사용합니다. 그러나 전문가가 보았던 현재의 추세는 암시적인 것에서 더 명백한 것으로 옮겨가는 것입니다. .

명시 적으로 문서 내에서 더 유연하게 사용할 수 있으며 html5를 사용하면 문서 내의 아무 곳에 나 배치 할 수 있으므로이 경우에는 손쉽게 사용할 수 있습니다.

암시 적은 체크 박스와 라디오에 사용할 수 없습니다. 레이블 요소는 입력 양식 컨트롤 뒤에 있어야하므로 한 가지 제한이 있습니다. 몇 년 전 암시 적으로 브라우저 지원이 좋지 않았으며 seems to still have trouble with screen readers입니다. 레이블의 크기가 양식 컨트롤의 클릭 할 수있는 표면 영역에 추가되므로 암시 적으로 액세스 가능성과 유용성이 높아집니다.

wai-aria은 아직 끝나지 않았으며 브라우저/스크린 리더 지원에도 문제가 있지만 가능한 경우 구현하지 않아야합니다. 이상적으로 지원되지 않는다면 HTML5 입력이 비 HTML5 지원 브라우저에서와 같이 자동으로 실패하지만 여기서주의하고 경계심없이 테스트합니다. 다른 지원에는 wai-aria를 찾는 대신에 한 화면 판독기/브라우저/사용자 에이전트 모두를 읽을 수 있고 imp/exp 레이블링을 기본값으로 사용할 수 있습니다.

의미 : meh. 10 명의 개발자에게 물어 보면 10 개의 답변을 얻을 수 있습니다. 하지만 정답은 해당 양식 컨트롤을 올바르게 사용하고 있습니까? 올바르게 라벨이 붙어 있습니까? 정확하고 의미있는 의미로 접근성 테스트를 확인하고 통과시킬 것인가? 적절하고 올바르게 또한 사용자의 개인적인 맥락에서이 사용 케이스에서 사용자에게 제공하는 상호 작용에 대해 올바른 컨트롤/레이블을 사용하고 있습니까? 당신은 후자에 대답 할 수 있습니다 ... 만약 당신이 포쉬 교장을 사용한다면, 당신은 어느 한 문제도 있어서는 안됩니다.

사이드 노트 :이 경우 ID는 최적이며 기능을 위해 사용되고 있습니다 ... 양식 컨트롤이 제출시 처리되고 있다고 가정합니다. 나는 당신의 의도 된 사용에 관해서는 기능에 대해 틀릴 수도 있지만, wpo를 피할 수 있다면 여전히 여기에 최적이다 : 당신은 당신의 스타일 시트에서 그들을 대상으로하지 말고, ID를 사용할 수있다.