HTML 입력 및 레이블 : 러브 스토리

대부분의 입력에는 공통점이 있습니다. 동반자 레이블로 가장 행복합니다! 그리고 행복은 거기서 멈추지 않습니다. 적절한 입력과 레이블이있는 양식은 사람들이 사용하기가 훨씬 쉽고 사람들도 행복하게 만듭니다.

이 게시물에서는 시맨틱 레이블과 입력 조합이 부족하여 모든 종류의 사람들이 양식을 작성하기가 훨씬 어렵게 만드는 상황에 중점을두고 싶습니다. 수백만 명의 사람들의 생계가 형태에 의존하기 때문에 입력과 레이블 사이의 만족스럽고 조화로운 관계를 만들기 위해 내가 아는 최고의 팁을 얻을 수 있습니다.

컨텐츠 경고 : 이 게시물에는 사랑과 관계의 주제가 있습니다.

러브 스토리가 여기에서 시작됩니다! 행복한 라벨과 입력을 만들기위한 기본 사항을 다루겠습니다.

레이블과 입력을 페어링하는 방법

레이블과 입력을 페어링하는 두 가지 방법이 있습니다. 하나는 입력을 레이블 (암시 적)으로 감싸고 다른 하나는 레이블에 속성을 추가하고 입력 (명시 적)에 ID를 추가하는 것입니다.

암시 적 레이블을 입력을 포옹하는 것으로 생각하고 입력 옆에 서서 손을 잡고있는 명백한 레이블을 생각하십시오.

  
  이름:
  
레이블>

속성 값에 대한 명시 적 레이블은 입력의 ID 값과 일치해야합니다. 예를 들어, for for 이름 값이있는 경우 ID는 이름 값도 있어야합니다.

 <label for="name"> 이름 : </label>

불행히도, ID 속성과 ID 속성이 사용 되더라도 모든 보조 기술에 의해 암시 적 레이블이 올바르게 처리되지는 않습니다. 따라서 암시 적 레이블 대신 명시 적 레이블을 사용하는 것이 항상 가장 좋은 아이디어입니다 .

 
 
  이름:
  
레이블>


<label for="Explicit-Label-name"> 이름 : </label>

각 별도의 입력 요소는 하나의 레이블과 쌍을 이루어야합니다. 라벨은 하나의 입력과 쌍을 이루어야합니다. 예, 입력 및 라벨은 일부일처 제입니다. ♥ ♥zel

참고 : 이 규칙에는 한 가지 예외가 있습니다. 입력 그룹 과 함께 작업 할 때 여러 라디오 버튼이나 확인란을 말하십시오. 이 경우

요소는 라디오 버튼과 같은 특정 입력 요소를 그룹화하는 데 사용되며 전체 그룹의 액세스 가능한 레이블 역할을합니다.

모든 입력에 레이블이 필요한 것은 아닙니다

type = "제출"또는 type = "버튼"이있는 입력에는 레이블이 필요하지 않습니다. 값 속성은 대신 액세스 가능한 레이블 텍스트 역할을합니다. 유형 = "숨겨진"입력도 레이블 없이도 괜찮습니다. 그러나 및 <select> 요소를 포함한 다른 모든 입력은 레이블 동반자와 함께 가장 행복합니다.</select>

라벨에 들어있는 것

레이블 내부에 들어가는 내용은 다음과 같습니다.

• 동반자 입력을 설명하십시오. 라벨은 모든 사람에게 입력 파트너에 속한다는 것을 보여주고 싶어합니다.
• 눈에 보이십시오. 입력에 초점을 맞추기 위해 레이블을 클릭하거나 탭할 수 있습니다. 입력과 상호 작용하기 위해 제공하는 추가 공간은 탭 또는 클릭 대상을 증가시키기 때문에 유리합니다. 우리는 조금 더 많이 들어갈 것입니다.
• 일반 텍스트 만 포함합니다. 제목이나 링크와 같은 요소를 추가하지 마십시오. 다시 말하지만, 우리는 이것을 더 아래로 더 뒤에 배후에 올라갑니다.

레이블의 컨텐츠로 수행 할 수있는 유용한 방법 중 하나는 서식 힌트를 추가하는 것입니다. 예를 들어, 에 대한 레이블은 예상대로 입니다. 그러나 우리는 해당 요구 사항을 지정하는 레이블과 입력 사이의 형태로 DD-MM-Yyyy와 같은 특정 형식으로 날짜를 입력해야한다는 힌트를 제공 할 수 있습니다. 힌트는 날짜 형식을 지정할뿐만 아니라 입력의 ARIA가 설명 속성에 해당하는 ID 값을 갖습니다.

 
<label for="date"> 시작 날짜 </label>
에 대한 추가 정보를 설명합니다
<span> (dd-mm-yyyy) : </span>

이런 식으로, 우리는 입력의 내용을 설명하는 명확한 레이블의 이점을 얻고, 입력을 특정 형식으로 입력해야한다는 보너스 힌트.

건강한 관계를위한 모범 사례

다음 팁은 기본 사항을 넘어서 레이블과 입력이 가능한 한 행복한지를 설명하는 방법을 설명합니다.

수행 : 올바른 위치에 라벨을 추가하십시오

페이지의 시각적 순서가 DOM에 요소가 나타나는 순서를 따라야하는 WCAG 성공 기준이 있습니다. 그 이유는 다음과 같습니다.

스크린 리더와 함께 화면 돋보기를 사용하는 비전이 낮은 사용자는 읽기 순서가 화면에서 건너 뛰는 경우 혼란 스러울 수 있습니다. 키보드 사용자는 소스 순서가 시각적 순서와 일치하지 않을 때 다음에 초점이 어디로 갈지 예측하는 데 문제가있을 수 있습니다.

그것에 대해 생각하십시오. 입력 전에 레이블이 오는 표준 HTML이있는 경우 :

 <label for="Orange"> Orange </label>

DOM의 입력 전에 레이블을 배치합니다. 그러나 이제 우리의 레이블과 양식이 유연한 컨테이너 안에 있다고 가정 해 봅시다. 우리는 CSS 순서를 사용하여 입력이 라벨 앞에 시각적으로 오는 곳을 되돌립니다.

 레이블 {order : 2; }
입력 {order : 1; }

요소들 사이를 탐색하는 스크린 리더 사용자는 입력이 먼저 시각적으로 나오기 때문에 입력이 레이블 앞에 초점을 맞출 것으로 예상 할 수 있습니다. 그러나 실제로 일어나는 일은 대신 레이블이 초점을 맞추는 것입니다. 스크린 리더와 키보드를 탐색하는 것의 차이점은 여기를 참조하십시오.

그래서 우리는 그것을 염두에 두어야합니다. 체크 박스 및 라디오 버튼 입력의 오른쪽에 레이블을 배치하는 것이 기존입니다. 이는 HTML에 입력 한 후 레이블을 배치하여 DOM 및 시각적 순서와 일치하는 것을 수행하여 수행 할 수 있습니다.

 
  
  
    
    <label for="Orange"> Orange </label>
  
  
  
    
     바나나 
  
  
  
     사과를 어떻게 좋아합니까? 
    
  

수행 : 화면 리더로 입력을 확인하십시오

입력이 처음부터 작성되었거나 라이브러리로 생성 되든 스크린 리더를 사용하여 작업을 확인하는 것이 좋습니다. 이것은 다음과 같습니다.

• 모든 관련 속성, 특히 FOR 및 ID 속성의 일치하는 값이 존재합니다.
• DOM은 시각적 순서와 일치합니다.
• 레이블 텍스트가 명확하게 들립니다. 예를 들어, "DD-MM-Yyyy"는 대문자 등가 (DD-MM-Yyyy)와 다르게 읽습니다.

지난 몇 년 동안, 나는 다운 시프트와 같은 JavaScript 라이브러리를 사용하여 입력 또는 선택과 같은 기본 HTML과 같은 Autocomplete 또는 Comboboxes와 같은 복잡한 형태의 요소를 구축했습니다. 대부분의 라이브러리는 JavaScript와 함께 ARIA 속성을 추가하여 이러한 복잡한 요소에 액세스 할 수 있도록합니다.

그러나 JavaScript가 파손되거나 비활성화되면 JavaScript를 사용하여 강화 된 기본 HTML 요소의 이점은 완전히 손실되어 접근 할 수 없습니다. 따라서이를 확인하고 안전한 폴백으로 서버 렌더링 된 자바 스크립트 대안을 제공하십시오.

이러한 기본 양식 테스트를 확인하여 입력 및 동반자 레이블 또는 범례를 다른 스크린 리더가 작성하고 발표 해야하는 방법을 결정하십시오.

작업 : 라벨을 보이게하십시오

레이블과 입력을 연결하는 것이 중요하지만, 레이블을 보이게하는 것만 큼 중요합니다. 보이는 레이블을 클릭하거나 탭하면 입력 파트너가 중점을 둡니다. 이것은 수많은 사람들에게 도움이되는 기본 HTML 행동입니다.

입력과의 연관성을 자랑스럽게 보여주고 자하는 레이블을 상상해보십시오.

즉, 디자인이 숨겨진 레이블을 요구할 때가있을 것입니다. 따라서 레이블을 숨겨야 하는 경우 접근 가능한 방식으로 라벨을 수행하는 것이 중요합니다. 일반적인 실수는 디스플레이를 사용하는 것입니다. 없음 또는 가시성 : 레이블을 숨기려면 숨겨져 있습니다. 이 CSS는 특성을 표시합니다. 특성은 시각적으로뿐만 아니라 스크린 리더의 요소를 완전히 숨 깁니다.

라벨을 시각적으로 숨기려면 다음 코드를 사용하는 것을 고려하십시오.

 /* 비 네이티브 초점 요소의 경우. 기본적으로 집중 가능한 요소 */
/ * 사용 .Visally-hidden : not (: focus) : not (: active) */
.Visually-hidden {
  국경비 : 0! 중요;
  클립 : rect (1px, 1px, 1px, 1px)! 중요;
  높이 : 1px! 중요;
  오버플로 : 숨겨진! 중요;
  패딩 : 0! 중요;
  위치 : 절대! 중요;
  흰색 공간 : Nowrap! 중요;
  너비 : 1px! 중요;
}

Kitty Giraudel은 콘텐츠를 책임감있게 숨기는 방법에 대해 깊이 설명합니다.

피해야 할 것

입력과 라벨 사이의 건전한 관계를 보존하고 유지하기 위해 짝을 이룰 때는 할 수 없는 일이 있습니다. 그것들이 무엇인지, 그리고 그들을 막는 방법에 대해 이야기합시다.

Do n't : 모든 브라우저에서 입력이 동일 할 것으로 기대하십시오.

일부 오래된 데스크탑 브라우저에는 지원되지 않은 특정 유형의 입력이 있습니다. 예를 들어, type = "date"인 입력은 Internet Explorer (IE) 11 또는 Safari 14 ¹ (2020 년 9 월 릴리스)에서는 지원되지 않습니다. 이와 같은 입력은 유형 = "텍스트"로 돌아갑니다. 날짜 입력에 명확한 레이블이없고 이전 브라우저에서 자동으로 텍스트 입력으로 돌아 오면 사람들이 혼란 스러울 수 있습니다.

그렇지 않음 : 자리 표시 자로 라벨을 대체하십시오

다음은 입력의 자리 표시 자 속성을 레이블 대신 사용해서는 안된 이유입니다.

• 모든 스크린 리더가 자리 표시자를 발표하는 것은 아닙니다.
• 자리 표시 자의 가치는 더 작은 장치에서 컷오프 될 위험이 있거나 페이지가 브라우저에서 번역 될 때 위험에 처해 있습니다. 대조적으로, 레이블의 텍스트 내용은 새 라인으로 쉽게 포장 할 수 있습니다.
• 개발자가 큰 망막 화면에서 옅은 회색 자리 표시 자 텍스트를 볼 수 있고, 산만하지 않은 환경에서 밝은 방에서 다른 사람들이 할 수있는 것은 아닙니다. 자리 표시자는 시력이 좋은 사람들조차도 시선을 사로 잡고 결국 형태를 포기할 수 있습니다.

• 캐릭터가 입력에 입력되면 자리 표시자는 눈에 보이지 않습니다. 누군가가 양식으로 입력 한 정보를 검토하기 위해 역 추적을해야한다면, 자리 표시자를 다시 만나기 위해 입력 한 내용을 삭제해야합니다.
• 자리 표시 자 속성은 IE 9 이하에서 지원되지 않으며 IE 11에 입력이 중점을두면 사라집니다. 또 다른 점에 주목하십시오. 자리 표시 자 색상은 IE 11에서 CSS로 사용자 정의 할 수 없습니다.

자리 표시자는 모든 것이 완벽 할 때 나타나는 친구와 같지만 가장 필요할 때 사라집니다. 대신 입력을 멋지고 고 대비 라벨과 짝을 이루십시오. 레이블은 플라크가 아니며 100%의 입력을 충성합니다.

Nielsen Norman Group은 형태 분야의 자리 표시자가 해로운 이유를 설명하는 심층적 인 기사를 가지고 있습니다.

그렇지 않습니다 : 다른 속성이나 요소로 레이블을 대체하십시오

레이블이 없으면 일부 스크린 리더는 인접한 텍스트를 찾고 대신 발표합니다. 화면 리더가 발표 할 텍스트를 찾지 못할 수 있기 때문에 이것은 히트 앤 미스 접근법입니다.

아래 코드 샘플은 실제 웹 사이트에서 제공됩니다. 레이블은 입력에 의미 적으로 연결되지 않은 요소로 대체되었습니다.

 <div>
  <span> 카드 번호 </span>
  <div>
    
  </div>
</div>

위의 코드는 스팬을 for = "cardnumber"로 바꾸어 접근성을 보장하기 위해 다시 작성해야합니다. 이것은 대부분의 사람들에게 도움이되는 가장 단순하고 강력한 솔루션입니다.

레이블은 입력의 Aria-Labelledby 속성과 일치하는 값이있는 ID가있는 스팬으로 대체 될 수 있지만 사람들은 스팬을 클릭하여 레이블이 허용하는 것과 같은 방식으로 입력에 초점을 맞출 수 없습니다. 원시 HTML 요소의 힘을 다시 발명하는 대신에 고유 한 HTML 요소의 힘을 활용하는 것이 가장 좋습니다. 기본 입력 요소와 레이블 요소 사이의 러브 스토리는 다시 작성할 필요가 없습니다! 그것은 대단합니다.

그렇지 않습니다 : 라벨 내부에 대화식 요소를 넣으십시오

라벨 안에 일반 텍스트 만 포함되어야합니다. 제목 또는 링크와 같은 대화식 요소와 같은 것들을 삽입하지 마십시오. 모든 화면 독자가 일반 텍스트 이외의 것이 포함되어 있으면 레이블을 올바르게 발표하지는 않습니다. 또한 누군가 라벨을 클릭하여 입력에 초점을 맞추고 싶지만 해당 레이블에 링크가 포함되어 있으면 실수로 링크를 클릭 할 수 있습니다.

 
  <div>
    
    
    <label for="t- and-c"> 나는 <a href="https://link.com"> 이용 약관 </a> </label>을 허용합니다
  </div>
  <div>
    
    
    <label for="t-and-c2"> 나는 이용 약관을 허용합니다. </label>
    <span> 읽기 <a href="https://link.com"> 이용 약관 </a> </span>
  </div>

실제 사례

나는 항상 실제 사례가 무언가를 제대로 이해하는 데 도움이된다는 것을 알게됩니다. 웹을 검색하고 인기있는 구성 요소 라이브러리 및 웹 사이트에서 레이블과 입력의 예를 찾았습니다. 아래에서는 요소가 부족한 곳과 더 나은 페어링을 보장하기 위해 어떻게 개선 될 수 있는지 설명합니다.

구성 요소 라이브러리 : 재료

Materialui는 Google의 디자인 시스템을 기반으로 한 React 구성 요소 라이브러리입니다. 여기에는 많은 디자이너와 개발자에게 인기있는 변형 레이블 패턴이있는 텍스트 입력 구성 요소가 포함되어 있습니다.

입력을 클릭하면 매끄럽고 멋지게 보입니다. 그러나 그것은 문제입니다. 그 특성은 대부분 피부 깊이입니다.

이 게시물을 작성할 때이 구성 요소에서 찾은 몇 가지 문제는 다음과 같습니다.

• 입력에 초점을 맞추기 위해 증가 된 대화 형 영역을 제공하기 위해 입력 외부에 레이블을 가질 수있는 옵션이 없습니다.
• 앞에서 본 힌트를 추가 할 수있는 옵션이 있습니다. 불행히도, 힌트는 근접성을 통한 입력과 일치하는 ID와 Aria가 설명하는 것이 아니라 입력과 관련이 있습니다. 즉, 모든 화면 독자가 도우미 메시지를 입력과 연결할 수있는 것은 아닙니다.
• 레이블은 DOM의 입력 뒤에 있으므로 시각적 순서가 잘못되었습니다.
• 빈 입력은 적어도 활성화되지 않는 한 이미 채워진 것처럼 보입니다.
• 입력을 클릭하면 레이블이 미끄러 져 움직여 모션 감소를 선호하는 사람들에게는 부적절합니다.

Adam Silver는 또한 플로트 레이블이 문제가되는 이유를 설명하고 재료의 텍스트 입력 설계에 대한 자세한 비판을받습니다.

웹 사이트 : HuffPost

HuffPost 웹 사이트에는 뉴스 레터 구독 양식이 포함 된 기사가 있습니다.

이 블로그 게시물을 작성할 때 HuffPost가 사용하는 이메일 입력은 여러 가지 개선으로부터 이익을 얻을 수 있습니다.

• 레이블이 없으면 클릭 또는 탭 대상이 더 작다는 것을 의미합니다. 레이블 대신 입력에 aria-label 속성이 있습니다.
• 자리 표시 자 및 입력 값의 글꼴 크기는 작은 11px이며 읽기가 어려울 수 있습니다.
• 전체 입력은 JavaScript없이 사라집니다. 즉, JavaScript가 비활성화되거나 부러진 경우 사람들이 뉴스 레터에 가입 할 방법이 없습니다.

마감 비고

놀라운 수의 사람들은 정보를 제대로 구성되지 않은 입력에 입력하기 위해 고군분투합니다. 이 목록에는인지, 운동 및 신체 장애가있는 사람들, 자폐 스펙트럼 장애, 뇌 손상 및 시력이 좋지 않습니다. 투쟁하는 다른 사람들은 서두르고, 연결이 좋지 않은, 작은 장치, 오래된 장치, 디지털 형태에 익숙하지 않은 사람들을 포함합니다.

또한 브라우저에서 JavaScript가 파손되거나 꺼질 수있는 많은 이유가 있습니다. 즉, 입력이 기능 장애 또는 완전히 접근 할 수 없음을 의미합니다. 웹 페이지를 완전히 볼 수 있지만 화면 리더와 함께 키보드를 사용하도록 선택할 수있는 사람들도 있습니다.

내가 가고 싶은 메시지는 행복한 레이블과 입력 쌍이 중요하다는 것입니다. 당신의 양식이 사용할 수 없다면 아름답지도 중요하지 않습니다. 나는 거의 모든 사람들이 문제를 일으키는 예쁜 것보다는 추악하지만 사용하기 쉬운 형태를 채울 것이라고 확신 할 수 있습니다.

감사해요

Eric Eggert, Adam Silver, Dion Dajka 및 Kitty Giraudel 의이 게시물을 도와 주신 다음 사람들에게 따뜻하게 감사드립니다. 그들의 결합 된 접근성 지식은 인정받는 힘입니다!

각주

• ¹ DatePicker는 실제로 iOS 14에서 잘 지원되며 매우 좋습니다. MacOS 버전이 수평선에 있어야한다고 생각할 것입니다. ⮑

위 내용은 HTML 입력 및 레이블 : 러브 스토리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!