폼 콘트롤 요소에 레이블을 추가하면 장애인 뿐만 아니라 일반인들의 사용성도 크게 개선시켜 줍니다. 레이블링 된 텍스트를 클릭하는 것만으로도 폼 콘트롤 요소를 클릭한 것과 같은 효과를 낼 수 있습니다. 즉, 클릭이 가능한 영역을 확대해 주기 때문에 일반인들의 사용성이 증가하게 되고 스크린 리더 사용자는 폼 콘트롤 요소에 커서가 머물때 이에 대응하는 레이블(텍스트)을 인식할 수 있기 때문에 접근성이 높아 집니다.

WCAG 10.2

웹 표시 장치가 레이블(label)과 폼(form) 컨트롤 사이의 명시적으로 지정된 연관을 명료한 방법으로 인식 가능하게 해 줄 때까지는 레이블을 적절한 위치에 놓아야 한다.

WCAG 12.4

컨트롤과 그 컨트롤의 레이블을 명시적으로 짝지어야 한다.

KWCAG 3.3

온라인 서식을 포함하는 콘텐츠는 서식 작성에 필요한 정보, 서식 구성 요소, 필요한 기능, 작성 후 제출 과정 등 서식과 관련한 모든 정보를 제공해야 한다.

드림위버의 환경설정 Preferences>Accessibility 에 의하면 높은 접근성을 요구하는 마크업을 시도할 때 대화상자를 띄워서 접근성 관련 속성을 입력하거나, 또는 접근성 속성이 입력되어 있지 않은 경우 이를 경고해 주도록 설정할 수 있습니다. 보통의 경우 접근성 속성이 있는 마크업을 생성하려고 할 때 대화상자가 열리면서 그것을 채우도록 유도하고 대체문자가 빠진 이미지 등을 복사할 때에는 여러개의 이미지가 한꺼번에 복사 되더라도 대체문자를 모두 채울 수 있는 대화상자를 뿌려줍니다. 이어지는 제 설명을 들으시려면 일단 환경설정에서 다음과 같이 체크되어 있어야 합니다.

준비가 되었다면 시작해 봅시다.

1. 삽입메뉴에서 textfield 용 input 요소를 클릭 하여 문서에 삽입하려고 시도하면 아래와 같은 대화상자가 나타납니다.

   

2. Label 부분에는 현재 삽입하려고 하는 textfield 를 설명하는 문장을 넣습니다.

   상기 예제와 같이 입력하는 경우 코드상으로는  ‘<label>비밀번호</label>’ 형식으로 <label> 태그와 문장이 함께 마크업 됩니다.

3. Style

   • Wrap with label tag(레이블 태그로 감싸기)

     <label> 태그로  레이블 텍스트와 <input /> 모두를 감쌉니다. 코드 상으로는 ‘<label>비밀번호<input type="text" /></label>’ 과 같은 형식이 되겠지요. 이러한 방법의 장점은 단순하게 레이블링 만을 위하여<input /> 태그에 새로운 ‘id’ 를 부여하지 않아도 된다는 점 입니다. 만약 <label> 태그가 <input /> 태그를 감싸주지 않는 상황이라면 이 둘의 관계를 짝지어주기 위하여 <input /> 태그에는 새로운 ‘id’ 속성과 값이 필요하고 <lable> 태그에는 ‘for’ 라는 속성이 추가 되어야 합니다. 하지만 이렇게 <lable> 태그로 텍스트와 콘트롤 요소를 한번에 감싸주게 되면 레이블 텍스트와 <input> 사이의 관계를 표시하기 위하여 별도의 ‘id’ 나 ‘for’ 속성이 필요없이 둘의 관계는 하나의 쌍으로 자동 정리 됩니다.

   • Attach label tag using ‘for’ attribute(레이블 태그에 ‘for’ 속성을 적용함)

     <lable> 태그에 ‘for’ 속성을 사용하게 됩니다. 따라서 <label> 은 레이블 텍스트만 감싸주고 <input /> 은 <lable> 태그 밖에서 마크업 됩니다. 코드상으로는 이렇게 됩니다. <lable for="pw">비밀번호</lable><input type="text" id="pw" />. 부모와 자식같이 종속된 관계가 아니기 때문에 ‘id’ 와 ‘for’ 속성이 레이블 텍스트와 콘트롤 요소를 연결해 주고 있는 형태 입니다. 이 방식의 장점은 레이블 텍스트와 콘트롤 요소가 서로 다른 마크업에 둘러쌓여 있을 때 유용 합니다. ‘id’ 와 ‘for’ 속성을 사용하면 레이블 텍스트와 콘트롤 요소가 아무리 멀리 떨어져 있더라도 이 둘의 관계는 바늘과 실처럼 유지 됩니다. 물론 하나의 문서안에 함께 존재할 때만 그렇습니다.

   • No label tag(레이블 태그 사용안함)

     이 옵션은 <input type="submit" />, <input type="image" /> 인 경우에 주로 사용 됩니다. <input type="submit" value="검색" /> 과 같은 형식으로 마크업 될 때에는 별도의 레이블을 추가할 필요가 없기 때문 입니다. 또한, 이미지인 경우에는 <input type="image" alt="검색" /> 과 같이 코딩하면 되기 때문에 레이블이 필요가 없는 경우가 되겠습니다. 오히려 레이블링 하면 중복된 텍스트로 인하여 혼란스럽게 됩니다.

4.  Position

   • Before form item(콘트롤 요소 앞쪽에 레이블 텍스트를 배치함)

     레이블 텍스트를 콘트롤 요소 앞쪽에 배치 합니다. <lable> 태그가 텍스트와 콘트롤 전체를 감싸는 경우와 <lable> 에서 ‘for’ 속성을 사용하면서 <input /> 요소를 밖으로 빼놓는 두 가지 경우 모두 이 명령의 영향을 받습니다.

   • After form item(콘트롤 요소 뒷쪽에 레이블 텍스트를 배치함)

     레이블 텍스트를 콘트롤 요소 뒷쪽에 배치 합니다. <lable> 태그가 텍스트와 콘트롤 전체를 감싸는 경우와 <lable> 에서 ‘for’ 속성을 사용하면서 <input /> 요소를 밖으로 빼놓는 두 가지 경우 모두 이 명령의 영향을 받습니다.

5. Access key 와 Tab Index

   • 사용하면 오히려 부작용이 있으므로 권장되지 않습니다.

     Access key 는 스크린 리더의 단축키와 충돌할 수 있는 가능성이 항상 존재합니다. 또한 Tab index 를 설정하여 Tab 키의 이동순서를 강제로 변경하는 것보다는 콘텐츠의 배열을 순차적으로 하여 Tab index 를 설정하지 않더라도 Tab 키의 이동순서가 문맥의 흐름에 맞도록 하는것이 좋습니다.